Draw.io MCP Server

Draw.io MCP服务器

让我们用最广泛使用的绘图工具Draw.io（Diagrams.net）做一些Vibe绘图。

关键亮点

• 在IFrames中启用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

• Firefox支持恢复，TLS模式是必要的

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

• 在XML、SVG（带嵌入式XML）或PNG（带嵌入式XML）之间导入和导出图表

• 带航路点和自动自连接器路线的边缘几何控制

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

• 同一mono仓库中的统一服务器和扩展

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

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

• 通过MCP工具创建、检查和修改程序图

• 复杂图表的图层管理

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

介绍

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

有两种使用方法：

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

实验性：与 draw.io桌面（电子）应用程序 正在进行中，但目前被上游CSP问题阻止——请参阅 桌面.md.

需求

• Node.js （v20或更高版本）-MCP服务器的运行时环境
• MCP客户端 -Claude Desktop、Claude Code、Zed、Codex、OpenCode或任何与MCP兼容的主机

用于内置编辑器

无额外要求-开箱即用 --editor 旗帜。

用于浏览器扩展

• 浏览器扩展 - drawio mcp扩展
• 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://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

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

2.打开编辑器

重新启动MCP主机后，打开： http://localhost:3000/

3.开始绘制图表

您可以尝试的示例提示：

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

创建一个三页的事件驱动架构图。并行使用三个代理进行服务拓扑、消息流和重试/失败处理，每个代理分配到一个单独的目标页

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

添加一个名为“背景”的新图层，并将所有装饰元素移动到该图层，然后为注释创建一个新图层

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

特性

服务器提供MCP工具用于：

• 文档发现 -列出连接的Draw.io文档实例，并将以后的调用路由到特定的选项卡/文件实例
• 图表检查 -读取形状、页面、图层和单元格属性
• 图表修改 -在目标页面上添加/编辑/删除形状、边和标签
• 页面管理 -列出页面、检查当前页面、创建页面、复制页面和重命名页面，而无需在支持的运行时强制进行可见的页面切换
• 分层管理 -创建、切换和组织图层
• 供应商形状覆盖范围 -AWS、GCP、Azure、Cisco19和CiscoSafe模板在运行时从drawio的侧边栏自动发现，因此代理可以放置以下图标 mxgraph.gcp2.cloud_run 或 mxgraph.cisco19.router 没有手工策划的目录
• 内置TLS --通过每个用户的本地CA选择使用手动证书/密钥或自动生成的自签名材料的HTTPS+WSS。请参阅 CONFIG.md→ TLS.

看 工具参考 查看可用工具的完整列表。

安装

服务器作为MCP主机的一部分运行。所有支持的客户端（Claude Desktop、Claude Code、Zed、Codex、oterm）的详细配置，包括npm和pnpm选项，可在 配置.

替代方案：浏览器扩展

您可以使用 浏览器扩展 连接到浏览器中运行的Draw.io。这适用于有或没有 --editor 旗帜。

1. 打开 浏览器中的Draw.io
2. 安装Draw.io MCP浏览器扩展：

- Chrome 网上应用店 - 附加元件

1. 确保分机已连接（图标上覆盖绿色信号）

配置无 --editor:

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

看 扩展文档 了解更多详情。

实验：Draw.io桌面

与 draw.io桌面 （电子）应用程序是 实验性的 并且目前由于上游CSP问题而端到端受阻。该插件加载到draw.io桌面中，但其返回MCP服务器的WebSocket连接被draw.io的硬编码拒绝 connect-src 'self' 政策。

看 桌面.md 对于完整的设置步骤和当前限制。

相关资源

配置 -CLI标志和高级选项

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

故障排除

提示示例

贡献

建筑

发展

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

明星历史

评估