Draw.io MCP 服务器

让我们使用最流行的绘图工具 Draw.io (Diagrams.net) 进行一些 Vibe 图表绘制吧。

核心亮点

• 支持从 XML、SVG（含嵌入式 XML）或 PNG（含嵌入式 XML）导入和导出图表
• 边线几何控制，支持路径点和自动自连接路由
• 父子关系用于嵌套形状和分组
• 统一的服务器和扩展在同一 monorepo 中
• 内置 Draw.io 编辑器，无需浏览器扩展
• MCP 服务器使 AI 代理能够控制 Draw.io 图表
• 通过 MCP 工具进行程序化图表创建、检查和修改
• 复杂图表的图层管理
• 可与任何 MCP 客户端（Claude Desktop、Claude Code、Zed、Codex 等）配合使用

简介

Draw.io MCP 服务器将 Draw.io 的绘图功能引入到 AI 代理中。它提供了可以创建、读取、更新和删除图表元素的 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 客户端配置中：

{
  "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"]}'

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

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

{
  "$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. 开始绘图

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

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

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

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

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

功能

服务器提供以下 MCP 工具：

• 图表检查 - 读取形状、层和单元格属性
• 图表修改 - 添加/编辑/删除形状、边线和标签
• 图层管理 - 创建、切换和组织图层

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

安装

服务器作为您 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"]
    }
  }
}

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

相关资源

配置 - CLI 标志和高级选项

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

故障排除

提示示例

贡献指南

架构

开发

星标历史

评估

drawio-mcp-server 快速上手指南

drawio-mcp-server 是一个 MCP（Model Context Protocol）服务器，允许 AI 助手（如 Claude、Codex 等）直接控制 Draw.io (Diagrams.net) 创建、检查和修改图表。它支持内置编辑器模式，无需安装浏览器插件即可开始工作。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• Node.js: 版本 v20 或更高。
  • 检查版本：node -v
  • 下载地址：Node.js 官网 或使用 nvm 管理。
• MCP 客户端: 已安装并配置好任意兼容的 MCP 宿主软件，例如：
  • Claude Desktop
  • Claude Code
  • Zed Editor
  • Codex
  • OpenCode
• 包管理器 (可选): 推荐使用 pnpm，标准的 npm 同样适用。

安装步骤

本工具无需全局安装，通过配置 MCP 客户端使用 npx 直接运行即可。以下是主流客户端的配置方法：

1. Claude Desktop

编辑配置文件 ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) 或 %APPDATA%\Claude\claude_desktop_config.json (Windows)，添加以下内容：

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

2. Claude Code

在终端中运行以下命令直接添加配置：

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

3. Zed Editor

编辑配置文件 ~/.config/zed/settings.json，添加：

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

4. Codex

编辑配置文件 ~/.codex/config.toml，添加：

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

5. 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
    }
  }
}

注意：参数 --editor 表示启用内置编辑器模式。若需使用浏览器扩展模式，请移除该参数并参考官方文档安装对应扩展。

基本使用

配置完成后，请重启您的 MCP 客户端软件。

第一步：打开编辑器

在浏览器中访问内置编辑器地址： http://localhost:3000/

第二步：让 AI 绘制图表

在您的 AI 对话界面（如 Claude Desktop 聊天窗口）中，直接发送自然语言指令，AI 将调用 MCP 工具自动绘图。

示例指令 1：创建架构图

"Create an event-driven architecture diagram showing a message queue with producers, consumers, and three backend services" （创建一个事件驱动架构图，展示包含生产者、消费者和三个后端服务的消息队列）

示例指令 2：绘制 API 流程图

"Draw a CRUD API diagram with a database, API gateway, and four microservices with their endpoints" （绘制一个 CRUD API 图，包含数据库、API 网关以及四个带有端点的微服务）

示例指令 3：管理图层

"Add a new layer called 'Background' and move all decorative elements to it, then create a new layer for annotations" （添加一个名为'Background'的新图层，将所有装饰元素移入其中，然后创建一个新图层用于标注）

现在，您可以像与设计师协作一样，通过对话让 AI 帮您完成复杂的图表绘制工作。