draw.io源码与画图调用链
# draw.io源码与画图调用链
以本地安装的 @drawio/mcp 1.10.0 为样本，追踪输入从工具请求变为浏览器图形的全过程。
源码结论基于本地安装的
@drawio/mcp 1.10.0，不代表所有版本、所有 draw.io MCP 项目都如此实现。
# 1. 本地 draw.io MCP 包里面有什么？
本地实际安装的是 @drawio/mcp 1.10.0，入口为 src/index.js，直接依赖包括 @modelcontextprotocol/sdk 和用于压缩数据的 pako。
@drawio/mcp/
├── package.json 包信息和命令入口
├── src/
│ ├── index.js 工具定义、调用分发、生成链接
│ ├── pages.js 读写本地文件页面
│ ├── repair-xml.js 修复 XML 常见错误
│ ├── normalize-model.js 规范图形结构
│ ├── elk-pass.js 自动排列节点
│ ├── libavoid-pass.js 连线绕障碍
│ ├── shape-search.js 搜索图形样式
│ ├── icon-search.js 补充在线图标
│ ├── cdn-cache.js 辅助资源下载和缓存
│ └── *-reference.md XML / Mermaid 格式参考
└── vendor/libavoid/ 路由相关代码和 WASM
2
3
4
5
6
7
8
9
10
11
12
13
14
它提供八个工具：
| 工具 | 用途 |
|---|---|
open_drawio_xml | 处理 XML 并打开图 |
open_drawio_mermaid | 打开 Mermaid 生成的图 |
open_drawio_csv | 按 CSV 导入规则生成图 |
get_drawio_reference | 向模型提供格式参考 |
search_shapes | 返回图形样式和尺寸 |
list_pages | 列出本地文件页面 |
get_page | 读取指定页 XML |
set_page | 替换本地文件的指定页 |
源码在 draw.io 官方 MCP 仓库 (opens new window)；这里讨论的是本地安装版本，不应把仓库未来版本的行为直接套用到它身上。
# 2. “帮我画图”到底从哪到哪？
① 用户描述需求
↓
② 模型生成 XML / Mermaid / CSV
↓
③ 客户端将工具名和参数发给本地 MCP
↓
④ MCP 执行修复、可选布局、压缩及链接生成
↓
⑤ MCP 调用系统命令打开浏览器
↓
⑥ 浏览器里的 draw.io 转换并渲染图形
↓
⑦ 工具返回链接及执行提示，AI 继续回答
2
3
4
5
6
7
8
9
10
11
12
13
模型负责理解需求、组织图形内容；MCP 程序负责执行工具；draw.io 编辑器负责呈现和交互。
以 open_drawio_xml 为例，请求参数里放的是 XML 字符串和布局选项。index.js 中的工具处理器按工具名分发，调用 XML 修复、结构规范化和按需布局的函数。
# generateDrawioUrl 是哪里的方法？
它是作者在 src/index.js 中写的普通 JavaScript 函数，不是 MCP SDK 自带功能。核心作用是：
图形代码 → encodeURIComponent → pako.deflateRaw → Base64
↓
拼接地址、显示参数和 URL fragment
2
3
XML 使用 #R…，Mermaid、CSV 使用 #create=…。链接的 fragment 携带压缩后的图形内容，浏览器里的 draw.io 读取它；fragment 本身通常不会随 HTTP 请求发给服务器，但不能据此推断整个编辑器流程没有任何联网行为。
主流程可简化为：
const url = generateDrawioUrl(content, type, { lightbox, dark });
openBrowser(url);
return {
content: [{ type: "text", text: `Draw.io Editor URL:\n${url}` }]
};
2
3
4
5
在 macOS 上，openBrowser 内部使用 spawn("open", [url], ...)。它不通过鼠标拖拽来画图。
工具返回的“已打开”也不等于检查了最终图形正确渲染：本版代码没有等待浏览器返回渲染结果。
# 有数据、生成链接、保存文件、渲染，是四件事
| 阶段 | 已经得到了什么 |
|---|---|
| 模型生成 XML | 图形结构数据 |
generateDrawioUrl | 装有图形数据的链接 |
| 写入磁盘 | .drawio 文件 |
| 渲染或导出 | 屏幕图形、PNG、SVG 或 PDF |
生成链接不会自动保存 .drawio 文件。 XML 可以直接保存为文件；Mermaid、CSV 则还需要转换成 draw.io 图形结构。删除 openBrowser() 只是不打开浏览器，不会自动完成文件保存或图片导出。
另外，本版工具主要负责打开图和读写本地页面，没有提供持续读取、监听和修改当前浏览器画布的实时控制通道。