写技术方案，最磨人的往往不是方案本身，而是那张架构图。打开 draw.io，拖框、对齐、连线、调配色，一个十几个服务的系统图，半小时起步；需求一改，还得再拖一遍。

让 AI 直接出图是个思路，但生图模型交出来的是一张 PNG：某个框的字写错了、箭头连反了，你没法点进去改，只能换个说法重新生成，还不一定保证别处不变。

next-ai-draw-io 走的是另一条路。你照样用一句话描述想要的图，但 AI 不画像素，它写 draw.io 的 XML。生成的结果就是一张标准的 draw.io 图，每个框、每根线都能拖、能改，也能导出成 .drawio 文件接着用。它还带了一个 MCP 服务，Claude Code 里一行命令就能接上，写代码的 AI 顺手把架构图画了。

它画的不是图片，是一份 XML

先把原理讲清楚，后面几个坑都和它有关。draw.io 的图本质上是一份 XML，每个框、每根线都是一个 mxCell 元素，带着自己的 id、文字、样式和坐标。一个圆角框大概长这样：

<mxCell id="2" value="API Gateway" style="rounded=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

next-ai-draw-io 让大模型直接输出这些 mxCell，再交给页面里嵌着的 draw.io 编辑器渲染。图纸是结构化的，画完你可以手动接着改，你改过的地方，AI 下一轮也能读到。MCP 版本里，你在浏览器里选中几个图形再说“把这几个改成蓝色”，AI 会通过 get_selection 读到你选的是哪几个。

对比一下就清楚了：生图工具给你的东西只能收下或者重来，这里给你的是一份源文件。

Claude Code 里怎么接上

项目单独发布了一个 MCP 服务包。Claude Code 里这样装：

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

--scope user 的作用是让所有项目都能用；不加的话，只在你执行命令的那个目录里有效。较新版本的 Claude Code 也可以从社区插件市场装，官方 README 给的命令是：

/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community

Codex CLI 也能接：

codex mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

要注意的是，Codex 会在每次调用会修改图表的工具前询问你，codex exec 在没有完整权限时还会报 “MCP tool call requires approval”。想让 drawio 的工具免确认，可以在 ~/.codex/config.toml 里给这个服务加一行 default_tools_approval_mode = "approve"；只想放行部分工具，就改用 [mcp_servers.drawio.tools.<工具名>] 并写 approval_mode = "approve"。放行范围越小越稳妥，想了解 Codex 里 MCP 工具的权限边界，可以先看这篇：Codex Hooks，异步执行与 MCP 工具接入的权限边界。

Cursor、VS Code、Claude Desktop、Cline 的配置是同一段 JSON，写进各自的 MCP 配置文件即可：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

装完重启客户端，直接说要画什么，比如“读一下这个仓库，画出它的架构”。浏览器会弹出一个 draw.io 页面，图一边生成一边出现在画布上。

这个 MCP 服务自带服务器：它和 Claude Code 之间走 stdio，自己再在 127.0.0.1 上起一个 HTTP 服务，默认端口 6002，被占用会自动往后找，最多到 6020，浏览器页面靠轮询拿最新的图。draw.io 编辑器本身也打包在服务里，所以不需要额外搭环境，离线也能用。

常用工具和最实用的一招

按官方 README，这个服务暴露的工具大致分几类：

类别	工具	作用
会话	start_session	打开预览并返回绘图规则；报 “No active session” 就是这一步没先跑
绘制	create_new_diagram、edit_diagram	用 mxCell XML 新建；按 cell id 增、改、删，整批成功或整批失败
读取	get_diagram、get_selection、screenshot_diagram	读当前 XML（含你的手动修改）、读你选中的图形、截图让 AI 自查重叠
文件	load_diagram、export_diagram	打开现成的 .drawio 文件；导出 .drawio、.png、.svg
版本	restore_version、list_saved_diagrams	回到早先版本；找回之前会话保存的图
图标与规则	get_drawing_guide、get_shape_library	查绘图规则，以及 aws4 这类图标库的样式
多页	list_pages、add_page、rename_page、delete_page	管理多页图表

我觉得最实用的是 load_diagram。很多仓库里本来就躺着一份 architecture.drawio，可以让 Claude Code 先把它读进来，再对照刚改完的代码把图更新一遍，最后导出覆盖回去。代码和架构图总是对不上这个老毛病，终于有了省事的解法。

edit_diagram 也值得一提：它按 id 下指令，只有新增、更新、删除三种操作，不用让模型重新输出一整份 XML。删除一个元素时，容器里的子元素和连在它身上的线会一起被清掉。比如让它把数据库从 MySQL 换成 PostgreSQL，它只改那一个框，布局、配色、其他连线都不动。

改坏了也有退路：画布旁边会保留最近 20 个版本的卡片，可以恢复或对比；AI 的改动会被框出来几秒，Ctrl+Z 一下就能撤销。每次修改还会保存到 ~/.next-ai-drawio/ 目录，最近 50 张图会保留，下次对话可以让 AI 通过 list_saved_diagrams 找回来继续画。

