drawio-mcp Tool Server 完全指南：让 LLM 把 XML、CSV 与 Mermaid 直接变成可编辑的 draw.io 图-北京尧图网络

AI 应用MCP 服务交互助手【免费下载链接】drawio-mcp项目地址https://gitcode.com/gh_mirrors/dr/drawio-mcp点击查看免费下载导读drawio-mcp Tool Server 是 draw.io 官方 MCPModel Context Protocol服务端它通过 stdio 协议把 LLM 生成的图内容draw.io/mxGraph XML、CSV、Mermaid.js压缩进 URL并在浏览器中打开 draw.io 编辑器供用户直接查看与编辑同时支持 lightbox 只读模式与暗色主题。读完本文你将掌握该服务端在 Claude Desktop、Claude Code、VS CodeGitHub Copilot、Cursor、OpenCode 等客户端中的完整接入方式逐参数理解open_drawio_xml、open_drawio_csv、open_drawio_mermaid、search_shapes与页面级工具list_pages/get_page/set_page的用法并深入其服务端 ELK 布局、libavoid 连线避障与模型规范化等底层实现原理。一、项目定位与核心能力本包发布为 npm 包drawio/mcp当前仓库版本 1.6.3见 package.json是 drawio-mcp 仓库四大方案之一与另外三个方案互补MCP App Server在 AI 聊天界面内联渲染图托管在https://mcp.draw.io/mcp无需安装Claude Code PluginClaude Code 插件生成原生.drawio文件并可选导出 PNG/SVG/PDFProject Instructions基于 Claude 项目指令的零安装方案。Tool Server 的核心特性见 README打开 XML 图加载原生 draw.io/mxGraph XML 格式导入 CSV 数据把表格数据转换为图组织结构图、流程图等渲染 Mermaid.js把 Mermaid 语法转换为可编辑的 draw.io 图可定制显示lightbox 模式、暗色模式等。入口实现位于 src/index.js这是一个纯 Node.js 的 MCP 服务端StdioServerTransport无构建步骤依赖仅modelcontextprotocol/sdk与pako两个包。二、安装与运行2.1 推荐方式npxnpx drawio/mcp2.2 全局安装npm install -g drawio/mcp drawio-mcp全局安装后npm 会通过bin字段注册drawio-mcp命令见 package.json。2.3 从源码运行git clone https://github.com/jgraph/drawio-mcp.git cd drawio-mcp/mcp-tool-server npm install npm startnpm start的prestart钩子会先执行copy-shared脚本package.json把 shared/xml-reference.md、shared/mermaid-reference.md 以及shape-search.js、icon-search.js、mermaid-elk.js、mx-model.js、mx-xml.js、normalize-model.js等共享模块复制进src/保证 npm 包自包含postinstall钩子还会预热 libavoid 路由核心缓存见 src/postinstall.js。2.4 CLI 元参数服务端在启动 MCP 协议之前先处理命令行参数src/index.js支持-h/--help打印帮助文本-v/--version打印包版本号其他参数输出Unknown option并退出码 1。三、MCP 客户端配置服务端通过 stdio 与任意标准 MCP 客户端通信配置形态基本一致。3.1 Claude Desktop将以下配置写入 Claude Desktop 配置文件macOS~/Library/Application Support/Claude/claude_desktop_config.jsonWindows%APPDATA%\Claude\claude_desktop_config.json{ mcpServers: { drawio: { command: npx, args: [drawio/mcp] } } }3.2 Claude Codeclaude mcp add drawio -- npx -y drawio/mcp或手工写入.claude/settings.json{ mcpServers: { drawio: { command: npx, args: [-y, drawio/mcp] } } }3.3 VS CodeGitHub Copilot在 workspace 的.vscode/mcp.json中加入或运行MCP: Open User Configuration做全局配置{ servers: { drawio: { command: npx, args: [-y, drawio/mcp] } } }然后点击服务器条目上方的Start、在弹出的提示中trust该服务器将 Copilot Chat 切换到Agent mode并确保在聊天输入框的Configure Tools中启用了 drawio 工具。注意VS Code 应使用这个 stdio 服务端——它会在浏览器中打开图适用于任何标准 MCP 客户端。托管的https://mcp.draw.io/mcp端点属于另一套服务它通过 MCP Apps 协议在聊天内联渲染图Copilot 尚不支持该协议。Windsurf 等其他使用 stdio 的客户端配置形态与上面相同。3.4 CursorCursor 提供一键安装入口也可手工加入~/.cursor/mcp.json全局或项目中的.cursor/mcp.json{ mcpServers: { drawio: { command: npx, args: [-y, drawio/mcp] } } }启用服务器后或在Cursor Settings → MCP下让 Agent 创建图即可——它会直接在浏览器中打开 draw.io 编辑器。提示Cursor 也支持 MCP Apps 扩展因此托管的 MCP App Serverhttps://mcp.draw.io/mcp在 Cursor 中同样可用会在聊天中内联渲染图。若你更希望图在完整的 draw.io 编辑器中打开则使用本 stdio 服务端。3.5 OpenCode在项目根目录的opencode.json的mcp键下添加或用~/.config/opencode/opencode.json全局生效{ $schema: https://opencode.ai/config.json, mcp: { drawio: { type: local, command: [npx, -y, drawio/mcp], enabled: true } } }下次启动时工具即生效让 Agent 创建图即可在浏览器中打开 draw.io 编辑器。提示OpenCode 还能直接加载drawio技能生成原生.drawio文件支持 PNG/SVG/PDF 导出无需任何插件包装见 plugins/README.md。3.6 其他 MCP 客户端任何通过 stdio 运行 MCP 服务的客户端均可直接使用npx drawio/mcp3.7 自托管 draw.io若需要把图打开在自托管的 draw.io 实例中设置环境变量DRAWIO_BASE_URL指向你的实例地址默认为https://app.diagrams.net/{ mcpServers: { drawio: { command: npx, args: [-y, drawio/mcp], env: { DRAWIO_BASE_URL: https://drawio.example.com/ } } } }该变量在 src/index.js 中读取用于拼接最终的打开 URL见下文URL 生成原理。四、工具详解服务端共注册七个工具工具定义见 src/index.js并通过 MCP 的tools/list能力对外发布。4.1open_drawio_xml用 XML 内容打开 draw.io 编辑器是控制力最强的工具工具描述中内嵌了完整的 XML 生成参考含边路由、容器、图层、标签、元数据、暗色模式等作为所有 draw.io MCP 提示词的单一事实来源。参数类型必填说明contentstring是draw.io XML 内容mxGraphModel 格式lightboxboolean否只读查看模式默认 falsedarkstring否auto、true或false默认autopostLayoutstring否elk表示打开前做 ELK 分层布局重排放置顶点、路由连线directionstring否配合postLayout的流向vertical默认或horizontalroutingstring否libavoid表示打开前用 libavoid 对连接线做避障正交重路由顶点位置不动模型规范化每次调用都执行。任何 XML 图在进入后续处理前都会先经过规范化shared/normalize-model.js驱动 shared/mx-model.js 中的MxGraph.normalizeModel。它会修复三类生成型 XML 常见问题除此之外不做任何改动边父级归属。mxGraph 的边应归属于其两端顶点的最近公共祖先而 LLM 生成的 XML 常把边一律挂在图层上parent1。这样渲染没问题但布局会出错——ELK 会在包含边的节点坐标系中读取边的坐标导致容器内两节点间的连线逃出容器。规范化按编辑器自身模型维护方式mxGraphModel.updateEdgeParents修复而不是让布局去改写层级结构布局绝不能产生此类副作用。没有几何信息的边。draw.io 对无几何信息的边完全不渲染规范化会为其补上标准的相对几何relative1。会裁剪子节点的容器。容器会被撑大以容纳越界的子节点——只增不减不移动任何子节点因此作者预留的呼吸空间得以保留。MxGraph.normalizeModel是 draw.io 桌面 CLI--normalize所用Graph.normalizeModel的移植因此这里修复过的图与 CLI 修复过的图结果一致由 test/normalize-model.test.js 逐单元验证。该过程幂等已处于规范形态的图会原样返回只重写被改动的单元格其余字节不动。postLayout: elk服务端 ELK 全量重排。在 URL 生成前由 src/elk-pass.js 驱动与编辑器Arrange ▸ Layout菜单及 App Server 完全相同的drawio-elk包的ElkLayout门面完成布局顶点被重新放置容器会围绕排好的子节点缩放、边获得 ELK 的路径点与规范的直角边样式ElkLayout.CANONICAL_EDGE因此结果与编辑器对同一张图产生的布局一致。实现要点见 src/elk-pass.js节点尺寸被固定applierOptions.resizeParent: false与 App Server 相同这里没有渲染器去测量标签文字因此以 XML 声明的宽高为准ELK 用声明的尺寸布局顶点移动、边重排但单元格层级结构不受布局影响边父级归属是规范化阶段的职责在布局之前已完成布局未触及的单元格保持字节级一致重复布局两次结果不变见 test/elk-pass.test.js。direction参数对应 drawio-elk 菜单预设verticalFlow/horizontalFlowsrc/elk-pass.js。ELK 包约 900 KB首次布局时从 draw.io CDN 加载并按用户缓存之后通过 ETag 条件请求复用因此更新后的第一次布局会付出一次性下载成本。routing: libavoid服务端 libavoid 避障连线。由 src/libavoid-pass.js 实现顶点位置完全不动仅重算连接线使其以干净的正交折线绕开图形draw.io 内置路由器默认画直线、无避障。路由核心AvoidRouting.computeRoutes与编辑器、App Server 完全一致canonical 来源为 drawio-dev 的js/libavoid-js/WASM 二进制随包附带在 vendor/libavoid/。实现细节包括每个mxGraphModel页面独立路由单元格 id 与障碍物不会跨页test/libavoid-pass.test.js只重写被路由的边文档其余字节保持原样任何解析/路由异常都让该页保持未路由状态绝不产出坏图支持固定连接点exitX/exitY、entryX/entryY含exitPerimeter/entryPerimeter0的翻转语义、每端jettySize最短首末段长度解析、object/UserObject包裹的单元格、旋转/翻转图形的按绘制外形避障AvoidRouting.shapeFrame无法路由的边如目标被四面包围保留作者原有路径点与样式不用 libavoid 的直线回退覆盖test/libavoid-pass.test.js。postLayout与routing是二选一的替代方案ELK 既放置顶点又路由连线libavoid 只修复你手工摆放的布局中的连接线。两者都在服务器端、图被压缩进 URL 之前运行图本身始终不离开你的机器它随 URL 片段传输。同时设置两者也并无危害ELK 先跑路由再作用于其结果。4.2open_drawio_csv用 CSV 数据打开 draw.io 编辑器并转换为图参数类型必填说明contentstring是遵循 draw.io CSV 导入格式的内容lightboxboolean否只读查看模式默认 falsedarkstring否auto、true或false默认auto适合组织结构图、流程图等由表格数据生成的图。需要留意的是CSV 处理在某些情况下可能失败能选 Mermaid 时优先用 MermaidAGENTS.md 也建议避免在样式属性中使用%column%占位符如fillColor%color%否则会引发 URI malformed 错误。4.3open_drawio_mermaid用 Mermaid.js 语法打开 draw.io 编辑器参数类型必填说明contentstring是Mermaid.js 语法lightboxboolean否只读查看模式默认 falsedarkstring否auto、true或false默认autopostLayoutstring否elk将 Mermaidflowchart切换为分层 ELK 布局流向仍遵循流程图代码对其他图类型忽略工具描述内嵌 Mermaid 参考覆盖 draw.io Mermaid 解析器支持的 28 种图类型flowchart、sequenceDiagram、classDiagram、stateDiagram-v2、erDiagram、gitGraph、gantt、mindmap、timeline、kanban、c4Context 等的语法要点。postLayout: elk在这里零成本它不是服务端计算布局而是对 Mermaid 源码做文本变换——由 shared/mermaid-elk.js 的withElkLayout在源码中写入config: { layout: elk }的 YAML frontmatterMermaid v10.5 起旧式%%{init: …defaultRenderer: elk}%%指令已废弃故选择新式写法若源码已显式声明布局则保持不变随后由 draw.io 在转换图时自行应用该布局——与你在源码中手写该 frontmatter 效果完全一致。若源码已声明其他布局、或图类型不是 flowchart/graph源码保持不变工具结果会给出说明类型检测mermaidDiagramType是 drawio-devgetMermaidDiagramType的逐字移植见 test/mermaid-elk.test.js。另外#create的 mermaid 链接携带version: 12MERMAID_DEFAULTS_VERSIONsrc/index.jsdraw.io 会用 Mermaid 12 的默认样式ELK 布局、redux-color主题、多数类型的neo外观转换并把版本存入图中使后续编辑保持该外观旧版 draw.io 构建会忽略此字段。4.4search_shapes搜索 draw.io 形状库约 10,000 个形状AWS、Azure、GCP、Cisco、Kubernetes、PID、电气、BPMN 等返回带现成 style 字符串的匹配形状可直接用于open_drawio_xml参数类型必填说明querystring是空格分隔的关键词如aws lambda、cisco routerlimitnumber否最大结果数默认 10最大 50搜索算法是共享的buildTagMap/searchShapescanonical 位于 shared/shape-search.js。当内置库没有强匹配时没有任何结果精确命中全部词条结果会由 draw.io 图标服务品牌 Logo 与通用概念图标如react、slack、shopping cart实时补充合并管线见 shared/icon-search.js强匹配的本地结果优先、图标只填补剩余名额弱匹配本地结果最多保留一半预算一页强匹配本地结果完全不发网络请求服务失败时降级为仅本地结果。可通过DRAWIO_ICON_SERVICE_URL覆盖端点指向自托管服务基地址或设off关闭图标补充。注意该工具仅用于需要行业专用、品牌化或图形化图标的图云架构、网络拓扑、PID、电气图等。标准流程图、UML、ERD、组织结构图、思维导图等使用基础几何形状矩形、菱形、圆形、圆柱即可不需要也不应调用它。按需加载的索引。为控制 npm 包体积约 4.6 MB 的search-index.json不随包发布仓库内运行时读取本地 shape-search/search-index.json开发与测试无需联网发布安装则在首次调用时经 src/cdn-cache.js 的 ETag 校验缓存加载约 400 KB brotli 线上体积、20 秒超时见 src/shape-index.js随后进程内缓存。DRAWIO_SHAPE_INDEX_URL可覆盖来源http(s) URL 会走缓存本地路径则直接读盘、不缓存。索引加载失败时工具返回明确错误而不是被隐藏。4.5list_pages/get_page/set_page面向本地多页.drawio文件的页面级访问实现见 src/pages.js使 LLM 无需把整个文件读入上下文即可查看或编辑某一页。页面按零基索引、精确名称或 id 寻址以list_pages返回值为准被压缩的页面透明地解压/再压缩。路径必须以.drawio或.xml结尾。工具参数结果list_pagespath返回每页的[{index, id, name, approxSizeBytes}]get_pagepath,page返回该页的mxGraphModelXMLset_pagepath,page,content用新的mxGraphModel元素替换该页内容其余页面保持不变实现要点均可由 test/pages.test.js 印证draw.io 每个diagram体既可能是明文 XML也可能是 base64(pako.deflateRaw) 压缩块且各页可混合两种状态。pages.js按页检测体以开头与否而不盲信外层mxfile compressed…属性set_page会保持目标页原有的压缩状态写入通过临时文件原子 rename崩溃不会截断目标文件安全约束刻意收紧路径在检查存在性之前先校验扩展名避免探测任意路径set_page内容必须是单个mxGraphModel元素且拒绝包含裸diagram标签防止逃逸页面体改写文件结构解压上限 64 MB防 deflate 炸弹重复页名直接报错并给出歧义索引页面名全数字时会被解析为索引此时应改用 id 寻址。这是唯一参数会触碰本地文件系统的工具组因此约束最严格。注意这些工具操作的是本地文件而前三个工具生成的是 URL——二者定位不同。五、URL 生成原理How It Works完整流程见 src/index.jsMCP 服务端接收图内容XML、CSV 或 Mermaid内容先经encodeURIComponent编码再用 pakodeflateRaw压缩最后 base64 编码组装 JSON 对象{ type, compressed: true, data }并mermaid 类型时附带version拼接到 draw.io URL 上作为#create片段参数同时按选项设置查询参数lightbox1时附加edit_blank、border10非 lightbox 时设置grid0、pv0dark1仅在darktrue时设置返回给 LLMLLM 呈现给用户打开 URL 后 draw.io 加载出可查看/编辑的图。#create片段由浏览器打开 URL 时解析图数据只存在于 URL 片段中从不经过服务端传输因此图内容始终留在用户机器上。打开浏览器时按平台处理src/index.jsmacOS 用open、Linux 用xdg-open、Windows 用cmd /c start。Windows 上存在 shell 限制cmd的start会把当命令分隔符、并丢弃#之后的片段导致整个图载荷丢失因此短 URL 写入临时.url文件、超过 2000 字符WIN_URL_FILE_MAX_LENGTH的 URL 写入临时 HTML 页并以前端 JSwindow.location.replace重定向浏览器对 URL 长度无此限制#create片段不离开客户端故无实际长度上限。六、使用建议与示例提示词按需求选型AGENTS.md 给出的速查表需求使用可靠性流程图、时序图、ER 图open_drawio_mermaid高自定义样式、精确摆放open_drawio_xml高从数据生成组织结构图open_drawio_csv中典型提示词Useopen_drawio_mermaidto create a sequence diagram showing OAuth2 authentication flowUseopen_drawio_csvto create an org chart: CEO → CTO, CFO; CTO → 3 EngineersUseopen_drawio_xmlto create a detailed AWS architecture diagram with VPC, subnets, and security groups提示Claude Desktop 可能有多条创建图的途径。为确保走 draw.io MCP请显式提及工具名或加一条系统指令Always use the draw.io MCP tools to create diagrams.在实际提示词中结合postLayout/routing的适用场景任何方向性/层级性图流程图、流程/状态图、决策树、流水线都应为open_drawio_xml设置postLayout: elk——顶点位置只需表达大致方向ELK 负责精确摆放与连线但若手工摆放本身承载语义泳道、容器、架构图、UML则应省略这正是手工摆放的通常理由手工摆放的图中若连线会穿过图形架构图、网络/部署图、UML、平面图用routing: libavoid稀疏布局、连线不会重叠任何东西时省略两者视为二选一不要同时设置Mermaid flowchart 满足以下任一条件时建议postLayout: elk约 20 个及以上节点、3 个及以上决策菱形、存在回边/反馈边、3 个及以上不同端点draw.io 原生 Mermaid 解析器在结构复杂时会产生拥挤或失衡的布局。七、相关资源与进一步阅读在仓库中可继续深入mcp-tool-server/README.md官方文档本文主体mcp-tool-server/AGENTS.md工具服务端的实现细节说明规范化、ELK、libavoid、页面工具、URL 生成、发布流程src/index.js入口与全部工具定义shared/xml-reference.md注入open_drawio_xml工具描述的 XML 生成参考单一事实来源含刚性网格坐标规则shared/mermaid-reference.md注入open_drawio_mermaid的 Mermaid 语法参考shared/normalize-model.js 与 mcp-tool-server/test/normalize-model.test.js模型规范化实现与验证mcp-tool-server/src/elk-pass.js 与 mcp-tool-server/test/elk-pass.test.jsELK 布局 passmcp-tool-server/src/libavoid-pass.js 与 mcp-tool-server/test/libavoid-pass.test.jslibavoid 路由 passmcp-tool-server/src/pages.js 与 mcp-tool-server/test/pages.test.js页面级文件访问mcp-tool-server/src/cdn-cache.js三类 CDN 源libavoid 路由核心、drawio-elk 包、形状索引的 ETag 校验按用户磁盘缓存机制mcp-app-server/README.md内联渲染的托管方案需联网、免安装。结语drawio-mcp Tool Server 把LLM 生成图与浏览器中的 draw.io 编辑器这两个环节用最轻量的方式连接起来无需渲染器、无构建步骤图内容压缩进 URL 片段、全程留在用户机器上并通过服务端规范化、ELK 布局与 libavoid 避障三个可选的预处理 pass 弥补了生成型 XML 最常见的缺陷。掌握本文的工具参数、客户端配置与底层管线即可在自己的 MCP 工作流中稳定地产出高质量、可继续编辑的 draw.io 图。赞分享AI 应用MCP 服务交互助手【免费下载链接】drawio-mcp项目地址https://gitcode.com/gh_mirrors/dr/drawio-mcp点击查看免费下载相关推荐vscode-drawio 内联 Markdown 编辑器把 draw.io 图表直接嵌进 Markdown 文档vscode drawio 内联 Markdown 编辑器把 draw.io 图表直接嵌进 Markdown 文档本指南以 vscode drawio 仓库开发工具drawio-mcp 双服务器架构与 MCP 工具全解析让 LLM 在 draw.io 编辑器中打开与创建图表drawio mcp 双服务器架构与 MCP 工具全解析让 LLM 在 draw.io 编辑器中打开与创建图表 drawio mcp 是 draw.io 官方AI 应用MCP 服务交互助手让静态图表秒变可编辑Edit Banana 图片转 DrawIO 完全指南让静态图表秒变可编辑Edit Banana 图片转 DrawIO 完全指南 Edit Banana 是一个开源的内容重构框架核心能力是图片转 Dra人工智能AI 应用计算机视觉图像处理OCR上一篇Apache DataFusion物化视图刷新策略增量更新实现下一篇k0s 集群配置完全指南k0s.yaml 的生成、使用与全量配置项参考创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

drawio-mcp Tool Server 完全指南：让 LLM 把 XML、CSV 与 Mermaid 直接变成可编辑的 draw.io 图

相关推荐

Ant Design Blazor Select 自动分词（Automatic Tokenization）实战指南

Java大厂面试全攻略：从核心原理到AI应用的知识体系梳理

三年云服务器账单复盘：从月月超支到降本三成的关键决策

更多资讯

上行CCE分配失败拖垮无线接通率：5G网优定位与参数优化案例

用 PartyKit 为 Next.js 应用添加实时功能：PartyPoll 实时投票应用从零到部署实战教程

Psalm NullPropertyAssignment 详解：在 null 上赋值属性的检测机制与修复方案

前端测试体系落地：从单测到E2E的完整工程方案

从Python编译器到Agent就绪：数据库OKF知识包构建全解析

CSS - 盒模型初识：内容内边距边框外边距解析

今日更新

Susi AI API实战指南：susi_alexa_skill如何用Node.js调用chat.json获取智能回答

换新电脑了？KeyStats 恢复码数据找回完全指南，端到端加密统计一键重建

重建二叉树：由前序与中序遍历序列还原二叉树的原理与 Java 实现（YCBlogs 剑指 Offer 精讲）

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？