draw.io MCP Server

什么是 draw.io MCP Server？

draw.io MCP Server 是 draw.io 团队官方托管的 MCP App。它把 Mermaid.js 或 draw.io XML 转换为交互式图表，直接显示在 Claude.ai、ChatGPT、VS Code 和 Cursor 的对话中，无需安装，也无需登录。

draw.io（也称 diagrams.net）是 JGraph 开发的一款广泛使用的绘图工具。托管在 https://mcp.draw.io/mcp 的服务器使用 MCP Apps 扩展：当模型调用 create_diagram 时，宿主会使用官方 draw.io 查看器在沙箱 iframe 中渲染图表，支持缩放、平移、图层、全屏，并提供“Open in draw.io”按钮以继续编辑。代码以 Apache 2.0 许可证开源于 jgraph/drawio-mcp，同一个服务器也可以自托管。

如何使用 draw.io MCP Server？

把 URL 添加为远程 MCP 服务器；该服务器无需登录，因此请关闭认证。

https://mcp.draw.io/mcp

在支持 MCP Apps 的宿主中，图表会内联显示：Claude.ai、ChatGPT、带 GitHub Copilot 的 VS Code 1.109 或更高版本，以及 Cursor 2.6 或更高版本。在 Claude Code 等其他宿主中，服务器会返回一个在 draw.io 中打开图表的链接。

Claude Code

claude mcp add --transport http drawio https://mcp.draw.io/mcp

Claude Code 的终端无法内联显示图表，因此每个图表都会给出一个 app.diagrams.net 链接。

Claude Desktop 和 claude.ai

draw.io 已上架 Claude 的连接器目录，可一键添加。也可以打开 Settings → Connectors → Add custom connector 并粘贴 URL。

Cursor

根据 draw.io README，在 ~/.cursor/mcp.json 或 .cursor/mcp.json 中：

{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

VS Code

根据 draw.io README，在 .vscode/mcp.json 中：

{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

点击条目上方的 Start，然后在 Agent 模式下让 Copilot Chat 画图。

draw.io MCP Server 的主要功能

• draw.io 团队的官方服务器，托管在 mcp.draw.io，无需账号。
• 在 MCP Apps 宿主中内联显示交互式图表，支持缩放、平移、图层切换、灯箱和全屏。
• 接受 Mermaid（流程图、时序图、类图、状态图、ER 图、甘特图、思维导图、时间线、C4、架构图等）或原生 draw.io XML。
• Mermaid 会被原生解析和布局，然后转换为 draw.io。
• XML 图表可选用 ELK 分层布局。
• 在约 10,000 个内置图形模板（云架构、网络、Cisco、Kubernetes、BPMN、P&ID、电气）以及 draw.io 图标服务中搜索图形。
• “Open in draw.io”可交给完整编辑器继续处理。
• 开源（Apache 2.0），可通过 Node.js、Docker 或 Cloudflare Workers 自托管。

draw.io MCP Server 工具

创建图表。 create_diagram 接收 mermaid 或 xml 中的恰好一个并进行渲染。其描述要求模型对 Mermaid 有对应头部关键字的图表类型都优先使用 Mermaid，否则使用 XML。选项包括 postLayout: "elk" 以及用于 XML 布局的 direction。

参考资料。 get_drawio_reference 以 Markdown 返回 xml 或 mermaid 的生成参考。模型在每次对话中、每种格式的第一张图之前调用一次；这样可以让 create_diagram 的描述保持简短。

图形。 search_shapes 按关键字查找图形，返回精确的样式字符串、尺寸和标题。它适用于行业专用、品牌或图示类图标，而不是标准的流程图或 UML。

draw.io MCP Server 的使用场景

• 架构图：“用 AWS 图标画一个包含 ALB、两个 ECS 服务和一个 RDS 数据库的 AWS 架构图。”
• 解释代码：“画一张时序图，说明登录请求如何在这些服务之间流转。”
• 数据建模：“为这三张表创建 ER 图。”
• 计划：“把这个项目计划转换成甘特图。”
• 网络图：“用 Cisco 图形画出这个办公网络。”
• 头脑风暴：“为我们的产品发布画一张创意思维导图。”

draw.io MCP Server 与替代方案对比

draw.io 还发布了一个 stdio 工具服务器 @drawio/mcp（npx -y @drawio/mcp），它会在浏览器中用完整的 draw.io 编辑器打开图表，而不是内联渲染。在不支持 MCP Apps 的宿主中，或者你更喜欢浏览器编辑器时，可以使用它。另外还有一个社区项目 Draw.io MCP server，工作方式不同，并非由 draw.io 团队开发。

draw.io MCP Server 常见问题排查

• 图表显示为链接而不是内联。 你的宿主不支持 MCP Apps（例如 Claude Code 或较旧的 Cursor 版本）。打开链接，或使用支持的宿主。
• Cursor 中没有可渲染的内容。 内联渲染需要 Cursor 2.6 或更高版本；旧版本请使用 stdio 的 @drawio/mcp 服务器。
• 模型传入的参数格式不对。 请以纯字符串提供 xml 或 mermaid 中的恰好一个，而不是对象或数组。
• 图表不能离开你的网络。 使用托管端点时，图表会发送到 draw.io 的服务器；如果数据必须留在内部，请自托管 MCP App 服务器。