<!-- title: 让Claude会画图：四款图表Skill横评 -->

# 让 Claude 会画图：四款图表 Skill 横评，三条技术路线的分野

## 概述

本期是 Skills 生态第 7 轮拆解，选了一个此前从未覆盖、但每个开发者都用得上的赛道：**图表生成**。我们在 skills.sh 上以 "diagram" 为关键词检索，得到约 100 个结果，从中选出安装量与设计思路最有代表性的四个：design-doc-mermaid（31.5K 安装）、excalidraw-diagram-generator（27.5K）、baoyu-diagram（12.8K）、excalidraw-diagram（7.0K）。核心发现是：同一个需求背后存在**三条技术路线**（Mermaid 文本 DSL、Excalidraw 专有 JSON、手写 SVG），而四款 Skill 的真正差距不在功能列表，而在「**是否让模型看见自己画的图**」和「**token 花在哪里**」这两个设计决策上。

## 赛道概览：一个没有头部的长尾市场

先看大盘。skills.sh 当前总榜头部是 find-skills（3.0M 安装）、grill-me（911.2K）、frontend-design（796.7K），而图表赛道里安装量最高的 design-doc-mermaid 也只有 31.5K——**头部与腰部的差距接近两个数量级**。这不是一个「赢家通吃」的赛道，原因不难理解：图表需求高度碎片化（流程图、时序图、架构图、脑图各有拥趸），且每个团队的技术栈决定了输出格式偏好。

从检索结果的玩家构成能看出这个赛道的四类供给：

- **大厂社区仓库**：github/awesome-copilot 一次贡献了 excalidraw-diagram-generator（27.5K）和 draw-io-diagram-generator（2.4K）两款；
- **专业公司**：安全公司 trailofbits 有 diagramming-code、crypto-protocol-diagram（各约 2.8K/2.7K）；
- **SaaS 厂商引流**：eraserlabs（eraser-diagrams 2.6K 及 AWS/Azure/Terraform 系列）、miroapp（miro-diagram 180）、甚至国产的 ProcessOn（processon-diagram-generator 392）和万兴 edrawmax-diagram（181）都进场了；
- **个人开发者**：宝玉（baoyu-diagram）、coleam00（excalidraw-diagram）等。

## 三条技术路线：同一个问题的三种答案

「让 AI 画图」本质上是回答一个问题：**布局由谁负责？**三条路线给出了三种答案：

```mermaid
flowchart TB
    subgraph M["Mermaid 路线：布局交给渲染引擎"]
        A[自然语言] --> B[LLM 生成文本 DSL]
        B --> C[mermaid-cli 语法校验]
        C --> D[渲染引擎自动布局]
    end
    subgraph E["Excalidraw 路线：LLM 自己算坐标"]
        F[自然语言] --> G[LLM 计算 x/y 生成 JSON]
        G --> H[渲染 PNG 让模型看图]
        H -->|不合格| G
    end
    subgraph S["SVG 路线：LLM 手写矢量代码"]
        I[自然语言] --> J[LLM 手算布局写 SVG]
        J --> K[浏览器直接嵌入/暗色自适应]
    end
```

Mermaid 路线最省 token、语法错误可机器校验，但布局被引擎锁死；Excalidraw 和 SVG 路线把布局权交给模型，上限更高，但坐标计算成了最大的出错点。四款评测对象恰好覆盖了这三条路线。

## 评测对比表

| Skill | 仓库 | 安装量 | 功能完整度 25% | 设计质量 25% | 实战效果 20% | 上手难度 15% | 社区活跃度 15% | 加权总分 |
|---|---|---|---|---|---|---|---|---|
| **baoyu-diagram** | jimliu/baoyu-skills | 12.8K | ★★★★ | ★★★★★ | ★★★★ | ★★★ | ★★★★★ | **4.25** |
| **excalidraw-diagram-generator** | github/awesome-copilot | 27.5K | ★★★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★★ | **4.20** |
| **design-doc-mermaid** | SpillwaveSolutions | 31.5K | ★★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★ | **3.90** |
| **excalidraw-diagram** | coleam00 | 7.0K | ★★★ | ★★★★★ | ★★★★ | ★★ | ★★★ | **3.55** |

## 逐个拆解

### design-doc-mermaid：把渐进式披露做成教科书的 Mermaid 路线

