draw.io MCP
Enables local Draw.io diagram creation, editing, and export via MCP tools, using the desktop app.
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: 读取当前本地.drawioXML。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 预览。”
常见协作流程:
- 让 Codex 调用
create_new_diagram生成第一版图。 - 在 Draw.io 桌面版里手动微调并保存。
- 让 Codex 调用
get_diagram读取最新文件。 - 继续让 Codex 用
edit_diagram做局部修改,或用export_diagram导出成图片/PDF。
注意:create_new_diagram 会覆盖当前工作文件;如果要保留旧图,先导出或复制一份。
示例图与 Prompt
下面是用本 MCP 生成并导出的 Hermes agent / 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
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.