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

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

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

原作者与来源

• 原作者/维护者：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\nbash\ngit clone <repo-url>\ncd graphical-agents\nnpm test\n\n\n可视化构建器开发：\n\nbash\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 参与项目改进。