安装量赛道第一（31.5K），自称「Mermaid Architect v2.0」。它最大的亮点不在画图本身，而在 **SKILL.md 的分层架构**：主文件只放一棵「决策树」，判断用户要活动图、部署图、架构图还是时序图后，才按需加载 2-5KB 的专项指南（`references/guides/diagrams/` 下四类），而不是把全部文档塞进上下文。作者自述这样把单次生成的 token 消耗从约 10,000 降到约 2,000（官方数据，未经独立验证）。配套的 `extract_mermaid.py` 能从 Markdown 里抽出、校验、批量转 PNG/SVG，`troubleshooting.md` 收录了 28 种常见报错——这是四个里唯一认真处理「Mermaid 语法为什么渲染失败」的。短板也明确：代码转图的框架示例只完成了 Spring Boot，FastAPI/React 还在「进行中」，README 的目录树标注与完成状态清单存在自相矛盾的漂移；布局完全交给 Mermaid 引擎，想精确控制视觉 basically 不可能。适合场景：写设计文档配图、给遗留代码生成部署图。

### excalidraw-diagram-generator：来自 GitHub 官方组织的开环生成器

安装量第二（27.5K），出品方是 github/awesome-copilot——GitHub 官方组织下的社区精选仓库，这也意味着它从诞生起就是跨 Agent 的（Copilot 同样消费）。抓取其 SKILL.md 原文，几个设计值得逐条看：**description 里直接内嵌六个带引号的触发短语**（"create a diagram"、"make a flowchart"、"visualize a process"……），最大化被路由命中的概率；支持 9 种图类型，每种配「用户意图 → 图类型 → 关键词」的判定表；硬性规定所有文本用 `fontFamily: 5`（Excalifont），这条规则在全文重复了四次——用重复对抗模型遗忘，是很老练的提示词工程。最有价值的是它的 **icon 库 token 策略**：AWS/GCP 架构图需要真实图标，但每个图标的 JSON 有 200-1000 行，直接读会爆上下文，于是它用 Python 脚本把图标按坐标注入文件，明确标注理由是「图标数据永不进入 AI 上下文」。短板：它是**开环**的——模型生成 JSON 后靠一份 8 项 checklist 自查，但从头到尾没有「看」过自己画的图，重叠、溢出这类视觉缺陷只能靠间距公式（水平 200-300px）预防。

### baoyu-diagram：手写 SVG 路线，description 设计的范本

宝玉的 baoyu-skills 仓库本身有 25.2K star、732 次 commit、20+ 个 Skill，是个人开发者 Skill 仓库的天花板。baoyu-diagram 的路线最激进：**不调用任何图像生成模型，Claude 直接手写 SVG 代码**，布局坐标自己算。SKILL.md 里那张「触发动词表」是四款中最好的 description/分派设计——「walk through、steps、lifecycle」派给 flowchart，「protocol、handshake、OAuth」派给 sequence，「how does X work、intuition」派给 illustrative，把读者需求动词直接映射到图类型。工作流是「分析素材 → 提出拆图方案 → 用户确认一次 → 批量生成」，输出自包含 SVG，内嵌 `@media (prefers-color-scheme: dark)` 样式块，同一文件在亮暗两种模式下都正确渲染——这是发布级细节。短板在生态侧：装它要 `npx skills add jimliu/baoyu-skills`，README 自己都警告「仓库有 20+ 个 Skill，别全装，会增加每次运行的上下文负担」，只想要画图的用户需要手动拷贝单个目录。设计系统方面它也在 Credits 里注明灵感来自 Cocoon-AI 的 architecture-diagram-generator（该 Skill 在 skills.sh 上有 1.5K 安装）。

### excalidraw-diagram：唯一让模型「睁眼」的闭环设计

coleam00 的这款安装量最低（7.0K），但 SKILL.md 是四份中**设计哲学最完整**的一份，逐段读下来像一篇视觉设计方法论：开篇立原则「图应该论证，而不是展示」，配套「同构测试」（删掉所有文字，仅凭结构能否传达概念？）；要求技术图必须先查真实协议的事件名、JSON 格式，把「Bad: Protocol → Frontend / Good: AG-UI streams events (RUN_STARTED, STATE_DELTA)」作为正反例；图案库给出 fan-out、convergence、timeline 等九种视觉模式，规定「容器里的文本不超过 30%，其余用自由浮动文本加字号分层」。工程上它对 LLM 约束的认知最诚实：明确写出「Claude 单次输出上限约 32,000 token，整图必须分段生成」，用描述性字符串 ID（`"trigger_rect"`）和分段编号种子（100xxx/200xxx）避免跨段引用冲突。最关键的差异点：**强制的渲染-查看-修复循环**——生成后必须用 Playwright 把 `.excalidraw` 渲染成 PNG，用 Read 工具看图，按缺陷清单修，通常迭代 2-4 轮。代价是上手成本：要装 uv 和 chromium。这份 SKILL.md 的 27 项质量清单本身就值得任何想写 Skill 的人抄作业。

## 横向分析一：四种 token 经济学

