最近绘图神器 draw.io 发布了官方 MCP Server。真是喜大普奔（喜闻乐见、大快人心、普天同庆、奔走相告）。
我们现在可以在 Cursor、Claude Desktop 等支持 MCP 的编辑器里让 draw.io 帮忙画图，画完后，它会直接弹出网页编辑器，我们可以基于已绘制的图进行再次编辑，体验非常酷。
接下来我们一起看看怎么使用它。
安装与配置
一、在 Cursor 中配置 MCP server：
打开 Cursor，进入 Settings → Cursor Settings → MCP（或直接 Cmd + Shift + J）
点击 + Add new global MCP server，这会打开配置文件 ~/.cursor/mcp.json
填入：
{
"mcpServers": {
"drawio-mcp": {
"command": "npx",
"args": ["-y", "@drawio/mcp"]
}
}
}
提示：如果状态显示红色/失败，可以点旁边的刷新按钮重试。同样注意 npx 路径问题，必要时用完整路径替代。
二、在 Claude 添加 drawio-mcp
1）、在 Claude Mac 客户端中添加 MCP server 的步骤：
打开 Claude 桌面客户端，点击菜单栏 Claude → Settings → Developer → Edit Config
这会打开配置文件 claude_desktop_config.json，路径通常是： ~/Library/Application Support/Claude/claude_desktop_config.json
在文件中添加：
{
"mcpServers": {
"drawio-mcp": {
"command": "npx",
"args": ["-y", "@drawio/mcp"]
}
}
}
如果已有其他 MCP server，把 "drawio-mcp": {…} 加到 mcpServers 对象里即可。
保存文件后重启 Claude 客户端。
重启后在对话输入框左下角应该能看到 MCP 工具图标（🔨），点击可确认 drawio-mcp 的 tools 是否加载成功。
注意：确保你的系统已安装 Node.js 和 npm，因为 npx 依赖它们。在 M1 Mac 上如果用 nvm 管理 Node，可能需要把 command 改为 npx 的完整路径（which npx 查看），避免 Claude 找不到命令。
2）、Claude 网页端（claude.ai）目前不支持直接添加自定义 MCP server。
MCP server 配置只支持以下客户端：
- Claude 桌面客户端 — 通过 claude_desktop_config.json
- Claude Code（CLI）— 通过 claude mcp add 命令
- Cursor / Windsurf 等第三方 IDE
如果你想在网页端使用 draw.io 功能，有两个替代方案：
使用 Claude 桌面客户端：按之前的方法配置。
使用 Claude in Chrome 扩展：集成 drawio-mcp 工具，让扩展生成 draw.io 图表。比如告诉扩展你想画什么图，扩展可以直接调用 open_drawio_mermaid 或 open_drawio_xml 来生成。
实战：画一个 SSO 时序图
在 Cursor 或者 Claude 客户端中向 AI 发出命令：
使用 draw.io MCP 工具 open_drawio_mermaid 制作展示 SSO 流程的时序图
生成后，可以保存文档到 Google Drive。这样方便后续随时再次编辑。再也不用担心找不到历史编辑文件了。
draw.io MCP Server 技术原理与限制
核心功能与流程
- draw.io MCP 工具将 AI 生成的 Mermaid/CSV/XML 逻辑转成 draw.io 专用链接，从而实现快速绘图
- 绘图流程为用户发指令→AI生成结构化数据→工具压缩编码→浏览器打开可编辑 draw.io 页面
支持的核心转换模式
- Mermaid 转图（open_drawio_mermaid）：AI 写 Mermaid逻辑，draw.io 渲染编辑
- CSV 转图（open_drawio_csv）：适合组织架构等树状图，AI 处理人员关系生成
- XML原生格式（open_drawio_xml）：支持现成 draw.io XML 或AI 生成复杂图表
技术原理与限制
- 实现原理为生成带压缩编码数据的 URL，本地浏览器解析，隐私性好
- 存在 URL 长度限制，超复杂图表可能因 URL 过长无法打开
小结
draw.io 发布官方 MCP Server，支持在 Cursor、Claude 等编辑器中通过 AI 生成可编辑图表，覆盖 Mermaid/CSV/XML 模式，虽然存在 URL 长度限制但隐私性好，体现传统工具拥抱 AI Agent 生态的大趋势。
工欲善其事，必先利其器。 技术人员很有必要折腾一下这个工具。 花点时间把这个工具配置好了，一次配置，接下来的所有时间里都可以使用这个得心应手的好工具了。
尤其是经常绘各种图的架构师同学们，有了这个，简直不能再爽！
AI 时代已经到来，必须拥抱 AI！ 个人，无论技术能力有多强，已经很难与 AI 的效率相比。必须充分利用 AI，让 AI 更多地为我们做事。这样才能如虎添翼。
参考：
2026.02.14 18:34 沪 · 汇金路KFC
