我把 draw.io 接进了 AI 助手：drawio-mcp 实操手册

最近我在整理一套 AI 辅助画图的工作流。

以前最常见的流程是：我让 AI 先写 Mermaid，再复制到预览工具里看效果，最后如果要正式交付，还得再搬到 draw.io 里调样式。能用，但来回切换太多。

这次我试了一下 draw.io 官方的 MCP 项目：jgraph/drawio-mcp^[1]。它的思路很直接：让支持 MCP 的 AI 客户端直接调用 draw.io，把流程图、时序图、架构图这些内容打开到 diagrams.net 编辑器里。

我把下载、配置、案例和注意事项都跑了一遍，整理成这篇实操记录。

我为什么会需要它

我不是想再多装一个画图工具。draw.io 本来就是很多团队都在用的东西，真正麻烦的是“AI 生成图”和“draw.io 继续编辑”之间那一步。

drawio-mcp 刚好补上这个缝：

• 我可以让 AI 生成流程图、时序图、架构图；
• AI 通过 MCP 调用 draw.io 工具；
• 浏览器直接打开 diagrams.net；
• 后续我还能继续手动调整、保存、导出。

对我来说，这比“只输出一段 Mermaid 文本”顺手很多。

官方提供了四种玩法

官方仓库里其实不止一种方案：

我这次主要用 MCP Tool Server。原因很简单：配置最少，支持 XML、CSV、Mermaid，而且桌面 MCP 客户端基本都能接。

第一步：检查环境

我本机是 Windows + PowerShell。需要准备这些：

• Git
• Node.js 18+
• npm / npx
• 一个支持 MCP 的客户端，比如 Claude Desktop 或 Claude Code

我本地版本是：

node --version
# v22.20.0

npm --version
# 11.9.0

第二步：下载仓库

我把源码放在自己的项目目录里：

cd D:\code\ai_codex_project\ai_video
git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp

其实日常使用不一定要克隆仓库。最省事的方式是直接运行 npm 包：

npx -y @drawio/mcp

第三步：配置 MCP 客户端

如果是 Claude Desktop，Windows 配置文件一般在：

%APPDATA%\Claude\claude_desktop_config.json

我会加入这段配置：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}

保存后重启客户端。

如果用 Claude Code，可以直接执行：

claude mcp add drawio -- npx -y @drawio/mcp

它提供了三个核心工具

MCP Tool Server 主要暴露三个工具。

1. open_drawio_mermaid

这是我最常用的。

流程图、时序图、类图、状态图、ER 图，优先用它。Mermaid 负责表达结构，draw.io 负责打开和后续编辑。

2. open_drawio_csv

如果内容本来就是表格，比如组织结构、上下级关系、批量节点关系，可以考虑 CSV。

3. open_drawio_xml

如果我需要控制样式、坐标、容器、图层，或者要用 draw.io 原生形状库，就会用 XML。

我的选择规则很简单：

• 快速画标准图：Mermaid。
• 表格驱动的关系图：CSV。
• 需要精细控制：XML。

案例：生成一个登录流程图

我会直接这样问 AI：

请使用 open_drawio_mermaid 创建一个用户登录流程图：
用户输入账号密码 -> 前端提交请求 -> 后端校验凭证 -> 判断是否通过；
通过则签发 Token 并进入控制台，不通过则返回错误提示。

AI 应该调用 open_drawio_mermaid，传入类似这样的 Mermaid：

flowchart LR
  A[用户输入账号密码] --> B[前端提交登录请求]
  B --> C[后端校验凭证]
  C --> D{校验通过?}
  D -- 是 --> E[签发 Token]
  D -- 否 --> F[返回错误提示]
  E --> G[进入控制台]

效果大概是这样：

调用完成后，MCP server 会返回 draw.io URL。打开以后，我可以继续在 draw.io 里改颜色、调布局、导出图片或保存 .drawio 文件。

再举一个时序图例子

比如 OAuth2 授权码模式，我会这样问：

使用 open_drawio_mermaid 创建 OAuth2 授权码模式的时序图，参与者包括 User、Client App、Authorization Server、Resource Server。

Mermaid 可以长这样：

sequenceDiagram
  participant U as User
  participant C as Client App
  participant A as Authorization Server
  participant R as Resource Server

  U->>C: 点击登录
  C->>A: 跳转到授权页面
  A->>U: 请求登录与授权
  U->>A: 同意授权
  A->>C: 返回 authorization code
  C->>A: 用 code 换取 access token
  A-->>C: 返回 access token
  C->>R: 携带 token 请求资源
  R-->>C: 返回受保护资源

这种图不需要手写坐标，Mermaid 足够清楚。

我会注意的数据安全问题

官方 README 里有一段数据流向说明，我觉得值得单独拎出来。

如果用 hosted MCP App Server，也就是 https://mcp.draw.io/mcp，图表内容会发送到 draw.io 的 MCP 服务端。

如果用 @drawio/mcp 这个 MCP Tool Server，图表数据会放在 URL fragment 里。正常情况下，浏览器不会把 fragment 发送给服务器。

但有个细节别忽略：默认仍可能从 app.diagrams.net 或 viewer.diagrams.net 加载前端代码。如果是严格隔离环境，我会选择自托管 draw.io，并且用网络出口监控做一次验证。

我踩到的一个小坑

如果你配置完看不到工具，先别急着怀疑 MCP。

我会按这个顺序查：

1. Node.js 是否是 18+。
2. JSON 配置有没有语法错误。
3. 保存配置后有没有重启客户端。
4. 终端能不能运行 npx -y @drawio/mcp。
5. 提示词里有没有明确要求使用 open_drawio_mermaid、open_drawio_csv 或 open_drawio_xml。

我现在会直接在提示词里写：

请使用 draw.io MCP 的 open_drawio_mermaid 工具生成图表，不要只输出 Mermaid 文本。

最后给一组速查命令

# 下载源码
cd D:\code\ai_codex_project\ai_video
git clone https://github.com/jgraph/drawio-mcp.git

# 从源码运行 MCP Tool Server
cd D:\code\ai_codex_project\ai_video\drawio-mcp\mcp-tool-server
npm install
npm start

# 直接运行 npm 包
npx -y @drawio/mcp

# Claude Code 添加 MCP
claude mcp add drawio -- npx -y @drawio/mcp

我的结论

如果只是临时画个图，Mermaid 已经够用。

但如果你和我一样，最后还要把图交到 draw.io 里继续编辑、保存、发给别人，那 drawio-mcp 很值得接一下。

它不是替代 draw.io，而是把 AI 生成图表这一步接到了 draw.io 的工作流里。对我来说，这才是它最有用的地方。

引用链接