本期是 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——头部与腰部的差距接近两个数量级。这不是一个「赢家通吃」的赛道，原因不难理解：图表需求高度碎片化（流程图、时序图、架构图、脑图各有拥趸），且每个团队的技术栈决定了输出格式偏好。
从检索结果的玩家构成能看出这个赛道的四类供给：
「让 AI 画图」本质上是回答一个问题：布局由谁负责？三条路线给出了三种答案：
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 |
安装量赛道第一（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 不可能。适合场景：写设计文档配图、给遗留代码生成部署图。
安装量第二（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-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 安装）。
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 的人抄作业。
四款 Skill 对「token 花在哪」给出了四种不同答案，这是本期最值得带走的观察：
把四款 Skill 按「模型能否看见自己的产出」排成一条光谱，能解释大部分实战效果差异：
这对应着一个通用的 Skill 设计原则：验证层级每升一级，质量上限高一档，但依赖和成本也重一分。开环 Skill 胜在零依赖、到处能跑，闭环 Skill 胜在结果可控——你的使用场景决定该站哪边。
同为 Excalidraw 路线，awesome-copilot 规定所有文本必须用 fontFamily: 5（Excalifont），而 coleam00 的 Skill 全文规定 fontFamily: 3。同一 JSON 格式、同一赛道，两个头部作者给出了不同的「标准答案」——说明 Excalidraw 生成这个细分领域的约定还在形成期，也提醒读者：SKILL.md 里那些写得斩钉截铁的技术参数，未必有客观对错，往往只是作者踩坑后的个人选择。
# 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
图表赛道没有百万安装的头部，但这四款 Skill 恰好构成了一个完整的设计实验：同一个问题，四种约束下的四种解法。下一期（第 8 轮）我们将从本周最热门的 Skill 里提炼 SKILL.md 的写法模式，教读者写出自己的第一个 Skill。
[!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 等场景全覆盖。