使用说明

drawio mcp

允许AI助手创建、读取和编辑的MCP服务器 draw.io 图表。搭配 VS代码draw.io扩展并观察AI工作时图表的实时更新。

它能做什么？

创建图表 --自然语言的流程图、架构图、序列图
阅读并理解 --解析现有 .drawio 文件并描述其结构
精确编辑 --添加/删除/更新单个节点和边
撤消错误 --具有撤消/重做功能的完整历史记录，独立于编辑器的Ctrl+Z
实时预览 --更改立即出现在VS Code draw.io编辑器中，无需重新加载

安装

单击上面的徽章之一，或将其添加到 .vscode/mcp.json 在您的项目中：

{
  "servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "github:abossard/drawio-mcp"]
    }
  }
}

提示： 将此文件提交到您的仓库中——每个贡献者都会自动获得图表支持。

Claude Desktop

增添 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "github:abossard/drawio-mcp"]
    }
  }
}

VS Code user settings (all projects)

添加到您的用户 settings.json (命令+移动+P → 首选项：打开用户设置（JSON）):

{
  "mcp": {
    "servers": {
      "drawio": {
        "command": "npx",
        "args": ["-y", "github:abossard/drawio-mcp"]
      }
    }
  }
}

用法

问问你的AI助手：

“在中创建用户登录过程的流程图 docs/login-flow.drawio"

“阅读 architecture.drawio 并描述组件”

在API和数据库之间添加Redis缓存节点，然后突出显示它

“撤消上次更改”

服务器还附带了提示模板——尝试询问 “使用体系结构提示” 或 “使用流程图提示”.

工具

图表操作

工具	说明
`create_diagram`	创建新 `.drawio` 文件
`read_diagram`	解析并返回所有页面、节点和边
`add_node`	添加带有标签、位置、大小和样式的形状
`add_edge`	使用可选标签和样式连接两个节点
`update_element`	修改标签、样式、位置或大小
`remove_element`	按ID删除节点或边
`add_page`	添加新页面/选项卡
`get_diagram_styles`	列出所有预定义样式

历史

工具	说明
`undo_last_operation`	将文件还原到以前的状态
`redo_last_operation`	重新应用上次撤消的更改
`get_change_history`	列出最近的操作

视觉反馈

工具	说明
`highlight_element`	带有彩色亮点的闪光元素
`show_ai_cursor`	显示AI光标位置†
`show_ai_selection`	突出显示AI选定的单元格†
`show_status`	状态栏消息†
`show_spinner`	加载旋转器†

†需要配套扩展.

预定义样式

使用 shape 参数在 add_node 或 edgeStyle 在 add_edge:

类别	样式
形状	`rectangle` `roundedRectangle` `ellipse` `diamond` `parallelogram` `hexagon` `triangle` `cylinder` `cloud` `document` `process` `star` `callout`
流程图	`start` `end` `decision` `processStep` `inputOutput`
建筑	`server` `database` `firewall` `user` `container`
统一建模语言	`actor` `component` `package` `interface`
颜色	`blue` `green` `red` `yellow` `purple` `orange` `gray`
边缘	`straight` `orthogonal` `curved` `entityRelation` `dashed` `dotted` `bidirectional` `noArrow`

运作原理

AI Assistant ──(MCP)──> drawio-mcp server ──(writes XML)──> .drawio file
                                                                  │
                                              VS Code draw.io extension
                                              detects change & live-merges
                                                        │
                                                   draw.io webview
                                                  (instant update ✨)

✅ 无需重新加载页面——更改无缝合并
✅ 撤消有效——每次写入都变成一个Ctrl+Z步骤
✅ 保留用户选择——合并不会中断任何操作

配套扩展（可选）

配套的VS Code扩展为draw.io编辑器添加了实时AI存在覆盖。没有它，核心MCP工具（创建、读取、编辑、撤消）可以正常工作——扩展添加了视觉附加功能。

它添加了什么

特性	描述
🤖 AI光标	显示AI在图中“看”的位置
🔲 单元格选择	突出显示AI正在编辑的单元格
✨ 闪光高亮	元素上的临时彩色闪光
💬 状态消息	在编辑器中显示AI状态（例如“正在添加数据库…”）
⏳ Spinner	长时间操作时的加载指示器
📐 自动布局	应用布局算法（分层、有机、树、圆、径向）

