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

📅 2026/8/9 1:50:06
Claude Code 里一句话出图:draw.io MCP 实操指南
一张 RAG 在线推理链路图从「帮我画张 RAG 流程图」到浏览器弹出可编辑矢量图只用了 30 秒。上图是我在 Claude Code 里用一句话生成的——没有打开 draw.io、没有拖拽任何形状、没有调过任何颜色。这篇文章就来讲清楚怎么装、怎么用、怎么用好。一、这是什么draw.io MCP是一个 MCPModel 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--commandnpx--args-ydrawio/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