为什么选择这个 Skill
唯一能自动读取输出并在展示前自动修复的纯 SKILL.md 方案。
6 种图表预设
ERD、UML 类图、序列图、架构图、ML/深度学习、流程图 — 每种都有预设形状、样式和布局规范。
ML / 深度学习
Transformer、CNN、LSTM 架构，带张量形状标注 (B, C, H, W)。专为 NeurIPS、ICML、ICLR 论文打造。
自检循环
读取导出的 PNG，检测 6 类问题（重叠、标签裁切、连线堆叠），在展示给你之前自动修复。
动画连接线
添加 flowAnimation=1 即可在箭头上显示移动动画。适合数据流和管道图的 SVG 导出。
5 大平台、零配置
Claude Code、OpenClaw、Hermes、Codex、SkillsMP — 仅需一个 SKILL.md + draw.io 桌面版，无需 MCP、Node.js。
浏览器降级
没有桌面 CLI？自动生成 diagrams.net URL，在浏览器中查看和编辑图表。
示例展示
不同拓扑的清晰连线路由 — 线条不会穿越无关形状。
星形拓扑
7 个节点 — 中央消息代理 + 6 个微服务辐射排列
分层流程
10 个节点、4 层 — 交叉连线清晰路由
环形 / 循环
8 个节点 — CI/CD 流水线，含闭合回路和分支
对比原生智能体
使用本 skill 与直接提示 LLM 的区别。
| 功能 | 原生智能体 | 本 Skill |
|---|---|---|
| 导出后自检 | ✗ | ✓ 2 轮自动修复 |
| 迭代反馈循环 | ✗ | ✓ 5 轮定向编辑 |
| 图表类型预设 | ✗ | ✓ 6 种预设（ERD、UML、序列、架构、ML、流程） |
| ML 模型图 | ✗ | ✓ 张量标注、层配色 |
| 动画连接线 | ✗ | ✓ flowAnimation=1 |
| 网格对齐布局 | ✗ | ✓ 10px 对齐 |
| 按复杂度分级间距 | ✗ | ✓ 200–350px |
| 配色方案 | 随机 | ✓ 7 色语义系统 |
| 连线路由规则 | 基础 | ✓ 走廊 + waypoints + 分布 |
| 容器/分组 | ✗ | ✓ Swimlane + group + 自定义 |
| 嵌入式导出 | ✗ | ✓ --embed-diagram |
| 浏览器降级 | ✗ | ✓ diagrams.net URL |
| 自动启动桌面版 | ✗ | ✓ 导出后打开 .drawio |
安装
选择你的平台，10 秒搞定。
# 全局安装（所有项目可用） git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill # 项目级安装 git clone https://github.com/Agents365-ai/drawio-skill.git .claude/skills/drawio-skill
# 通过 ClawHub 安装 clawhub install drawio-pro-skill # 手动安装 git clone https://github.com/Agents365-ai/drawio-skill.git ~/.openclaw/skills/drawio-skill
# 通过 SkillsMP CLI skills install drawio-skill
# 通过 ClawHub CLI clawhub install drawio-pro-skill
# 用户级安装 git clone https://github.com/Agents365-ai/drawio-skill.git ~/.agents/skills/drawio-skill # 项目级安装 git clone https://github.com/Agents365-ai/drawio-skill.git .agents/skills/drawio-skill