一张 RAG 在线推理链路图，从「帮我画张 RAG 流程图」到浏览器弹出可编辑矢量图，只用了 30 秒。
上图是我在 Claude Code 里用一句话生成的——没有打开 draw.io、没有拖拽任何形状、没有调过任何颜色。这篇文章就来讲清楚：怎么装、怎么用、怎么用好。
一、这是什么
draw.io MCP是一个 MCP（Model Context Protocol）服务器，让 Claude Code 可以直接操控 draw.io 画图。你只需要用自然语言描述想要什么图，Claude 就会生成 mxGraph XML，推送给你本地的 draw.io（浏览器或桌面版）渲染出来。
它有 4 个核心能力：
| 工具 | 作用 |
|---|---|
open_drawio_xml | 用 XML 手摆节点，精确控制布局和样式 |
open_drawio_mermaid | 用 Mermaid 语法快速出图 |
open_drawio_csv | 从 CSV 数据生成组织结构图类图表 |
search_shapes | 搜索 draw.io 内置的 ~10000 个行业图标（AWS、K8s、Cisco 等） |
实际使用中，**90% 的场景用 **open_drawio_xml——它给了你像素级的控制力，画出来的图可以直接发博客、放 PPT、贴公众号。
二、安装配置
方式一：最推荐
直接告诉cluade code让他帮你安装MCP
方式二：添加 MCP 配置
在你的 Claude Code 项目配置中（.claude.json或.mcp.json），加入：
{"mcpServers":{"drawio":{"type":"stdio","command":"npx","args":["-y","@drawio/mcp"],"env":{}}}}两种配置方式：
全局生效（所有项目都能用）：
# 编辑 ~/.claude.json，在 "mcpServers" 字段下添加claude mcpadddrawio--command"npx"--args"-y""@drawio/mcp"单项目生效（只对当前目录生效）：
在项目根目录创建.mcp.json，写入上面的配置即可。
配置完成后，重启 Claude Code（或在对话中输入/mcp查看 drawio 是否已连接），看到 drawio 的工具出现在 MCP 工具列表中就算成功。
三、实操用法
很简单，通过一句话描述就可以了如下图：
提示词内容如下：
帮我画一张 RAG 在线推理链路图，包含查询改写、多路召回、重排序、LLM 生成四个阶段。有两个短路出口： 歧义检测→反问澄清、召回为空→兜底回复。底部加图例效果如下：
四、总结
draw.io MCP = 零学习成本的矢量图生产工具。
以前画一张博客配图，打开 draw.io → 拖矩形 → 对齐 → 调色 → 连线 → 导出，半小时过去了。
现在对着 Claude Code 说一句话，浏览器弹出一张可以直接用的图，不满意就再描述一句让它改。关注点从「怎么画」完全转移到「画什么」——这才是 AI 工具该有的体验。
这套工具链已经成了我写技术文章和做 PPT 的标配。如果你也在用 Claude Code，强烈建议花 5 分钟配上。
draw.io MCP 包：npm @drawio/mcp