drawio-skill
drawio-skill：让 AI 用自然语言画 draw.io 图，省掉手动拖拽。
- 它是 什么：Agent Skills 格式的 Skill，AI 把一段描述转成可编辑的 .drawio 文件。
- 核心痛点：流程图脑里清楚、手里画废；让 AI 写代码容易，画图靠拖拽。
- 典型用法：自然语言描述图 → 生成 .drawio → 2 轮视觉自检 → 导出 PNG/PDF。
- 对比 drawio-mcp：mcp 走 XML 动作点画；skill 走声明式一次性成型。
- 成熟度：官方（jgraph）+ 社区（Agents365-ai）双线并存，跨 6+ Agent 平台。
- 适用：架构图、流程图、ERD、UML 等结构清晰的图。
- 结论：不想拖拽就首选 Skill。
What：drawio-skill 是个什么东西
drawio-skill 是一个走 Agent Skills 标准的 Skill 包——Claude Code / Cursor / Codex 等 Agent 在执行任务时按需加载的指令集。
核心思路很线性：自然语言描述图 → 生成 .drawio XML → 调 Draw.io Desktop CLI 导出 PNG/PDF/SVG → AI 读导出的 PNG 找问题 → 自动修复（最多 2 轮）。
如果你还不满意，再开第 3-5 轮由你引导的定向修改（"把 Kafka 移到右边"、"给 Payment Service 换个颜色"），而不是从头重画。
它和 drawio-mcp 的差异是根本性的——
| 维度 | drawio-mcp | drawio-skill |
|---|---|---|
| 接口形态 | MCP 工具（XML 操作） | Agent Skill（自然语言 + .drawio 输出） |
| 工作方式 | 调一次工具，改一个节点 | 声明式：描述 → 一次性生成 |
| 视觉自检 | 无 | AI 读自己导出的 PNG，重叠/截断自动修 |
| 文件协作 | 客户端独占 | .drawio 文件可走 Git diff 评审 |
| 上手成本 | 需要客户端保持在线 | 装 Skill + Draw.io Desktop 即可 |
说白了：drawio-mcp 是给 AI 一双手去点 Draw.io，drawio-skill 是给 AI 一个写 .drawio 文件的秘书——你下指令，它出成品。
官方 Skill 长什么样：jgraph/drawio-mcp
画图这件事的"官方"指的是 jgraph 团队——他们既维护 Draw.io，也维护了官方仓库 jgraph/drawio-mcp。截至 2026-06 已 166 commits。
这个仓库不是单一产品，而是 4 条独立路径打包：
| 路径 | 形态 | 干什么 |
|---|---|---|
| MCP App Server | MCP App（iframe 渲染到聊天里） | 远程服 务端挂在 mcp.draw.io/mcp，也支持 Node / Cloudflare Workers 自部署 |
| MCP Tool Server | stdio MCP server（npm @drawio/mcp） | 调起浏览器 / app.diagrams.net |
| Skill + CLI | Agent Skill + CLI（无需 MCP） | AI 生成 .drawio 文件，可选 PNG/SVG/PDF 导出或浏览器链接 |
| Project Instructions | Claude Project 自定义指令（无需 install） | 把 XML 知识塞进 Project 系统提示，零依赖 |
本节聚焦第 3 条——Skill + CLI。
核心目标：AI 直接生成可编辑的 .drawio 文件，不依赖桌面客户端一直在线，导出可以走 Draw.io Desktop 也可以直接给浏览器链接。
精简后的官方 SKILL.md（路径 skill-cli/SKILL.md）：
---
name: drawio
description: 生成 .drawio 图文件，支持导出 PNG/SVG/PDF 或浏览器链接打开。
当用户说"画图 / drawio / 流程图 / 架构图 / ERD / 时序图"时使用。
---
## 工作流
1. 解析用户输入
2. 生成 draw.io XML（参考 shared/xml-reference.md）
2. 可选：CLI 导出 PNG/SVG/PDF，或给浏览器链接
3. 输出文件路径给用户
仓库布局（精简）：
jgraph/drawio-mcp/
├── mcp-app-server/ # MCP App 实现
├── mcp-tool-server/ # 原始 MCP tool 实现（npm @drawio/mcp）
├── skill-cli/ # ★ Skill + CLI 实现（含 SKILL.md）
├── project-instructions/ # Project Instructions 模板
├── shared/ # 共享 XML 生成参考（xml-reference.md）
└── CLAUDE.md
留意 shared/xml-reference.md 是整个仓库的单一可信源——所有 4 条路径都引用同一份 XML 生成规范，确保不同路径输出格式一致。
官方这条线的取舍很明确：
- 优势：jgraph 团队自己维护，跟 Draw.io Desktop 版本同步升级；XML 规范是单一可信源；4 条路径集中在一个仓库
- 代价：没有：6 类图预设、视觉自检、代码库 → 结构图、跨第三方对比文档
走的是"少即是多"路线——它的核心是"让 AI 写出能直接编辑的 .drawio 文件"，至于要怎么挑图、怎么自检，留给上层工具。
社区这一波：Agents365-ai/drawio-skill
社区这边最活跃的实现是 Agents365-ai/drawio-skill，截至 2026-06 已 152 commits / ~2.1k Stars，跨 6+ 个 Agent 平台（Claude Code / Cursor / Copilot / OpenClaw / Codex / Hermes，v1.2.0 加了 OpenCode 凑成第 7 个）。
跟官方相比，社区这版堆得厚得多，主要堆在三件事上：
6 类图预设：
| 预设 | 适用 |
|---|---|
| ERD | 数据库 schema、外键关系 |
| UML Class | 类图、对象关系 |
| Sequence | 时序图、调用链 |
| Architecture | 微服务 / 模块依赖（最常用） |
| ML/Deep Learning | 模型结构、训练流 |
| Flowchart | 业务流程、判断分支 |
两个杀手锏（官方那边都没有）：
- 代码库 → 结构图：传一个 Python / JS-TS / Go / Rust 项目，自动抽 import 图（或 Python 类层级），Graphviz 自动布局后导出
- 视觉自检：生成完调 Desktop CLI 导 PNG，AI 自己读 PNG 找 6 类问题（连线交叉 / 节点重叠 / 标签截断 / 边堆叠 / 框越界 / 对齐错位），自动改 XML 再导出，最多 2 轮
仓库布局：
Agents365-ai/drawio-skill/
├── assets/ # 打包资源（图标、模板）
├── docs/ # USAGE / COMPARISON 中英双语
├── skills/
│ └── drawio-skill/ # 唯一的 Skill 本体
│ ├── SKILL.md
│ ├── scripts/ # drawio_export.py / aiicons.py ...
│ └── references/ # 子文档（按需加 载）
├── tests/ # 21 个测试
├── CHANGELOG.md
├── scripts/update.sh # 12 小时静默查上游更新
└── README.md / README_CN.md
社区这边有两个隐藏优势：
- SKILL.md 不在仓库根而是
skills/drawio-skill/SKILL.md——这是"一个仓库管多个 Skill"的扩展位，后续要塞skills/<其他名>/不用拆仓库 docs/COMPARISON.md给了和 Mermaid / PlantUML / 纯 CLI 的逐项评估（对照表在这），不是嘴炮
另一个相邻的社区分支——next-ai-draw-io 是走协作 MCP 路线，"Agent 改一步你看一步"，跟 Skill 是不同赛道（之前写过对比），本文不展开。
通用 Skill 写作规约（最小目录 + 三件坑）已迁移到独立文章 怎么写一个 Agent Skill：3 坑 + 1 模板，跟画图没关系，本文不重复。
总结：什么时候选谁
把官方 / 社区 / 协作 MCP / 标记语言四条线摆一起看——这是本文最后一段。
四路生态对比
| 维度 | jgraph Skill + CLI | Agents365-ai | next-ai-draw-io | Mermaid |
|---|---|---|---|---|
| 出身 | 官方（jgraph） | 社区（~2.1k Star） | 社区（协作 MCP） | 标记语言 |
| 接口 | Agent Skill | Agent Skill | MCP tool | Markdown 代码块 |
| 是否需要 Draw.io Desktop | 可选（也可只输出 .drawio） | 必须（导出 PNG/PDF/SVG） | 必须（localhost 服务） | 不需要 |
| 视觉自检 | 无 | 2 轮自动 | 无 | 无 |
| 6 类图预设 | 无 | 是 | 无 | 否（每类一种 DSL） |
| 代码库 → 结构图 | 无 | 是（Python/JS-TS/Go/Rust） | 无 | 否 |
| 协作方式 | .drawio 文件（Git diff） | .drawio 文件（Git diff） | 实时（Agent 改一步你看一步） | .md 文件（Git diff） |
| 版本管理 | git-friendly | git-friendly | 无法 diff | git-friendly |
详细对比见 Agents365-ai README 的 "vs other drawio skills & tools" 小节。
5 个 30 秒判断
- 要 "一次成型 + 自动自检 + 复杂图预设" → Agents365-ai
- 要 "接近 draw.io 原生编辑 + 不强求 Desktop + 不要 MCP" → 官方 Skill + CLI
- 要 "实时协作改图" → next-ai-draw-io
- 要 "在 IDE 内联渲染" → jgraph MCP App Server
- 要 "零依赖 + 纯版本管理 + Markdown" → Mermaid
Skill vs MCP 的硬标准
| 你在意 | 用 Skill | 用 MCP |
|---|---|---|
| 图的"可读性"和"成品质量"（自检 / 预设） | ✓ | |
| Git review 和 PR 评审 | ✓ | |
| 客户端不用实时在线 | ✓ | |
| Agent 实时协作 / 改图反馈即时可见 | ✓ |
还差最后一步
跨仓库协作还没人解决。你公司可能有 50 个微服务仓库，想给每个生成"依赖图 + 演进图"，目前 Skill 还是单仓库跑。要做到仓库间联动，得自己写跨仓库脚本——等 Skill 范式把"workspace / cross-repo"建模做出来后，这个问题才会消失。
老实说到 2026 年中这段没有单一最优解——各家不重叠、各自擅长一个窄场景。选型不是看"哪个更好"，而是看你更接近成图 / 协作 / 评审哪个工作流模式。
References
- jgraph/drawio-mcp —— 官方仓库，166 commits，4 条独立路径（MCP App / MCP Tool / Skill + CLI / Project Instructions）
- Agents365-ai/drawio-skill —— 社区主流实现，MIT License，截至 2026-06 已 152 commits / ~2.1k Stars；对比小节 含对 Mermaid / PlantUML / 纯 CLI 的逐项评估
- Draw.io MCP 三种方案横评 —— 同主题 MCP 侧对照，重点在 next-ai-draw-io 的实时协作解
- Anthropic Agent Skills 官方文档 —— Skill 触发 / 加载机制
- book-to-skill —— 另一类 Skill 范式，把结构化知识拆成 Skill
- Skills Manager —— 多 AI 工具的 Skill 统一管理（中央库 + 工作区 + 预设）
- agentskills.io/specification —— Skill 文件结构的标准规范
- 怎么写一个 Agent Skill：3 坑 + 1 模板 —— 通用 Skill 写作规约（最小目录 + 三件坑），本文已抽出此节