draw.io MCP

draw.io MCP

Enables local Draw.io diagram creation, editing, and export via MCP tools, using the desktop app.

Category
访问服务器

README

Local Draw.io MCP

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

D:\Program Files (x86)\Draw.io\draw.io.exe

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

D:\Draw-workspace\current.drawio

默认工作文件放在不带空格的目录里,避免 Draw.io 桌面版打开 Program Files (x86) 这类路径时把参数拆坏。

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 会继续读取同一个工作文件并在此基础上编辑。

Codex MCP

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 也可以直接使用:

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

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

claude mcp get drawio

Codex 自动安装

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

$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
codex mcp add drawio -- node "$repo\src\server.js"

如果已经存在同名 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 架构图

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

用 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

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选