App Next-AI-Draw-io 用对话生成draw.io架构图的AI工具

画架构图、流程图最烦的不是画图，而是先把脑子里的结构翻译成 draw.io 里一个个方框和连线。你一边想逻辑一边拖元件，半小时过去图还没成形，思路反倒被打断。更难受的是，改一版需求就要重排一遍，协作时别人还看不懂你那堆随意摆的节点。DayuanJiang 开源的 next-ai-draw-io 想让这件事变成一句话的事：你用自然语言描述要画什么，它直接在浏览器里生成可编辑的 draw.io 图，还能作为 MCP 服务器嵌进 Claude Code、Cursor 这类智能体里，让 AI 自己画完给你看。

它同时提供 Web 应用、桌面应用和 MCP Server 三种形态，底层基于 Next.js。项目采用 Apache-2.0 协议，TypeScript 编写，当前版本 v0.5.0，最近更新在 2026 年 10 月 26 日，GitHub 星数已超过 3.6 万，是「AI 画架构图」方向最受欢迎的开源项目之一，文档与多语言支持都相当完善。

项目基本信息

一、项目介绍

next-ai-draw-io 的核心体验是「聊天即画图」：你描述「带登录、MFA 和会话管理的用户认证流程图」，它实时在浏览器里渲染出对应的 draw.io 图，并且生成的是标准 draw.io 格式，可以下载下来继续手动微调。相比 draw.io 内置的 AI，它把模型选择交给你，能接多种 provider，也支持离线/内网部署，敏感架构图不必走公网模型。

作为 MCP 服务器时，它把画图能力暴露给编码智能体：Claude Code、Codex、VS Code、Cursor 等客户端配置好之后，直接让 AI「画个图」，图就在浏览器里冒出来。官方还提供了 Cloudflare Workers、Docker 与离线部署指南，适配不同运行环境，从个人到企业都能落地。

二、核心优势

第一，对话驱动。一句话生成可编辑的 draw.io 图，省去手工拖拽。第二，格式通用。产出是标准 draw.io 文件，能继续在原生编辑器里改。第三，模型自主。可接多种 provider，也支持离线。第四，智能体友好。MCP 形态让 AI 自己画图，不必人肉中转。第五，部署灵活。Web、桌面、Docker、Cloudflare 都能跑，Apache-2.0 可商用，没有授权包袱。

三、适用场景

最适合需要频繁产出架构图、流程图、时序图的工程师与技术写作者：系统设计评审前快速出初稿、给文档配图、让智能体在写方案时顺手把图也画了。对内网/离线环境，它的离线部署指南让敏感架构图不必走公网模型，既快又不用担心信息外泄。

四、安装教程

最轻量的方式是为智能体添加 MCP 服务器：

claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest

本地运行 Web 版（默认端口 6002）：

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local   # 填入你的模型 provider 与 API Key
npm run dev

桌面安装包也可从 Releases 页直接下载。常见报错多为未配置 API Key，填好 .env.local 即可，端口冲突时改配置中的 6002 即可。

五、使用示例

接好 MCP 后，对智能体说：

画一个用户认证的流程图，包含登录、MFA 和会话管理

图会在浏览器里随对话实时生成。在 Web 版里，你也可以直接在聊天框输入同样的话，得到一份可下载、可继续编辑的 draw.io 文件。真实输入是这段描述，输出是标准格式的图形，而非一段文字说明，后续还能在原生 draw.io 里继续雕琢。

六、常见问题

问：必须联网用模型吗？默认需要，但也支持离线部署。问：生成的图能再改吗？是标准 draw.io 格式，原生编辑器可继续编辑。问：和 draw.io 内置 AI 有何不同？模型自主可选，且能作为 MCP 给智能体调用。问：支持哪些客户端？Claude Code、Codex、VS Code、Cursor 等。问：企业能用吗？Apache-2.0 可商用。

七、总结

next-ai-draw-io 把「画架构图」从手工拖拽变成对话生成，还能作为 MCP 让 AI 自己画图。对常和图打交道、又嫌手动画图打断思路的工程师，这套 Apache-2.0 的开源工具值得一试，尤其适合放进智能体的工作流里，让方案与配图一次成型。