夜雨聆风今年年初我分享过 Next AI Draw.io 这个工具。当时它还是一个独立的 Web 界面，打开网页，输入自然语言，生成 draw.io 格式的流程图。
当前这个项目做了一次关键升级，加入了 MCP Server。你在 Claude Code 或 Cursor 里写代码时，直接说"帮我画一下这个系统的架构图"，图就实时出现在浏览器里。不用切窗口，不用复制粘贴，coding agent 自己调用画图能力。
实际用下来最大的感受是：你根本不需要再去琢磨 prompt 该怎么写效果最好。以前用独立的 AI 画图工具，你得反复调整措辞、补充细节，试图一次生成到位。
这个项目在冲上过 GitHub Trending 第一名。
我刚开始关注时，只有几千的 star，目前累计 3w 多了，看来自动绘图的需求还是非常的旺盛啊。
先说清楚它是什么
Next AI Draw.io 是一个开源的 AI 画图工具，核心能力是把自然语言转换成 draw.io 的 XML 格式。
这里有个关键区别：它生成的不是一张图片，而是可编辑的 draw.io 文件。你拿到之后可以在 draw.io 里继续拖拽、调整、修改，和你手动画的图一模一样。
技术栈是 Next.js + Vercel AI SDK + react-drawio，支持 14 个 AI 供应商，包括 OpenAI、Anthropic、Google AI、DeepSeek、Ollama 等。
Claude 系列模型在生成云架构图时效果最好，因为它在训练数据里见过大量 AWS、Azure、GCP 的 draw.io 图。
简单说，它把"AI 生成图"和"draw.io 编辑图"整合到在了一起，AI 负责起草，你负责精修打磨。
下面是他使用过程中的效果图，自动画图的感觉还是非常不错滴。
关键升级：MCP Server 让 Coding Agent 直接画图
之前的版本是一个独立界面，你得手动打开网页、手动输入描述。现在它把画图能力封装成了一个 MCP Server，任何支持 MCP 协议的 AI agent 都能直接调用。
配置极其简单，一行命令搞定：
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
或者在配置文件里加一段 JSON：
{
"mcpServers":{
"drawio":{
"command":"npx",
"args":["@next-ai-drawio/mcp-server@latest"]
}
}
}
Claude Desktop、Cursor、Codex、Cline 都能用，配置方式基本一样。
工作原理
MCP Server 内置了一个轻量 HTTP 服务器，不需要额外依赖。整个流程是这样的：
AI agent 通过 stdio 向 MCP Server 发送工具调用 MCP Server 内嵌的 HTTP 服务把图渲染到你的浏览器 浏览器通过轮询实时显示图的变化
它暴露了五个工具给 agent：
start_session —— 打开浏览器预览窗口 create_new_diagram —— 从 XML 创建新图 edit_diagram —— 对已有图做增删改 get_diagram —— 获取当前图的 XML export_diagram —— 导出为 .drawio 文件
这意味着 agent 不只是能画图，还能读图、改图。你让它分析一张已有的架构图，它能拿到 XML 理解结构，然后在上面做增删改。
除了 MCP，还有哪些能力值得注意
项目本身作为一个独立的 AI 画图工具也在持续进化。
图片转 draw.io。拍一张白板上的手绘架构图，上传进去，AI 能把它转成可编辑的 draw.io 文件。开完会不用手动重画了。
PDF 和文本文件上传。把一份技术文档扔进去，让它根据文档内容自动生成对应的架构图或流程图。
版本历史。每次 AI 修改都会留一个快照，你可以随时回退到任何一个历史版本。这对反复迭代图表很有用，不怕改坏。
云架构图原生支持。内置 AWS、GCP、Azure 的图标集，不是用通用方框凑合，是真正的云服务图标。
桌面客户端。除了 Web 版，还有 Windows、macOS、Linux 的原生桌面应用，通过 WinGet 就能安装。
这些功能组合在一起，定位很清楚：在 Mermaid 和 Lucidchart 之间。Mermaid 适合嵌入文档的简单图，Lucidchart 适合团队协作的精细图。Next AI Draw.io 适合快速出架构原型，然后再手动打磨。
案例分享
聊几个我觉得很适合用这个工具的实际场景。
案例一：把技术方案文档一键转成流程图
我让 Claude code 绘制了一下在 Claude code 中使用 Next AI Draw.io 的流程图。
我是在vscode中通过ssh连接远程的linux服务器使用的claude code。
没想到它竟然开启了一个服务，自动在我的肉机上打开了一个网页显示实时渲染结果，还是有点东西的。
案例二：会议白板拍照转可编辑架构图
我在网上随便找了一张手绘的流程图，如下面所示。
直接把它丢到 claude code 中，让它帮忙转换成 draw.io 流程图，出来的效果还是不错的。
当你发现它画的有问题时，你也可以直接让 agent 修改，只到改到满意为止。
下面是改了两版的流程图，整体没有太大的问题，一些细节可能还需要手工处理下。
我的感受
画图变成 coding agent 工作流的一部分，不用切窗口、不用重述上下文，顺手就做了。
现实问题是生成质量跟模型强相关，年前也提到过这个问题。我试过小模型，连接线乱飞，基本不能用。高质量输出依赖能力较强的模型。
即使用强模型，细节处理依然是短板。比如节点之间的间距、连接线的走向、元素在容器内的对齐，这些模型经常处理不好。
原因也好理解：模型只看到 XML 结构，它知道逻辑关系对不对，但不知道渲染出来长什么样。
感觉一个可能的优化方向是，把 XML 原始结构和当前的渲染截图同时喂给模型。
XML 告诉它"现在是什么"，截图告诉它"现在看起来怎么样"。两个信息源对齐之后，模型应该能更精准地调整布局细节，而不是盲改坐标碰运气。这个思路在代码生成领域已经有人在做了（比如给模型看 UI 截图来修 CSS），画图场景应该同样适用。
工作生活中有需要绘图的盆友，可以接入试用。
添加微信，备注“大模型交流”进入大模型交流群
