Next AI Draw.io：用自然语言画出架构图

你有没有过这样的经历——半夜两点，脑子里构思好了一张复杂的系统架构图，但打开 draw.io 面对空白画布，手指悬在键盘上，脑子里却一片空白？形状该选哪个？连接线怎么画？标注文字放哪里？折腾了半小时，画出来的东西自己都看不懂。

Next AI Draw.io 解决的就是这个痛点。它是一个基于 Next.js 的 Web 应用，把大语言模型（LLM）和 draw.io 图表编辑器合二为一——你只需要用自然语言描述想要的图表，AI 就自动帮你生成 draw.io XML，渲染成可编辑的矢量图。

图1：输入「生成 RAG 架构图用于聊天应用」，AI 自动生成数据摄入流程图

项目背景：一个人做出来的现象级工具

这个项目由独立开发者 DayuanJiang 创建和维护，GitHub 已收获超过 29,600 Star，Fork 数超过 3,100，是近年来开源图表工具领域增长最快的项目之一。项目同时提供中文、日语、英语三语文档，Live Demo 站点由字节跳动 Doubao 赞助 API 算力，用户可以免安装直接体验。

作者在 README 中特别提到：Claude 系列模型在训练时使用了 draw.io 格式的云架构图（AWS/Azure/GCP Logo），因此在生成云架构图方面，Claude 的效果显著优于其他模型——这是项目文档中难得一见的技术实话，也间接说明了高质量训练数据对模型输出质量的影响。

核心功能：不止是文字生成图

表面上，这项目做的事是「文字 → 图表」。但深入体验后，你会发现它的能力边界远比这个描述宽得多：

1. 多模态输入生成图表

不只支持文字 prompt，你还可以直接上传已有的图表图片或 PDF 文档，AI 会分析内容并生成对应的 draw.io 可编辑图。比如你从某篇论文里截了一张架构图，丢进去，AI 就能帮你「还原」成可编辑版本，省去从零开始重画的麻烦。

2. AI 思维过程可见

支持 OpenAI o1/o3、Gemini、Claude 等模型的推理过程（Thinking）展示。用户可以亲眼看到 AI 是如何理解 prompt、如何规划图表结构的——这对于学习和调试 prompt 非常有价值。

3. 图表版本历史

内置完整的版本控制，每次 AI 修改图表都会生成一个历史快照。你可以随时回滚到之前的版本，解决了「AI 改坏了不知道怎么还原」的常见问题。

4. MCP Server：让 AI Agent 直接操控图表

这是我认为最有想象力的功能。项目提供了 MCP（Model Context Protocol）Server，配置后，Claude Desktop、Cursor、VS Code 等 AI 编程工具就能直接调用 Next AI Draw.io 来生成图表。比如你在 VS Code 里让 Claude「画一个包含登录、MFA、会话管理的用户认证流程图」，图表会实时出现在你的浏览器里——图表生成完全融入了 AI 编码工作流。

图2：AWS 无服务器架构认证流程图示例

部署方式：三条路，总有一条适合你

路线一：Docker 一键部署（推荐）

最简单的方式：git clone → docker-compose up，两条命令跑起来。docker-compose.yml 会同时启动 draw.io 嵌入服务（端口 8080）和主应用（端口 3000），无需额外配置 Draw.io URL。项目使用多阶段 Dockerfile 构建，最终镜像是精简的 Node.js standalone 模式。

路线二：Vercel / EdgeOne Pages 部署

适合想快速上线、免运维的用户。项目针对 Vercel（Next.js 亲爹）和腾讯 EdgeOne Pages 做了专门优化，一键 Fork → Deploy。但需要注意：部署到第三方平台后，draw.io 需要使用线上托管版本（embed.diagrams.net），无法本地自托管 draw.io 容器。

路线三：桌面端 Electron 应用

如果你不想折腾部署，项目也提供了完整的 Electron 桌面应用，支持 Windows、macOS、Linux，直接下载 release 包安装即可使用，数据完全本地存储。

图3：随手画只猫——除了严肃的技术图，也能生成创意插画

技术架构：站在 Vercel AI SDK 的肩膀上

从代码结构看，这是一个典型的高质量企业级 Next.js 应用：

• 前端框架：Next.js 16 + React 19 + TypeScript，强类型保障
• AI 层：Vercel AI SDK（ai + @ai-sdk/*），支持 14+ 种 LLM Provider（OpenAI、Anthropic、 Google、DeepSeek、AWS Bedrock、Ollama 等）
• 图表渲染：基于 react-drawio 组件，draw.io XML 为底层格式
• 数据追踪：集成 Langfuse（LLM 可观测性平台），支持 AI 调用追踪和成本分析
• 桌面端：Electron，支持三平台打包
• 部署适配：Next.js Standalone + Docker / Vercel / EdgeOne / Cloudflare Workers，覆盖主流部署场景

项目使用 Biome 做代码格式化和 linting，Vitest 做单元测试，Playwright 做端到端测试，质量保障体系完整。文档结构清晰（/docs/en/、/docs/cn/、/docs/ja/），体现了国际化意识。

上手体验：门槛低，但上限高

对普通用户而言，体验路径非常平滑：打开 Live Demo → 粘贴 API Key（可选）→ 开始画图，全程不需要任何技术背景。但如果你是开发者，想把 MCP Server 接入自己的 AI 工作流，就需要了解 MCP 协议和 npx 调用方式——有一定学习成本，但文档写得清楚，上手不难。

需要注意的是：生成高质量图表对模型能力要求较高。项目明确推荐 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 等旗舰模型。用小模型（如 GPT-3.5）生成复杂图表时，draw.io XML 的格式错误率会明显上升。

局限与挑战

1. draw.io XML 生成的质量依赖模型能力

draw.io XML 是一种结构化格式，对模型的格式遵循能力要求很高。模型稍有幻觉，生成的 XML 就可能无法正确渲染。目前这个问题只能通过选择更强的模型来缓解。

2. 云端部署依赖外部 Draw.io 服务

在 Vercel/EdgeOne 部署时，draw.io 编辑器需要调用 embed.diagrams.net，这是一个第三方服务。虽然 diagrams.net 本身非常稳定，但这意味着你的应用并非完全自托管。

3. 复杂图表仍有局限性

对于需要精确像素级布局或大量自定义样式的图表，当前 AI 生成的结果仍难以完全替代手工绘制。AI 更擅长生成结构清晰、逻辑分明的流程图和架构图，对艺术性或精密工程图的帮助有限。

行业意义：图表生成正在成为 AI 应用的标配

Next AI Draw.io 的崛起，折射出一个更大的趋势：AI 生成的可视化输出正在从图片进化为可编辑的结构化文档。过去的 AI 画图工具（如 DALL-E、Midjourney）生成的是像素图，无法二次编辑；而 draw.io XML 是纯文本格式，AI 生成的结果可以直接在专业工具中编辑、分享、复用。

MCP Server 的加入则进一步打开了想象空间：当 AI Agent 能直接调用图表生成工具时，「边写代码边自动生成架构图」将成为常态。这对技术文档撰写、方案评审、教学演示等场景都有直接的效率提升价值。

目前 Stars 接近 3 万、增长势头强劲、社区活跃度高，预计会持续迭代。可以关注的方向包括：更多图表模板、内置版本对比、更强的多模态理解能力，以及与企业知识库的深度集成。