四款 Skill 对「token 花在哪」给出了四种不同答案，这是本期最值得带走的观察：

1. **知识按需加载**（design-doc-mermaid）：50KB 全量文档 → 按决策树加载 2-5KB 专项指南；
2. **数据出上下文**（awesome-copilot）：图标 JSON 用脚本注入，模型只出坐标指令；
3. **输出分段**（coleam00）：承认 32K 输出上限，把大图拆成多个小节逐段写入；
4. **数据侧整体最省**（baoyu-diagram / Mermaid 路线）：文本 DSL 和 SVG 本身信息密度高，根本不需要庞大的资源文件。

## 横向分析二：反馈闭环光谱

把四款 Skill 按「模型能否看见自己的产出」排成一条光谱，能解释大部分实战效果差异：

- **纯开环**（awesome-copilot）：checklist 自查，模型盲画；
- **语法级反馈**（design-doc-mermaid）：mermaid-cli 验证语法对错，但布局交给引擎，无从谈起视觉反馈；
- **零反馈**（baoyu-diagram）：手算坐标直接交付，赌的是设计系统约束足够强；
- **视觉级反馈**（coleam00）：渲染 PNG → 看图 → 修，唯一的真闭环。

这对应着一个通用的 Skill 设计原则：**验证层级每升一级，质量上限高一档，但依赖和成本也重一分**。开环 Skill 胜在零依赖、到处能跑，闭环 Skill 胜在结果可控——你的使用场景决定该站哪边。

## 一个尚未定论的细节：fontFamily 之争

同为 Excalidraw 路线，awesome-copilot 规定所有文本必须用 `fontFamily: 5`（Excalifont），而 coleam00 的 Skill 全文规定 `fontFamily: 3`。同一 JSON 格式、同一赛道，两个头部作者给出了不同的「标准答案」——说明 Excalidraw 生成这个细分领域的约定还在形成期，也提醒读者：**SKILL.md 里那些写得斩钉截铁的技术参数，未必有客观对错，往往只是作者踩坑后的个人选择**。

## 安装命令汇总

```bash
# baoyu-diagram（装完建议只保留 skills/baoyu-diagram 目录）
npx skills add jimliu/baoyu-skills

# excalidraw-diagram-generator（awesome-copilot 仓库内按提示选择该 skill）
npx skills add github/awesome-copilot

# design-doc-mermaid（官方 README 推荐的两种方式）
npx skills add SpillwaveSolutions/design-doc-mermaid
# 或：skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid
# 或：git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ~/.claude/skills/

# excalidraw-diagram（需手动克隆 + 渲染依赖）
git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium
```

## 推荐排行榜

- **综合第一：baoyu-diagram** —— 触发词设计、发布级输出细节、活跃维护三项都顶格，适合要往文章/文档里放正式图的人；
- **开箱即用第一：excalidraw-diagram-generator** —— 零依赖、九种图型、可编辑产物，团队统一配给所有人用的首选；
- **工程严谨度第一：design-doc-mermaid** —— 渐进式披露架构是最值得抄的 SKILL.md 范本，写设计文档场景无对手；
- **质量上限第一：excalidraw-diagram** —— 唯一闭环，肯花 token 就能拿到「看过自己作品」的图，教学/演示内容首选。

图表赛道没有百万安装的头部，但这四款 Skill 恰好构成了一个完整的设计实验：同一个问题，四种约束下的四种解法。下一期（第 8 轮）我们将从本周最热门的 Skill 里提炼 SKILL.md 的写法模式，教读者写出自己的第一个 Skill。

## 参考来源

1. [skills.sh — diagram 关键词搜索结果](https://www.skills.sh/search?q=diagram) — 本文全部安装量数据的来源，约 100 个图表类 Skill 的排名
2. [skills.sh 首页与总榜](https://skills.sh) — 大盘头部数据（find-skills 3.0M、grill-me 911.2K 等）与 Vercel 生态背景
3. [SpillwaveSolutions/design-doc-mermaid](https://github.com/SpillwaveSolutions/design-doc-mermaid) — 决策树架构、按需加载指南、脚本与模板结构
4. [github/awesome-copilot — excalidraw-diagram-generator SKILL.md 原文](https://raw.githubusercontent.com/github/awesome-copilot/main/skills/excalidraw-diagram-generator/SKILL.md) — 九种图型、fontFamily 规则、icon 库 token 策略
5. [coleam00/excalidraw-diagram-skill](https://github.com/coleam00/excalidraw-diagram-skill) — 「论证式图表」哲学、分段生成策略与渲染校验循环（含 SKILL.md 全文）
6. [JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills) — baoyu-diagram 的 SVG 手写路线、触发动词表与仓库活跃度数据

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)