# Draw Your Agents：可视化 AI Agent 工作流构建器，拖拽即可生成可运行的 Google ADK 项目

> 一款开源可视化工具，通过拖拽节点设计 AI Agent 工作流，并自动编译为可运行的 Google ADK Python 项目。支持变量芯片系统、实时代码预览和一键导出功能。

- 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm)
- 发布时间: 2026-06-07T11:45:16.000Z
- 最近活动: 2026-06-07T11:49:07.403Z
- 热度: 112.9
- 关键词: AI Agent, Google ADK, 可视化构建器, 工作流, 代码生成, React Flow, 开源工具
- 页面链接: https://www.zingnex.cn/forum/thread/draw-your-agents-ai-agent-google-adk
- Canonical: https://www.zingnex.cn/forum/thread/draw-your-agents-ai-agent-google-adk
- Markdown 来源: ingested_event

---

## 原作者与来源

- 原作者/维护者：neo-fetch
- 来源平台：github
- 原始标题：draw-your-agents
- 原始链接：https://github.com/neo-fetch/draw-your-agents
- 来源发布时间/更新时间：2026-06-07T11:45:16Z

## 原作者与来源\n\n- **原作者/维护者**: neo-fetch\n- **来源平台**: GitHub\n- **原始标题**: draw-your-agents\n- **原始链接**: https://github.com/neo-fetch/draw-your-agents\n- **发布时间**: 2026年6月\n\n---\n\n## 项目概述\n\nDraw Your Agents 是一款创新的开源可视化构建器，旨在简化 AI Agent 工作流的设计与开发流程。它允许用户通过直观的拖拽操作在画布上设计复杂的 Agent 图结构，然后自动将这些可视化设计编译成可立即运行的 Python 项目，基于 Google 的 Agent Development Kit (ADK) v2.0.0 框架。\n\n这个工具的核心价值在于架起了可视化设计与代码实现之间的桥梁，让开发者无需手动编写繁琐的 ADK 代码，就能快速构建和迭代 Agent 工作流。无论是原型设计还是生产部署，都能显著提升开发效率。\n\n---\n\n## 核心功能特性\n\n### 可视化图形构建器\n\n项目提供了一个功能丰富的可视化编辑环境，基于 React Flow 实现：\n\n- **拖拽式画布**: 用户可以自由添加、连接和排列 Agent 节点，直观构建工作流拓扑\n- **完整配置检查器**: 通过类型分发的表单编辑每个节点的属性，包括模型参数、指令、模式定义、路由规则、工具配置等\n- **实时代码预览**: 在编辑图形的同时，即时查看生成的 ADK Python 代码更新\n- **一键导出**: 下载可运行的 .zip 项目脚手架，解压后执行 pip install && python -m workflow 即可运行\n\n### 变量芯片系统（第二阶段核心功能）\n\n这是该项目最具创新性的特性之一：\n\n- **内联提示变量**: 通过拖拽将模式字段作为芯片插入 Agent 的提示词中\n- **自动连线**: 插入芯片时自动设置 Agent 的 inputSchemaRef，减少手动配置\n- **单模式轨道**: 调色板智能过滤，每个 Agent 仅显示一个模式，强制执行 ADK 的数据流约束\n- **模式 CRUD**: 直接在 UI 中创建、重命名和删除模式及字段，重命名时引用自动级联更新\n\n---\n\n## 代码生成管道\n\n### 架构流程\n\n整个系统遵循清晰的架构设计：\n\n```\nUI / draw.io → IR → validator → codegen → runnable ADK project (.zip)\n```\n\n### 中间表示（IR）\n\n项目采用"单一真相源"的设计理念：\n\n- **统一的 IR 格式**: 所有输入（可视化构建器、draw.io）都生成版本化的 JSON Graph IR\n- **递归结构**: 嵌套工作流在 config.graph 中携带完整的子 IR，使用相同规则递归验证\n- **扁平全局命名空间**: 节点和模式名称在所有嵌套级别上保持唯一\n\n### 生成的项目结构\n\n生成的不是单文件，而是一个完整的可运行项目：\n\n```\nmy_workflow/\n├── workflow.py      # root_agent = Workflow(edges=[...])\n├── agents.py        # Agent(...) 配置模型参数和指令\n├── functions.py     # function / router / join / humanInput 实现\n├── schemas.py       # Pydantic BaseModels 定义\n├── requirements.txt # google-adk==2.0.0\n├── .env.example\n└── README.md\n```\n\n---\n\n## 节点类型支持\n\n项目支持完整的 ADK v1 声明式节点类型：\n\n| IR 类型 | ADK 构造 | 关键配置 |\n|---------|----------|----------|\n| agent | Agent / LlmAgent | 模型、指令、模型参数、模式、工具 |\n| function | def f(node_input) | 描述、输入/输出类型、emits、body |\n| router | fn → Event(route=) | 路由规则、分支目标 |\n| tool | FunctionTool | 输入/输出类型、body |\n| join | JoinNode | 等待所有上游节点完成 |\n| humanInput | RequestInput | 消息、payloadRef、responseSchemaRef |\n| workflow | 嵌套 Workflow | 子 IR 在 config.graph 中 |\n\n---\n\n## 技术栈与项目结构\n\n### 前端技术栈\n\n- **React 19**: UI 框架\n- **React Flow (@xyflow/react) 12**: 画布、节点、类型化句柄\n- **Lexical 0.45**: 支持内联变量芯片的提示词编辑器\n- **Zustand 5**: IR 存储（单一真相源）\n- **Vite 7**: 开发服务器和打包工具\n\n### 项目架构\n\n```\ngraphical-agents/\n├── packages/\n│   ├── ir/          # IR 类型、JSON Schema、TS 验证器\n│   └── codegen/     # IR → ADK 项目生成器\n├── apps/\n│   └── web/         # 可视化构建器 - React Flow + Lexical + Zustand\n├── scripts/         # CLI 工具\n└── docs/            # 架构文档和决策记录\n```\n\n---\n\n## 开发与测试\n\n### 双层测试架构\n\n项目采用创新的测试策略：\n\n**第一层（默认门禁）**: 无需安装即可运行，涵盖 IR 验证器、代码生成 golden 测试、纯 reducer 和 bridge 测试\n\n**第二层（DOM 测试）**: 需要安装依赖，覆盖 Lexical 集成、VariableNode 回归测试、真实编辑器往返测试\n\n### 快速开始\n\n无需安装的冷启动测试：\n\n```bash\ngit clone <repo-url>\ncd graphical-agents\nnpm test\n```\n\n可视化构建器开发：\n\n```bash\ncd apps/web\nnpm install\nnpm run dev\n```\n\n---\n\n## 开发路线图\n\n| 阶段 | 状态 | 描述 |\n|------|------|------|\n| Phase 0 | ✅ 完成 | IR 模式 + 边缘编译器 + 模板 + golden 测试 |\n| Phase 1 | ✅ 完成 | 可视化构建器 MVP（画布、检查器、实时预览、保存/加载、.zip 下载） |\n| Phase 2 | ✅ 完成 | 变量芯片系统（Lexical 编辑器、插入调色板、自动连线、模式 CRUD） |\n| Phase 3 | 🔜 即将推出 | draw.io XML 导入（mxGraph XML → IR） |\n| Phase 4 | 📋 计划中 | Python 保真度服务（black + compile() + dry-run Workflow） |\n| Phase 5 | 📋 计划中 | 打磨、会话状态变量、撤销/重做 |\n\n---\n\n## 实际应用价值\n\nDraw Your Agents 解决了 AI Agent 开发中的几个关键痛点：\n\n1. **降低入门门槛**: 可视化设计让不熟悉 ADK API 的开发者也能快速上手\n2. **加速迭代周期**: 实时预览和一键导出大幅缩短从设计到运行的周期\n3. **保证代码质量**: 生成的代码经过 golden-file 测试验证，确保与 ADK 的兼容性\n4. **支持复杂场景**: 嵌套工作流、路由、人工输入等高级特性开箱即用\n\n对于需要快速原型设计 Agent 工作流的团队，或者希望将可视化设计纳入开发流程的企业，这是一个极具价值的工具。\n\n---\n\n## 许可证与参与\n\n项目采用 AGPL-3.0 开源许可证，欢迎社区贡献。开发者可以通过 GitHub Issues 和 Pull Requests 参与项目改进。