不想碰命令行的三种用法

MCP 适合已经在用 Claude Code、Cursor 的人。偶尔画一张的话，有更轻的办法：

在线 Demo：官方站点直接能用，额度有限，不够就在设置里填自己的 API Key，官方说明 key 只存在浏览器本地。
桌面版：Releases 页面有 Windows、macOS、Linux 安装包。
Docker 自部署：一条命令起服务，模型名按你账号里可用的填：

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=your_model_name \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

网页版比 MCP 多几样本事：上传一张现成的图让 AI 照着复刻，丢进 PDF 或文本让它从文档里提炼出图，用推理模型时还能看到它的思考过程。模型接入也很全，官方文档列出了二十多个服务商，OpenAI、Anthropic、Google、Azure、AWS Bedrock、DeepSeek、Ollama、OpenRouter 都在其中。

给团队部署的，设置 ADMIN_PASSWORD 环境变量后访问 /admin，就能在网页上改模型、访问码和配额，不用手动编辑 .env。

模型选不对，它只会想不会画

这是最容易翻车的地方。画一张图，模型得一口气输出一大段格式严格的 XML，漏一个引号、嵌套错一个 mxCell，整张图就出不来。官方对模型的要求写得很直白：需要很强的长文本和严格格式输出能力，具体推荐哪些模型以官方文档当时的列表为准。选当期的旗舰模型，比省钱更划算。

如果你用本地模型，FAQ 里有一条正对着你：模型只输出思考过程、不出图。常见原因有两个，一是模型太小（官方建议 32B 以上），二是推理服务没开工具调用。以 vLLM 为例，启动时要带上：

--enable-auto-tool-choice --tool-call-parser hermes

另外几点：

输出额度别设得太小。推理和 XML 共用同一份额度，思考型模型想太久，可能还没开始画就用完了。
传图复刻需要视觉模型。用纯文本模型传图，会报 No image provided。
画云架构图优先选 Claude 系列。官方的说法是它在带 AWS、Azure、GCP 图标的 draw.io 图上表现更好；项目还给模型配了查图标库的能力，aws4、azure2、gcp2、kubernetes、cisco19 这些自带图形库都能查。

一句话：简单流程图什么模型都行，复杂架构图别省模型钱。如果你想先弄清 MCP 在 AI 编程工具里的位置，可以对照这篇：ACP 与 MCP 怎么选，编辑器接入 AI 编程 Agent 的两种协议对比。

几个容易踩的坑

导不出 PDF。 嵌入式 draw.io 不支持直接导出 PDF，办法是在 draw.io 菜单里走“打印”，再另存为 PDF；也可以先导 PNG 或 SVG 再处理。

内网能不能用。 早期版本的网页端会从 embed.diagrams.net 加载编辑器，内网访问不到就打不开。较新的版本（官方说明自 v0.5.0 起）打包的 Docker 镜像已经自带 draw.io，内网和离线都能用，不必再单独搭一个。MCP 服务同样自带编辑器。如果你坚持用自己的 draw.io，MCP 里可以用 DRAWIO_BASE_URL 指过去，代价是 AI 改动的高亮、Ctrl+Z 撤销和 get_selection 都会失效，只能靠版本卡片回退。

管理面板的密钥是明文存的。 /admin 里填的 API Key 写进 data/settings.json，文件权限 600，但内容不加密。在 Linux 上用 Docker 挂载 data 目录时，要把目录属主改成容器内用户，官方给的是 chown 1001:1001 data。Vercel、Cloudflare Workers 这类没有持久磁盘的平台上，管理面板是只读的，只能靠环境变量配置。

预览页空白。 在 VS Code 的 Simple Browser 或 Cursor 自带浏览器里预览会空白，因为页面不允许被嵌入，用普通浏览器打开 start_session 返回的地址即可。

总结

next-ai-draw-io 的思路很朴素：不和生图模型比谁画得好看，而是让 AI 交出一份 draw.io 认得的源文件。图画完不是终点，每个框都还能拖、能改，改坏了还能翻版本。

它最顺手的用法，是装进 Claude Code，让它读完代码直接出图，再用 load_diagram 把仓库里那份旧图维护起来。代价也要心里有数：它很吃模型，本地小模型基本只会想不会画；这张图该怎么分层，也还是要你自己先想好。MCP 是客户端侧的能力，和你通过什么渠道接入 Claude Code 无关，用 AIGoCode 接入的 Claude Code 同样可以按上面的步骤配置。

参考链接

next-ai-draw-io GitHub：https://github.com/DayuanJiang/next-ai-draw-io
MCP 服务说明：https://github.com/DayuanJiang/next-ai-draw-io/blob/main/packages/mcp-server/README.md
在线 Demo：https://next-ai-drawio.jiang.jp/