Claude Code 里一句话出图：draw.io MCP 实操指南

2026/8/9 2:11:51 拓冰建站浏览量

一张 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

建站实战干货