先决条件

draw.io VS代码扩展 --从市场安装或运行：

code --install-extension hediet.vscode-drawio
# or for Insiders:
code-insiders --install-extension hediet.vscode-drawio

安装桥架延伸部分

# From the drawio-mcp repo root:
cd vscode-drawio-mcp-bridge
npm install
npm run build
npx @vscode/vsce package --allow-missing-repository

这产生了一个 drawio-mcp-bridge-0.1.0.vsix 文件。安装它：

code --install-extension ./drawio-mcp-bridge-0.1.0.vsix
# or for Insiders:
code-insiders --install-extension ./drawio-mcp-bridge-0.1.0.vsix

或者，在VS代码中： 一层楼 → “扩展：从VSIX安装…” → 选择 drawio-mcp-bridge-0.1.0.vsix.

验证

重新加载VS代码（Cmd+Shift+P→ “开发人员：重新加载窗口”)
打开任意 .drawio 文件
小的 活动日志面板 出现在draw.io编辑器的左上角，显示连接状态
使用MCP工具 check_connection 确认网桥已连接

当您打开一个扩展时，该扩展会自动连接到MCP服务器的WebSocket sidecar .drawio 文件。无需额外配置。

设置

设置	默认值	说明
`drawioMcpBridge.websocketPort`	`9219`	WebSocket端口（必须匹配 `DRAWIO_MCP_SIDECAR_PORT`)
`drawioMcpBridge.autoConnect`	`true`	当发生以下情况时自动连接 `.drawio` 文件打开
`drawioMcpBridge.aiColor`	`#D13913`	AI光标和选择覆盖的颜色
`drawioMcpBridge.aiLabel`	`🤖 AI`	AI光标旁边显示的标签

命令

Draw.io MCP：连接到服务器 --手动连接到sidecar
Draw.io MCP：与服务器断开连接 --断开连接

运作原理

┌─────────────────────────────────────────────────┐
│  VS Code                                        │
│                                                 │
│  draw.io extension          drawio-mcp-bridge   │
│  ┌──────────────┐          ┌─────────────────┐  │
│  │ draw.io       │◄─plugin─┤ Injects JS into │  │
│  │ webview       │         │ draw.io iframe   │  │
│  └──────────────┘          └────────┬────────┘  │
│                                     │ WebSocket  │
│                          ┌──────────▼────────┐  │
│                          │ drawio-mcp server  │  │
│                          │ sidecar (:9219)    │  │
│                          └───────────────────┘  │
└─────────────────────────────────────────────────┘

该扩展将一个插件注入draw.io iframe，该插件向MCP sidecar打开自己的WebSocket(ws://127.0.0.1:9219/drawio).AI操作（光标移动、高亮显示、状态）通过此通道流动。用户交互（鼠标位置、单元格选择）被发送回MCP服务器，以便AI知道用户在看什么。

发展

git clone https://github.com/abossard/drawio-mcp.git
cd drawio-mcp
npm install
npm test

将VS代码添加到本地构建中 .vscode/mcp.json 在任何项目中：

{
  "servers": {
    "drawio-dev": {
      "command": "node",
      "args": ["/absolute/path/to/drawio-mcp/build/index.js"]
    }
  }
}

跑 npm run dev 对于监视模式，VS Code会在每次重建时自动重新启动服务器。

命令	描述
`npm run build`	编译TypeScript
`npm run dev`	监视模式（保存后重建）
`npm test`	运行测试
`npm run test:watch`	测试的监视模式

环境变量

变量	默认值	描述
`DRAWIO_MCP_SIDECAR_PORT`	`9219`	用于配套扩展的WebSocket端口
`DRAWIO_MCP_NO_SIDECAR`	`1`	设置为 `1` 禁用WebSocket sidecar

许可证

麻省理工学院

使用说明

drawio mcp

它能做什么？

安装

用法

工具

图表操作

历史

视觉反馈

预定义样式

运作原理

配套扩展（可选）

它添加了什么

先决条件

安装桥架延伸部分

验证

设置

命令

运作原理

发展

环境变量

许可证

相关 MCP

Excel表格处理MCP服务

图表生成MCP服务器

ECharts 图表生成 MCP 服务

图表生成服务

多模型咨询工具

Whimsical MCP 服务器