AI 在 draw.io 画布上画图，改一个字不用重新生成

让 AI 画图，拿到的多半是一张图片。

字写错了没法双击改，位置不合意只能换个说法再生成一张。新的一张和上一张没有关系，上次手动补上的那块也回不来，所以每次改都像重画。

Next AI Draw.io 让模型直接写 draw.io 的 XML。其实画布就是 draw.io 自己的编辑器，项目里自带了一份，外面套的是聊天框、版本和文件读写。哪个框都能挪，哪条线都能重新接，AI 改过的和你手拖过的，是同一份文件。

2025 年 3 月建库，现在 3.6 万 Star，Apache 2.0，作者 DayuanJiang。网页版、桌面版和 MCP server 三条线都在更新。

模型写 XML，画布是真的

模型交给画布的是几个 mxCell 片段，图在底层长这样：

<mxCell id="5" value="订单服务" style="rounded=1;"
        x="40" y="40" w="120" h="60"/>
<mxCell id="7" value="库存服务" style="rounded=1;"
        x="240" y="40" w="120" h="60"/>
<mxCell id="9" source="5" target="7"
        style="exitX=1;exitY=0.5;entryX=0;entryY=0.5;"/>

这是压缩写法，坐标和宽高直接写在标签上。<mxfile> 外壳、根节点、vertex、<mxGeometry> 这些样板都由程序补。

改图的时候不重画整张。程序给它三条操作：换掉一个 id 对应的图形，加一个新 id，删掉某个 id（子元素和连着的线一起删）。「把登录框往左挪 50 像素」落到的是具体的 x 坐标。

模型一次写完一张图，因为输出长度有上限，节点多的图会被截断。项目为此留了一个续写工具：截断之后，模型从断掉的地方接着发，画布拼起来。

你手拖过框、双击改过字之后，下一次发消息，程序会把当前画布一起带上；这次没动，就不重复传。

排版比写 XML 难得多

框不能叠，线不能穿框，两条线不能走同一条路，标签不能压住别的形状。

这些规则写进了系统提示：所有元素要落在 x 0 到 800、y 0 到 600 这一页里；每条连线的出入口坐标必须显式写出来，两条线连同一对框，一条从框高 0.3 的位置出，另一条从 0.7；不允许从角上进出；中间有框挡路就加拐点绕，一个拐弯一个点。字号也有估算：每个拉丁字母 8 像素，每个汉字 15 像素，再加 20 像素余量。

中文字符宽度算不准的时候，框窄一点，最后一个字就掉到第二行。

图渲染出来之后，程序截一张 PNG 交给视觉模型，看有没有框叠在一起、线穿过别的框、文字溢出形状。单个字被挤到第二行也算问题。有严重问题就把描述发回去重画，最多三次，但可以用环境变量关掉。

为什么是 800×600 而不是别的尺寸，这块我没搞懂，也没找到解释。

写清楚这几件事，出来的图会好很多：分几层、从哪流向哪、哪里有分支。框的名字直接给，别让它替你起。

判断的分支也要写。系统提示里要求一个判断引出的两条线标签必须不一样，每条都要落到一个具体结果上；你没说结果，它会自己挑一个补上，并在回复里说明这是假设。

「画一个订单系统的架构：用户 App 进来先过 API 网关，网关把下单请求给订单服务、库存查询给库存服务，订单再调支付服务，支付走外部渠道，失败要回到订单重试；订单事件进消息队列，再发给通知服务；库存扣减落 PostgreSQL，网关前面挂一个 Redis 做限流」

按这句画出来是这样。

每次改动留一张卡

AI 每提交一次改动，程序对比前后的 XML，算出加了几个形状、删了几条线、改了几个图形，然后在画布上把这些元素描成金橙色，停 3 秒；聊天里同时生成一张版本卡，带缩略图，写一句「改了 1 个图形」。

版本卡可以跟当前画布对比，也可以恢复到这一版、直接撤销这次改动。在画布上按一次 Ctrl+Z，撤的也是 AI 这一步。

这些地方会劝退你

图被限制在一页 800×600 里，节点一多就挤。

模型要够强。小模型画出来的图容易坏，本地跑要 32B 以上，服务端还得开 tool call，vLLM 要加 --enable-auto-tool-choice。

不过默认样式很朴素，想把配色和排版做细，还得人来。

系统提示里专门有一条：移动形状时要同步改连线的端点。

图层、模板、表格这些，还是得在画布上自己来。

它还能接什么

AWS、Azure、GCP、Kubernetes 这些图标库里都有，用之前模型会先查一遍名字。

截图、草图、PDF、代码都能丢给它，让它照着画。如果你手上有已经画好的 .drawio，也能直接打开接着改。

画布上选中几个框再说「这几个换成蓝色」，它只动这几个。我改过一个框的文字，它只动了那一个 id，周围的框一个没挪。

导出 .drawio、.png、.svg，还有一种 .drawio.svg，SVG 里带着可编辑的数据。

接了 25 家模型供应商，OpenAI、Anthropic、Gemini、DeepSeek 都在，也能填任意 OpenAI 兼容的地址。

官网有一页图库，二十多张图，每张都附了当时的提示词和模型。同一句提示词画两次，位置和走线也不一样。

装起来

网页版打开就能试。示例按钮是存好的回答，不调 AI；要自己描述、真画一张，先在设置里填模型和 key。

自己部署的话，clone 下来 npm install、npm run dev，开在 6002 端口；Docker、Vercel、Cloudflare 都有指引，内网离线有单独的部署文档。桌面版在 Releases 页面下安装包，自带一份 draw.io。团队用就部署一份，配个访问码，模型和额度在 /admin 里管。

MCP 是让 agent 调用外部工具的协议，Claude Code、Cursor、VS Code 都能接。装进 Claude Code 只要一行命令：

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

Cursor、VS Code、Codex 的配置在文档里。装上之后，你在 agent 里说「读这个仓库，画一张架构图」，它自己翻代码，然后在浏览器里开一块画布，边画边出现。

有个坑：接着上次的图画之前，得先让它读一遍当前画布，不然工具会拒绝。我碰到过一次，理由是我还没看过这张图。

我数了一下，它给 agent 的工具一共 16 个，常用的有读当前 XML、读你选中的形状、截图、导出、加一页、恢复版本。每次改动自动存进 ~/.next-ai-drawio/，留最近 20 个版本、50 张图。

我把这套 MCP 装在本机画过几张，上面那张订单系统就是其中之一。框的位置和连线由模型给出，画布、版本卡和导出由这个项目提供。导出成 PNG 看过，两倍尺寸，放大也不糊。

谁该用，谁别碰

每周要交架构图、流程图的技术人，手上已经有 draw.io 的习惯，缺的是把描述变成第一版的速度。写方案、写周报的产品也合适，导出的 .drawio 和 .drawio.svg 别人能直接打开改。

只要一张插图的人别试，AI 排出来的图在视觉上就是普通 draw.io 的水平，要精美的配图还是得找设计师。

那你为什么不直接用 draw.io 自带的 Generate？

它也有这个功能，在编辑器里打开 Arrange > Insert > Generate，选免费的托管模型或填自己的 key，也能改动图、页面或选中的图形。这个项目多出来的是版本卡和恢复、25 家供应商放在一处管、可以自己部署，还有 MCP。

GitHub：https://github.com/DayuanJiang/next-ai-draw-io
在线试用：https://next-ai-drawio.jiang.jp/

这篇讲的项目在这：next-ai-draw-io · 仓库

这篇同期刊在我的公众号 Jim Gadget。回「我认可的」