Claude Code 里一句话出图：draw.io MCP 实操指南
一张 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