Draw.io MCP 服务器

让我们使用最广泛的绘图工具 Draw.io (Diagrams.net) 来进行一些“氛围绘图”。

主要亮点

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

• 具有航点和自动自连接器路由的边缘几何控制

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

• 在同一个单体仓库中统一服务器和扩展

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

• MCP 服务器，允许 AI 智能体控制 Draw.io 图表

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

• 用于复杂图表的图层管理

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

简介

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

有两种使用方式：

1. 内置编辑器 - 服务器直接托管 Draw.io，可在浏览器中访问

2. 浏览器扩展 - 通过扩展连接到在浏览器中运行的 Draw.io

要求

• Node.js (v20 或更高版本) - MCP 服务器的运行时环境

• MCP 客户端 - Claude Desktop、Claude Code、Zed、Codex、OpenCode 或任何兼容 MCP 的主机

对于内置编辑器

无需额外要求 - 使用 --editor 标志即可开箱即用。

对于浏览器扩展

• 浏览器扩展 - drawio-mcp-extension

• 在浏览器中打开 Draw.io

可选

• pnpm - 首选包管理器（npm 也可以正常工作）

快速入门

1. 配置您的 MCP 主机

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

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

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

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

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

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

编辑 ~/.codex/config.toml：

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

添加到项目根目录下的 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 选项），请参阅 Configuration。

2. 打开编辑器

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

3. 开始绘图

您可以尝试以下示例提示词：

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

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

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

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

功能

该服务器为以下内容提供 MCP 工具：

• 图表检查 - 读取形状、图层和单元格属性

• 图表修改 - 添加/编辑/删除形状、边缘和标签

• 图层管理 - 创建、切换和组织图层

请参阅 Tools Reference 获取可用工具的完整列表。

安装

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

替代方案：浏览器扩展

除了内置编辑器外，您还可以使用 浏览器扩展 连接到在浏览器中运行的 Draw.io。这可以在有或没有 --editor 标志的情况下工作。

1. 在浏览器中打开 Draw.io

2. 安装 Draw.io MCP 浏览器扩展：

   • Chrome Web Store

   • Firefox Add-ons

3. 确保扩展已连接（图标上有绿色信号覆盖）

不带 --editor 的配置：

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

有关更多详细信息，请参阅 扩展文档。

相关资源

Configuration - CLI 标志和高级选项

Tools Reference - 完整的 MCP 工具文档

Troubleshooting

Prompt examples

Contributing

Architecture

Development

星标历史

评估