跟 Claude 说一声，图就画好了：/drawio 在 Claude Code 里直接出图

你在跟 Claude Code 描述系统架构。它回复了一堆 ASCII art，差不多能看，但总觉得差点意思。你心想：“要是能直接让它画张图就好了。”

可以。

draw.io 的 Claude Code skill 增加了一个 /drawio 命令，把自然语言直接变成 .drawio 图表文件。描述你想要什么，Claude 生成 XML、写文件、需要的话还能导出 PNG/SVG/PDF。不需要 MCP 服务、不需要 API 密钥、不需要跑一个独立的进程。

这个 Skill 跟其他方式有什么不同

它就是一个 SKILL.md 文件，扔进 Claude Code 的 skills 目录就行。你在对话里输入 /drawio，Claude 读 skill 指令，生成 mxGraphModel XML，写到 .drawio 文件。如果要导出 PNG/SVG/PDF，它还会调用 draw.io 桌面 CLI 的 —embed-diagram 模式，产出一个既能看图又能重新编辑的文件。

在 drawio-mcp 项目里，一共有四种集成方式：

• MCP App Server — 在 Claude.ai 和 VS Code 里内嵌交互式图表，通过托管端点 mcp.draw.io 提供服务
• MCP Tool Server — 在浏览器中打开图表，支持 XML、CSV 和 Mermaid 三种格式
• Skill + CLI — 在 Claude Code 本地生成 .drawio 文件，不需要 MCP 服务
• Project Instructions — 在 Claude Project 里贴一段提示词，零安装，通过 Python 生成 draw.io 链接

Skill 方案是本地开发最简单的。没有服务进程、没有端口管理、不需要配置 MCP。一个文件加一个斜杠命令。

适合谁用

架构文档 — 在讨论架构的过程中让 Claude 直接出图。它用的就是刚才对话里建立起来的上下文，图不会偏离讨论。

数据库 Schema 可视化 — Claude 帮你设计完 schema，顺带让它生成 ER 图。图基于它刚写的真实 schema，不是凭记忆画的。

API 接口设计 — 设计评审时用 /drawio 生成端点交互图。Claude 已经看过代码了，图反映的是真实实现。

PR 文档 — 为 Pull Request 生成改动前后的架构对比图。导出的 PNG 直接贴进 PR 描述。

注意这些限制

导出需要 draw.io 桌面版。Skill 永远能写 .drawio 文件，但 PNG/SVG/PDF 导出需要 draw.io 桌面应用自带的 CLI。没有它，你拿到的是 .drawio 文件 —— 能在应用里编辑，但不如图片方便分享。

XML 质量取决于参考文档。Claude 依据 drawio-mcp 仓库里的共享 XML 参考来生成图表。复杂布局、大量重叠连线可能需要手工调整。npx @drawio/postprocess 可以优化连线路由，但不是必须的。

不是所有图表都适合用这个。头脑风暴随手画的流程图，纸笔更快。Skill 的价值在于图表需要准确、可版本管理、并且基于代码生成。

安装

把 skill 文件复制到 Claude Code 的 skills 目录。就这些。

全局安装（所有项目）：

mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md

项目级安装：

mkdir -p .claude/skills/drawio
cp drawio/SKILL.md .claude/skills/drawio/SKILL.md

如果需要导出 PNG/SVG/PDF，再安装 draw.io Desktop：https://www.drawio.com

整个安装过程到此结束。没有 npm install、没有 MCP 配置、没有后台服务。

使用方法

在 Claude Code 里直接使用 /drawio 斜杠命令：

/drawio create a flowchart for user login

需要导出图片格式，在请求里说明：

/drawio png flowchart for user login

/drawio svg: ER diagram for e-commerce

/drawio pdf architecture overview

Claude 生成 XML、写文件、打开结果。文件命名遵循固定规则：

• /drawio create a flowchart for user login -> login-flow.drawio
• /drawio png flowchart for user login -> login-flow.drawio.png
• /drawio svg: ER diagram for e-commerce -> er-diagram.drawio.svg

导出版本会自动删除中间的 .drawio 文件，因为 PNG/SVG/PDF 里已经嵌入了完整 XML。

也可以提更复杂的需求：

/drawio sequence diagram for API auth

/drawio png class diagram for the models in src/

背后的工作流程

你输入 /drawio 之后，Claude 做了三件事。

第一步，读取 skill 指令。指令里包含了从 drawio-mcp 仓库引用的共享 XML 参考 —— 覆盖 cell 类型、样式属性、连线路由、容器、图层和暗色模式。

第二步，生成 mxGraphModel XML：

<mxGraphModel adaptiveColors="auto">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    ...
  </root>
</mxGraphModel>

第三步，写入文件。如果需要导出，调用 draw.io 桌面 CLI：

drawio -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio
}

从自然语言到图表文件，整个流程在一次 Claude Code 交互中完成。

### 实战：边聊边出架构图

假设你在跟 Claude Code 讨论一个微服务应用的架构：

你：/drawio png architecture for my microservices app with api-gateway, user-service, payment-service, and a shared database

Claude 生成 .drawio 文件，把所有服务用盒子表示，按网格排列，标注名称。从 api-gateway 到各个服务画连线，再从服务到数据库画连线。生成完成后自动导出 PNG。整个过程几秒钟。你没打开过 draw.io 一次。

---

draw.io skill 把 Claude Code 变成了一个能听懂你架构的画图工具。描述系统，拿到文件。

如果你已经在用 Claude Code 写代码，加一个 /drawio 只是复制一个文件的功夫。问题是为什么还没做。

GitHub: https://github.com/jgraph/drawio-mcp
Skill 文档: https://github.com/jgraph/drawio-mcp/blob/main/skill-cli/README.md
draw.io 桌面版: https://www.drawio.com