Draw.io MCP server

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

主要亮点

• 在 IFrame 中启用 Draw.io MCP

• AWS、GCP、Azure、Cisco19 和 CiscoSafe 模板在运行时从 drawio 侧边栏自动发现

• 多文档定位：通过 list-documents 和 target_document 选择器支持多标签页工作流

• 多页面定位：通过必需的 target_page 选择器支持页面级工具

• 每个文档的 FIFO 序列化用于实时操作，使多个代理可以安全地处理不同文件

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

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

• Firefox 支持回归，需要 TLS 模式

• 服务器支持 TLS 模式，并可选择生成自签名证书

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

• 通过路径点和自动自连接器路由实现边几何控制

• 用于嵌套形状和分组的父子关系

• 统一服务器和扩展位于同一 monorepo 中

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

• 让 AI 代理控制 Draw.io 图表的 MCP 服务器

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

• 复杂图表的图层管理

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

简介

Draw.io MCP 服务器将 Draw.io 的绘图能力带给 AI 代理。它提供 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 主机

将服务器添加到你的 MCP 客户端配置中：

Claude Desktop

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json：

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

Claude Code

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

Zed

添加到 ~/.config/zed/settings.json：

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

Codex

编辑 ~/.codex/config.toml：

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

OpenCode

添加到项目根目录的 opencode.json 或 ~/.config/opencode/opencode.json：

{
  "$schema": "https://ope…