Claude Code + draw.io 官方 Skill：用嘴画图，生成的还是可编辑的”活图”！

还在为画架构图熬夜加班？Claude Code 现在能直接帮你生成可编辑的 draw.io 文件了！

说个真实的痛点：

写完技术文档，正文 30 分钟搞定，配图要 40 分钟起步。

用 Mermaid？学语法、调 DSL、对不齐，最后图出来人已经麻了。用 draw.io？拖拽半小时，换个配色全部推倒重来。截图粘贴？文档一放大全是锯齿，导出后再调……时间全耗在跟工具较劲。

最要命的是——AI 生成的图是”死”的。想改个节点？抱歉，要么让 AI 重画，要么从头手拖。

draw.io 官方出手了。

2 月 24 日，draw.io（ diagrams.net）官方发布了一款 Claude Code Skill，核心突破只有一个：让 AI 生成的图表变成”活图”——直接输出原生 .drawio 文件，随时可编辑。

它怎么做到的？

你告诉 Claude Code：”画一个电商系统微服务架构图，包含用户端、API 网关、认证服务、商品服务、订单服务、支付服务、Redis 缓存、MySQL 主从数据库。”

Claude 直接生成 ecommerce-microservices.drawio.png。注意，这个文件虽然扩展名是 .png，但里面嵌入了完整的 draw.io XML 数据。用 app.diagrams.net 打开，或者在 draw.io 桌面版打开，每一个节点、每一条连线都可以拖拽、修改、换色、添加 Logo——不需要任何额外操作。

导出的格式全部是”活”的：

• .drawio 纯 XML，不需要桌面版，随时可恢复
• .drawio.png 通用图片，但嵌入 XML，双击就能编辑
• .drawio.svg 矢量图，同样嵌入 XML
• .drawio.pdf 适合打印，也嵌入 XML

安装只要两步：

第一步：访问 app.diagrams.net（免费免注册）或下载 draw.io 桌面版。

第二步：

npx skills add jgraph/drawio-mcp --skill drawio-skill -y -g

或者手动：

mkdir -p ~/.claude/skills/drawio
# 把 SKILL.md 放入该目录

重启 Claude Code，然后用 /drawio png 你想要的图表描述 就能生成。

为什么比 Mermaid 强？

Mermaid 生成的是”一次性”图片——你想改颜色、换字体、调布局？只能让 AI 重画，陷入”生成→不满意→重画”的死循环。draw.io 生成的图，AI 负责结构和草稿，你负责审美和微调，各干各的，效率翻倍。

适合场景：
– 系统架构图 / 微服务拓扑
– 流程图、时序图、UML 图
– 网络拓扑图、云架构图（AWS/Azure/GCP）
– 技术文档配图（导出 PNG/SVG 直接用）

目前支持 Claude Code、Codex CLI、Cursor 等主流 AI 编程工具。官方维护，更新稳定。

GitHub：https://github.com/jgraph/drawio-mcp

GitHub: https://github.com/jgraph/drawio-mcp