draw.io发布官方Skill，可编辑AI生成的图表

你是否遇到过这样的困扰：用AI生成的流程图、架构图，想修改一个细节时，却发现根本无从下手？要么是纯图片无法编辑，要么得让AI重新生成，陷入无限循环……

2月24号draw.io官方推出的Claude Code Skill，彻底解决了这个痛点！

🔥 核心突破：AI生成“活图”，告别“一次性”

这个Skill最厉害的地方在于：直接生成原生.drawio文件。

这意味着什么？

• AI负责草稿：用自然语言描述图表，AI自动生成
• 你负责精修：用draw.io打开，每个节点都能拖拽、修改、换色
• 随时可编辑：导出的PNG/SVG/PDF文件里都嵌入了完整XML，随时恢复编辑

流程变得无比简单：

1. 告诉AI：“画个用户登录流程图”
2. AI生成.drawio文件
3. 用draw.io打开，随意修改
4. 需要时导出各种格式

🛠️ 安装使用：两步搞定

第一步：准备draw.io

• 在线版：访问app.diagrams.net，免费免注册
• 桌面版：需要自动导出功能时安装（GitHub下载）

第二步：安装Skill

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

重启Claude Code即可使用！

💡 实战演示：一句话生成微服务架构图

命令：

/drawio png 电商系统微服务架构图，包含：用户端、API网关、认证服务、商品服务、订单服务、支付服务、Redis缓存、MySQL主从数据库

结果：

• 生成ecommerce-microservices.drawio.png
• 用draw.io打开即可编辑：调整框大小、修改颜色、添加Logo、补充节点……

📊 支持格式

注意： .drawio.png是一个文件，不要删除扩展名，否则失去可编辑能力！

⚠️ 避坑指南

1. 导出图片需要桌面版：或用在线版手动导出
2. 文件名自动转英文：生成后可自行重命名
3. 双扩展名是特性：保证文件可编辑
4. 为什么不用Mermaid：Mermaid生成的是“死图”，draw.io生成的是“活图”

🎯 总结：AI画图的“最后一公里”已打通

2026年，会用AI工具的程序员效率将大幅提升。这个Skill让AI画图真正进入工作流：

• AI负责结构和草稿
• 人类负责审美和微调
• 随时可编辑，永不“一次性”

建议今天就去试试：

1. 安装Skill（两条命令）
2. 用/drawio 画一个流程图生成文件
3. 在app.diagrams.net打开体验编辑