Draw.io 官方 MCP Server 配置与使用指南

如果已有其他 MCP server，把 "drawio-mcp": {...} 加到 mcpServers 对象里即可。

4. 保存文件后重启 Claude 客户端。
5. 重启后在对话输入框左下角应该能看到 MCP 工具图标（🔨），点击可确认 drawio-mcp 的 tools 是否加载成功。

注意：确保你的系统已安装 Node.js 和 npm，因为 npx 依赖它们。在 M1 Mac 上如果用 nvm 管理 Node，可能需要把 command 改为 npx 的完整路径（which npx 查看），避免 Claude 找不到命令。

2. Claude 网页端限制

Claude 网页端（claude.ai）目前不支持直接添加自定义 MCP server。MCP server 配置只支持以下客户端：

• Claude 桌面客户端 — 通过 claude_desktop_config.json
• Claude Code（CLI） — 通过 claude mcp add 命令
• Cursor / Windsurf 等第三方 IDE

如果你想在网页端使用 draw.io 功能，有两个替代方案：

1. 使用 Claude 桌面客户端：按之前的方法配置。
2. 使用 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 过长无法打开

参考资料

drawio-mcp