适合谁
- 希望在聊天中直接预览内嵌图表、无需切换窗口的用户
- 在 Claude.ai 或 Cursor 中协作构思架构图或流程图的团队
- 可以接受使用官方托管 mcp.draw.io 端点的用户
D
68FMRS · C
官方 draw.io MCP App Server,通过托管的 mcp.draw.io 端点在聊天中内嵌渲染可交互图表,提供 create_diagram 与 search_shapes 两个工具,无需安装但默认会将图表数据发往云端,可自托管以满足数据合规需求。
draw.io MCP App Server 是 draw.io 官方提供的 MCP 服务器,通过 MCP Apps 协议将图表以可交互的内嵌 iframe 形式直接渲染在聊天对话中,无需跳转浏览器。官方托管地址为 https://mcp.draw.io/mcp,可直接作为远程 MCP 服务器添加到 Claude.ai、Cursor 或任何支持 MCP Apps 的客户端,无需安装;也可以通过 Node.js 本地运行或部署到 Cloudflare Workers 自托管。服务器提供两个工具:create_diagram 用于将 draw.io XML 渲染为聊天内的交互式图表,search_shapes 用于在超过 10,000 个 draw.io 形状库(AWS、Azure、GCP、P&ID、电气、Cisco、Kubernetes、UML、BPMN 等)中按关键词搜索,并在内置库无合适匹配时补充调用 draw.io 图标服务,返回可直接用于 XML 的精确样式字符串。
工具能力
create_diagram
将 draw.io XML 渲染为聊天中可交互的内嵌图表
search_shapes
在 draw.io 全部形状库中按关键词搜索,返回可直接用于 XML 的精确样式字符串
安装接入
在 Claude.ai、Cursor 或其他支持 MCP Apps 的客户端设置中,将 https://mcp.draw.io/mcp 添加为远程 MCP 服务器 URL 即可使用,无需安装。若需自托管,可克隆仓库后执行 cd mcp-app-server && npm install && npm start 在本地运行,或部署到 Cloudflare Workers;自托管时可通过 VIEWER_PATH 环境变量将查看器代码内联,减少对 viewer.diagrams.net 的外部请求。
claude_desktop_config.json
{"mcpServers": {"drawio": {"url": "https://mcp.draw.io/mcp"}}}
选型与风险
不适合谁
- 需要本地 .drawio 文件、PNG/SVG/PDF 导出或 Mermaid/CSV 输入的用户(应使用 MCP Tool Server 或 Assistant Plugins)
- 对数据合规有严格要求、不能将图表 XML 发送到托管 mcp.draw.io 端点的环境(需自托管)
- 使用不支持 MCP Apps 扩展的 MCP 客户端的用户(此时图表只能以文本形式返回)
所需权限
- 除非自托管,否则会将图表 XML 数据发送到官方托管的 mcp.draw.io 端点
- 默认会从 app.diagrams.net / viewer.diagrams.net 加载 draw.io 查看器应用代码
- 作为托管远程服务器使用时,不需要访问本地文件系统或系统资源
风险与副作用
- 使用默认 mcp.draw.io 端点时,图表内容会被发送到 draw.io 的托管服务器
- 除非构建时设置 VIEWER_PATH,否则会默认向 app.diagrams.net/viewer.diagrams.net 发起加载查看器代码的外部请求
- 内嵌渲染依赖客户端支持 MCP Apps 扩展,否则只会返回原始 XML 文本而非可视化图表
常见排障
- 若图表未内嵌渲染,请确认所用客户端是否支持 MCP Apps 扩展
- Cursor 版本低于 2.6 时,请改用基于 stdio 的 @drawio/mcp Tool Server
- 对数据驻留要求严格的场景,建议通过 Node.js 或 Cloudflare Workers 自托管,而非使用官方托管端点
- 在调用 create_diagram 之前先使用 search_shapes 获取正确的形状样式字符串
使用场景
在对话过程中直接勾画架构图
内嵌可视化流程图、UML、网络拓扑图和 BPMN 图
搜索并插入样式正确的形状(如 AWS、Azure、GCP、Cisco、Kubernetes 图标等)到图表中
支持客户端
Claude.ai完整支持
Cursor完整支持
VS Code部分支持