这个 GitHub 爆火的 Draw.io 图表 Skill 到底能干嘛？实测来了
这个 Skill 是什么？解决什么问题？
在日常开发和技术写作中，我们经常需要画各种图表——架构图、流程图、ER 图、序列图……以前要么手动打开 draw.io 拖拽半天，要么用 Mermaid 写代码但样式有限。
drawio-skill 做的事情很直接：你只需用自然语言描述你想要什么图，AI Agent 就会自动生成专业的 draw.io 图表文件（.drawio XML），还能直接导出为 PNG、SVG、PDF 格式。
它不是一个简单的”文字转图片”工具，而是一个完整的图表生成工作流——包含规划、生成、视觉自检、用户审阅迭代、最终导出全流程。
原始项目简介
- GitHub 仓库：Agents365-ai/drawio-skill
- ⭐ 星数：799
- 📦 许可证：MIT
- 🔄 最新提交：2026-04-29（非常活跃！）
- 📌 版本：v1.4.3
- 🖥️ 平台：macOS / Linux / Windows
这个项目专门针对 OpenClaw、Claude Code、Hermes Agent 等 AI Agent 设计，让 Agent 具备专业的图表生成能力。
核心功能亮点
1. 完整的 7 步工作流
这个 Skill 不是简单地”生成 XML 完事”，而是有一个严谨的工作流程：
- 检查依赖 — 确认 draw.io CLI 可用
- 规划 — 识别形状、关系、布局方向
- 生成 — 写入
.drawioXML 文件 - 导出草稿 — 生成预览 PNG
- 视觉自检 — Agent 用自己的视觉能力检查导出图片，自动修复问题（重叠、裁剪、连接缺失等）
- 审阅循环 — 展示给用户，收集反馈，针对性编辑 XML，反复迭代
- 最终导出 — 获批后导出所有请求格式
2. 视觉自检（Self-Check）
这是我觉得最酷的功能。Agent 生成图表后，会用自己的视觉模型（如 Claude Sonnet/Opus）读取导出的 PNG 图片，自动检测并修复这些问题：
- 形状重叠 → 自动移开 ≥200px
- 标签被裁剪 → 自动增大形状尺寸
- 连接缺失 → 验证 source/target id
- 画布外形状 → 移到正坐标
- 边穿过无关形状 → 添加路标点绕过
- 多条边堆叠 → 分布进出点
最多 2 轮自动修复，修不好再展示给用户。这比直接甩一张可能有问题的图给用户体验好太多了。
3. 6 种图表类型预设
内置了 6 种专业图表类型的样式约定：
| 类型 | 说明 |
|---|---|
| ERD | 实体关系图，数据库设计必备 |
| UML 类图 | 3 部分类框、继承/实现/组合/聚合箭头 |
| 序列图 | 生命线、同步/异步消息、激活框 |
| 架构图 | 分层泳道、服务/数据库/队列/网关 |
| ML 深度学习图 | 神经网络架构，标注张量形状，适合论文 |
| 流程图（增强） | 开始/结束椭圆、决策菱形、I/O 平行四边形 |
4. 样式预设系统
支持自定义样式预设（JSON 文件），可以：
- 从已有的
.drawio文件或 PNG 图片学习样式 - 管理预设（列出、显示、设为默认、删除、重命名）
- 内置 3 种预设：
default、corporate、handdrawn
5. 多平台兼容
- macOS：Homebrew 一键安装
- Linux：支持无头模式（xvfb-run），服务器环境也能用
- Windows：原生支持
- 浏览器回退：没有 draw.io CLI 时，通过 diagrams.net URL 在浏览器中编辑
6. 导出格式丰富
- PNG：默认格式，支持嵌入 XML（
.drawio.png双扩展名） - SVG：矢量图，适合网页嵌入
- PDF：文档交付
- JPG：通用图片格式
安装和使用方法
安装 draw.io
# macOS（推荐）brew install --cask drawio
# 验证安装draw.io --version使用方式
把它作为 Skill 安装到你的 AI Agent 后，直接说自然语言就行：
帮我画一个电商系统的架构图，包含用户端、API 网关、订单服务、支付服务、数据库画一个用户登录的流程图，从输入用户名密码开始，到验证成功/失败的不同分支生成一个博客系统的 ER 图，有用户、文章、评论三张表Linux 服务器使用
# 无头模式导出export HOME=${HOME:-/tmp}xvfb-run -a --server-args="-screen 0 1280x1024x24" \ draw.io -x -f png -e -s 2 -o diagram.drawio.png input.drawio --disable-gpu适用场景
✅ 适合：
- 技术文档中的架构图、流程图
- 数据库设计 ER 图
- 系统架构评审
- 论文中的神经网络结构图
- UML 类图、序列图
- 任何需要专业图表的场合
❌ 不适合：
- 简单列表或表格就能说明的情况
- 快速问答流程中（拖慢节奏）
- 没有安装 draw.io 且无法安装的环境（但有浏览器回退方案）
与同类工具对比
| 特性 | drawio-skill | Mermaid | 手动 draw.io |
|---|---|---|---|
| 输入方式 | 自然语言 | 代码语法 | 鼠标拖拽 |
| 样式定制 | 预设系统 | 有限 | 完全自由 |
| 自检能力 | ✅ 视觉自检 | ❌ | ❌ |
| 审阅迭代 | ✅ 针对性 XML 编辑 | ❌ 需重新写代码 | ✅ 手动调整 |
| 导出格式 | PNG/SVG/PDF/JPG | PNG/SVG | 多种 |
| 学习成本 | 零（自然语言） | 中（需学语法） | 低 |
总结：drawio-skill 在”易用性 + 专业度”之间找到了很好的平衡。比 Mermaid 更灵活（样式、布局更可控），比手动拖拽快得多（自然语言描述即可）。
个人评价
推荐指数：⭐⭐⭐⭐⭐
这个 Skill 是我见过最完整的 Agent 图表生成方案。它的亮点不在于”能画图”（很多工具都能），而在于：
- 严谨的工作流设计 — 从规划到自检到审阅，每一步都有明确的规则和容错
- 视觉自检 — Agent 自己检查自己生成的图，这个思路很聪明
- IEND 修复 — 发现了 draw.io CLI 的 PNG 导出 bug 并提供了修复方案，说明作者真的很认真
- 浏览器回退 — 考虑到了各种环境限制，优雅降级
- 持续活跃 — 昨天还在更新，说明项目在积极维护
唯一的限制是需要安装 draw.io 桌面版（约 100MB），但在大多数开发环境中这不是问题。即使没有，还有浏览器回退方案兜底。
如果你经常需要画图写文档，这个 Skill 绝对值得装上。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
音乐
暂未播放