# Local Draw.io MCP

本项目提供一个本地 Draw.io MCP 服务，使用已安装的桌面版 Draw.io。

服务会维护默认工作文件：

`D:\Draw-workspace\current.drawio`

默认工作文件放在不带空格的目录里，避免 Draw.io 桌面版打开 `Program Files (x86)` 这类路径时把参数拆坏。Draw.io 可执行文件会自动从常见安装路径发现，也可以用 `DRAWIO_EXE` 环境变量指定。

## Tools

- `start_session`: 用本地 Draw.io 打开当前工作文件。
- `create_new_diagram`: 写入新的 `mxGraphModel`/`mxfile`，并打开本地 Draw.io。
- `get_diagram`: 读取当前本地 `.drawio` XML。
- `edit_diagram`: 按 cell id 增删改当前图。建议先读图，但不强制。
- `export_diagram`: 导出 `.drawio`、`.png`、`.svg`、`.pdf`、`.jpg`。

如果你在桌面版 Draw.io 里手动调整了图，保存后 MCP 会继续读取同一个工作文件并在此基础上编辑。

`create_new_diagram` 和 `edit_diagram` 会在覆盖当前图之前自动备份到 `D:\Draw-workspace\backups`。

## 安装

推荐用安装脚本注册 Codex MCP：

```powershell
powershell -ExecutionPolicy Bypass -File .\scripts\install-codex.ps1
```

脚本会自动查找 Draw.io、创建 `D:\Draw-workspace`、安装依赖、注册 Codex MCP，并运行 smoke test。

## Codex MCP

也可以手动注册：

```powershell
codex mcp add drawio -- node "D:\Program Files (x86)\Draw.io\draw.io-mcp\src\server.js"
```

添加后重启 Codex，或重新打开会话，让 MCP 工具刷新。

## Claude Code MCP

本服务是标准 stdio MCP Server，Claude Code 也可以直接使用：

```powershell
claude mcp add drawio -- node "D:\Program Files (x86)\Draw.io\draw.io-mcp\src\server.js"
```

可以用下面命令检查连接状态：

```powershell
claude mcp get drawio
```

## Codex 自动安装

当用户在 Codex 里说“@CycSpring/draw.io-use 给我装上这个 MCP”时，可以按下面流程安装：

```powershell
$repo = "$env:USERPROFILE\.codex\mcp\draw.io-use"
New-Item -ItemType Directory -Force (Split-Path $repo) | Out-Null

if (Test-Path "$repo\.git") {
  git -C $repo pull
} else {
  git clone https://github.com/CycSpring/draw.io-use.git $repo
}

npm --prefix $repo install
powershell -ExecutionPolicy Bypass -File "$repo\scripts\install-codex.ps1"
```

如果已经存在同名 `drawio` MCP，先移除旧配置或更新为新的 `server.js` 路径。

## 在 Codex 里怎么用

可以直接用自然语言让 Codex 画图、改图、导出图，例如：

- “用 drawio 画一个三层架构图，并打开让我检查。”
- “读取当前 Draw.io 图，把网关模块改成 API Gateway。”
- “在现有图里加一个 Redis 节点，连到后端服务。”
- “把当前图导出成 `D:\Draw-workspace\exports\architecture.png`。”
- “把当前图导出成 `D:\Draw-workspace\current.drawio.png`，我想直接看 PNG 预览。”

常见协作流程：

1. 让 Codex 调用 `create_new_diagram` 生成第一版图。
2. 在 Draw.io 桌面版里手动微调并保存。
3. 让 Codex 调用 `get_diagram` 读取最新文件。
4. 继续让 Codex 用 `edit_diagram` 做局部修改，或用 `export_diagram` 导出成图片/PDF。

注意：`create_new_diagram` 会覆盖当前工作文件；如果要保留旧图，先导出或复制一份。

## 示例图与 Prompt

下面是用本 MCP 生成并导出的 Hermes agent / Hermes Desktop 架构图示例：

![Hermes Desktop 架构图](assets/hermes-desktop-architecture.png)

可以把类似 prompt 直接发给 Codex 或 Claude Code：

```text
用 drawio 画一张 Hermes agent / Hermes Desktop 架构图，风格参考清爽的分层架构图：

- 标题：Hermes Desktop 架构图
- 横向四层：桌面交互层、应用编排层、本地能力层、外部服务层
- 桌面交互层包含：用户、Hermes Desktop UI（聊天 / 设置 / 任务视图）
- 应用编排层包含：Electron Main（窗口 / 托盘 / 生命周期）、IPC / Preload Bridge（权限边界 / 事件通道）、Gateway / Agent（会话编排 / 上下文与重试）
- 本地能力层包含：MCP Tools（文件 / 终端 / Draw.io / 插件）、Local Store（配置 / 会话 / 日志 / 密钥引用）、OS Services（文件系统 / 网络 / 开机启动）
- 外部服务层包含：Model API（OpenAI / Claude / 中转服务）、远程资源（插件市场 / 版本更新）
- 用实线表示主链路：用户操作 -> UI -> IPC -> Gateway / Agent -> 模型 / 工具 -> UI 回显
- 用虚线表示辅助链路：配置、日志、系统集成、插件更新
- 布局要留白充足，模块文字短句分行，线条尽量少交叉，最后导出成 D:\Draw-workspace\current.drawio.png 方便预览
```
## 感谢
感谢@https://github.com/DayuanJiang/next-ai-draw-io