Skip to main content

drawio-mcp

· 5 min read

Draw.io MCP 三种方案横评，方式 3 是唯一支持协作画图的解。

  1. 方式 1（官方 drawio-mcp）：走 jgraph/drawio-mcp 远程生成，每次都是新文件，原图没法覆盖。
  2. 方式 2（官方 Plugin + Desktop）：能本地覆盖原文件，但 不支持实时编辑，要手动 reload。
  3. 方式 3（推荐，next-ai-draw-io）：本地起 localhost，真正支持实时编辑，Agent 改一步你能立刻看到。
  4. 结论：想让 Agent 协作式画图，方式 3 是目前唯一解。

官方 drawio-mcp 的三个致命缺陷​

方式 1（jgraph/drawio-mcp）是最先被引到中文社区的方案。

2aXUW9

但实际用下来有三个绕不过去的坑。

第一，必须在 app.diagrams.net 里打开。 这个官方版本的实现思路是把生成好的 XML 直接 POST 到 draw.io 的服务器，让服务器渲染并打开。你看到的图是在 draw.io 自己的浏览器里，不是你本地的桌面客户端。两个后果：

  • 文件需要上传到 draw.io 的云端
  • 本地桌面版完全用不上

第二，新图不是修改而是新建。 MCP 工具每次返回的都是一张独立的图，命名一般是 Untitled.xml。即使调用时传了原文件路径，draw.io 也是 另存为一个新文件，原图原封不动。

这意味着你想让 Agent 在已有的图上迭代修改——"把 Kafka 换成 Pulsar"、"再加一个 Redis 节点"——它做不到，只能在旁边新画一张。对于架构图这种 需要反复调整 的场景，这个限制是致命的。

第三，URL 长度限制。 方式 1 把 XML 编码后塞进 URL 里，再让浏览器打开 app.diagrams.net?url=...。虽然 Draw.io 内部做了压缩，但浏览器对 URL 长度有上限（Chrome 大约 2MB，Safari 更短）。让 AI 画一张 500 个节点的超复杂微服务架构图，压缩后的 URL 仍然可能 超出限制导致截断或打不开。这个限制不是靠"换个浏览器"能绕过去的，是协议本身的天花板。

官方 Plugin 方案：能覆盖但脱节​

方式 2 还是 jgraph 官方出的：Draw.io Plugin + Claude Code Plugin。

这条路线的思路变了：MCP 只负责 生成或修改 XML 文件，由 Draw.io Desktop 自动检测文件变化并刷新。具体流程：

  1. Claude 调 MCP 工具，往指定目录写一个 diagram.drawio 文件
  2. Draw.io Desktop 检测到文件变化
  3. 手动点一下 "Update" 让 Draw.io 同步最新的修改

覆盖问题解决了——文件是真正的覆盖，命名也是你指定的。但实时性丢了：Agent 改一步，你要手动点一次 Reload 才能看到效果。改个三五步还行，改十步以上就开始烦。

更麻烦的是：很难判断 Agent 什么时候改完了。它不会主动告诉你"我刚把 Kafka 换成了 Pulsar"，你得自己盯着 Draw.io 看图变了没有。

next-ai-draw-io：本地 + 实时​

方式 3（DayuanJiang/next-ai-draw-io）是社区方案。

BcZ91h

MCP 配置：

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

但设计上正好解决了前两者的痛点：

  • MCP 会自动再本地起一个 localhost 服务，不依赖 draw.io 的云，直接通过浏览器访问
  • Agent 修改 XML 后，浏览器本地端口的 Draw.io 自动重载（不需要手动 Update）

这是唯一支持"Agent 改一步你看一步"工作流的方案。

实际使用时的协作模式：

  1. 你先在 Draw.io 里画好基础架构
  2. 让 Agent 接入同一个文件（同一个路径）
  3. 你在 Draw.io 里 手动调整布局（Agent 生成的布局经常很丑）
  4. Agent 补充内容、改节点、加连线
  5. 你再手动调布局

这是个 双向的实时协作——不是 你干等 Agent 出图，也不是 Agent 干等你手动确认。Agent 在改的时候你能看到 Draw.io 高亮新加入的节点。

选哪个：场景决定​

场景推荐方案
一次性出图、不在意位置方式 1（最省事）
已有图、能忍手动 reload方式 2
真正想和 Agent 协作画图方式 3

架构图、流程图这类 需要反复调整布局 的图，方式 3 是唯一选择。方式 1 和方式 2 本质上还是"Agent 一次性出图 + 你人工接手"的工作流，不是协作。

References​

  1. next-ai-draw-io —— DayuanJiang, 2025
  2. drawio-mcp 官方 repo —— jgraph, 2025
  3. Draw.io MCP 介绍文章 —— 微信公众号
Tags:
Last updated on by Kimi Gao