Draw.io MCP server

Draw.io MCP 服务

English · 简体中文

让我们用最广泛使用的绘图工具 Draw.io（Diagrams.net）来进行 Vibe 绘图。

主要亮点

• Claude Code 插件：运行 /plugin marketplace add lgazo/drawio-mcp-server，然后运行 /plugin install drawio，即可使用 /drawio-open 和 /drawio-status 斜杠命令

• npx drawio-mcp-server install <host> 会为 claude-code、claude-desktop、codex、zed、opencode 或 all 写入 MCP 配置

• 文档持久化工具：set-document-title 和 save-document

• Draw.io 库 API 版本兼容机制

• 在 IFrame 中启用 Draw.io MCP

• AWS、GCP、Azure、Cisco19 和 CiscoSafe 图形库会在运行时从 drawio 侧边栏自动发现

• 使用 list-documents 和 target_document 选择器定位多个文档，支持多标签页工作流

• 页面范围工具必须使用 target_page 选择器来定位多个页面

• 实时操作按文档采用 FIFO 串行处理，因此多个 Agent 可以安全地操作不同文件

• 页面管理工具：list-pages、get-current-page、create-page、copy-page、rename-page

• 导入、嵌入或展开 Mermaid 图表

• 恢复 Firefox 支持，但必须使用 TLS 模式

• 服务支持 TLS 模式，并可按需生成自签名证书

• 从 XML、SVG（嵌入 XML）或 PNG（嵌入 XML）导入和导出图表

• 通过路径点控制边的几何形状，并自动为自连接线寻路

• 支持嵌套形状和分组的父子关系

• 服务和扩展整合在同一个单体仓库中

• 内置 Draw.io 编辑器，无需浏览器扩展

• MCP 服务让 AI Agent 能够控制 Draw.io 图表

• 通过 MCP 工具以编程方式创建、检查和修改图表

• 支持复杂图表的图层管理

• 适用于任何 MCP 客户端（Claude Desktop、Claude Code、Zed、Codex 等）

简介

Draw.io MCP 服务将 Draw.io 绘图功能带给 AI Agent。它提供了可创建、读取、更新和删除图表元素的 MCP 工具，让 AI 助手能够自动构建架构图、流程图和可视化文档。

有两种使用方式：

1. 内置编辑器 - 服务直接托管 Draw.io，可通过浏览器访问
2. 浏览器扩展 - 通过扩展连接到在浏览器中运行的 Draw.io

实验性功能：与 draw.io 桌面版（Electron）应用的集成正在开发中，但目前受上游 CSP 问题阻碍 — 详见 DESKTOP.md。

要求

• Node.js（v22 或更高版本；已针对 v22 LTS 和 v24 LTS 测试）——MCP 服务的运行环境
• MCP 客户端——Claude Desktop、Claude Code、Zed、Codex、OpenCode 或任何兼容 MCP 的宿主

内置编辑器

无需额外要求，使用 --editor 标志即可直接运行。

浏览器扩展

• 浏览器扩展——drawio-mcp-extension
• 在浏览器中打开的 Draw.io

可选

• pnpm——首选包管理器（npm 也可以正常使用）

快速开始

1. 配置 MCP 宿主

最快方式：

• Claude Code： /plugin marketplace add lgazo/drawio-mcp-server，然后运行 /plugin install drawio。
• 其他任何宿主： npx drawio-mcp-server install <host>，其中 <host> 可以是 claude-code、claude-desktop、codex、zed、opencode 或 all。

完整参考、标志和卸载说明请参阅 docs/PLUGINS.md；了解如何发布版本，请参阅 docs/release.md。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"]
    }
  }
}

其他 MCP 客户端和详细配置（包括 pnpm 选项），请参阅配置。

2. 打开编辑器

重启 MCP 宿主后，打开：http://localhost:3000/

3. 开始绘制图表

可以尝试以下提示词：

"创建一张事件驱动架构图，展示包含生产者、消费者和三个后端服务的消息队列"

"创建一张三页的事件驱动架构图。使用三个并行 Agent，分别负责服务拓扑、消息流和重试／故障处理，并为每个 Agent 分配单独的目标页面。"

"绘制一张 CRUD API 图，包含一个数据库、一个 API 网关和四个带有各自端点的微服务"

"添加一个名为 'Background' 的新图层，并将所有装饰元素移到该图层中，然后为注释创建一个新图层"

现在，你的 AI 助手可以使用 MCP 工具控制图表了。

功能

该服务提供以下 MCP 工具：

• 文档发现——列出已连接的 Draw.io 文档实例，并将后续调用路由到指定的标签页／文件实例
• 图表检查——读取图形、页面、图层和单元格属性
• 图表修改——在目标页面上添加、编辑、删除图形、边和标签
• 页面管理——列出页面、检查当前页面、创建页面、复制页面和重命名页面；在受支持的运行环境中，不会强制切换当前显示的页面
• 图层管理——创建、切换和整理图层
• 厂商图形支持——运行时自动从 drawio 侧边栏发现 AWS、GCP、Azure、Cisco19 和 CiscoSafe 模具，因此 Agent 无需手动整理目录，即可放置 mxgraph.gcp2.cloud_run 或 mxgraph.cisco19.router 等图标
• 内置 TLS ——可选择启用 HTTPS + WSS，使用手动配置的证书／密钥，或通过每用户本地 CA 自动生成自签名材料。请参阅 CONFIG.md → TLS。

完整的可用工具列表，请参阅工具参考。

安装

该服务作为 MCP 宿主的一部分运行。所有受支持客户端（Claude Desktop、Claude Code、Zed、Codex、oterm）的详细配置（包括 npm 和 pnpm 选项），请参阅配置。

替代方案：浏览器扩展

除了内置编辑器，你还可以使用浏览器扩展连接到在浏览器中运行的 Draw.io。无论是否使用 --editor 标志，此方式均可使用。

1. 在浏览器中打开 Draw.io
2. 安装 Draw.io MCP 浏览器扩展：
   • Chrome 网上应用店
   • Firefox 附加组件
3. 确认扩展已连接（图标上有绿色信号覆盖层）

不使用 --editor 的配置：

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

更多详情请参阅扩展文档。

实验性功能：Draw.io 桌面版

与 draw.io 桌面版（Electron）应用的集成仍处于实验阶段，目前因上游 CSP 问题而无法端到端运行。插件可以在 draw.io 桌面版中加载，但其返回 MCP 服务的 WebSocket 连接会被 draw.io 硬编码的 connect-src 'self' 策略拒绝。

完整的设置步骤和当前限制请参阅 DESKTOP.md。

相关资源

配置 - CLI 标志和高级选项

工具参考 - 完整的 MCP 工具文档

故障排除

提示词示例

贡献

架构

开发

Draw.io 桌面版（实验性） - 安装路径和已知的 CSP 限制

Star 历史

评估