<!-- title: 画图件四强：从10种卷到35种 -->

# 画图件四强横评：同一个赛道，四种成品形态

## 概述

「让 Claude 帮我画张图」大概是 Skill 生态里最拥挤的赛道之一。本期把这条赛道翻开，逐段读完五个画图件的 SKILL.md 原文：**chart-craft**、它的升级版 **chart-craft-plus**、输出 Mermaid 代码的 **mermaid-generator**、单点打穿架构图的 **architecture-diagram-zh**，以及唯一输出 Excalidraw 文件的英文件 **excalidraw**。核心发现有三个：其一，同一句话「画个图」，五个件给出四种完全不同的成品形态——HTML 成片、Mermaid 代码、内嵌 SVG 的网页、JSON 白板文件；其二，chart-craft 和 chart-craft-plus 并排装在同一个 skills 目录里，「自己卷出 Plus 版」的自迭代样本在生态里相当罕见；其三，五个件里有四个共享同一套审美血统和存盘路径，同源痕迹直接写在 SKILL.md 的字里行间。需要说明：本期所有引用均来自本地安装目录中 SKILL.md 原文的逐段阅读（路径见文末参考来源），社区热度数据（星标、下载量）未做线上交叉核验，评测表中该维度基于件内维护痕迹估算并已标注。

## 一、赛道全景：一个需求，四种答案

先把五个件的「成品形态」摆在一起，差异一目了然：

| Skill | 成品形态 | 图表覆盖 | 后续可编辑性 |
|-------|---------|---------|-------------|
| chart-craft-plus | 单文件 HTML（无 JS） | 5 大类 35 种 | 只能改源码 |
| chart-craft | 单文件 HTML（无 JS） | 10 种 | 只能改源码 |
| mermaid-generator | Markdown 里的 Mermaid 代码块 | 3 种 | 代码级编辑，随处渲染 |
| architecture-diagram-zh | 内嵌 SVG 的 HTML | 仅架构图 | 改 SVG 源码 |
| excalidraw | .excalidraw JSON 文件 | 4 类 + Mermaid 转换 | 拖进 Excalidraw 白板随意改 |

这四种形态对应四种使用场景，选型逻辑可以直接画成一张决策树：

```mermaid
flowchart TD
    A["画图需求进来"] --> B{"成品要什么形态"}
    B -->|贴进文档的代码| C["mermaid-generator"]
    B -->|白板里继续拖拽改| D["excalidraw"]
    B -->|截图即可分享的成片| E{"画的什么内容"}
    E -->|只画系统架构| F["architecture-diagram-zh"]
    E -->|业务到数据全覆盖| G["chart-craft-plus"]
```

值得强调的是「可编辑性」这一列的梯度：mermaid 输出的是代码，人在任何编辑器里都能改；excalidraw 输出的是白板文件，拖回 Excalidraw 里每根箭头都能拖动；两个 chart-craft 和 architecture-diagram-zh 输出的是「定稿」——浏览器打开即美，但想挪一个方块就得回源码里调坐标。这不是高下之分，而是产品哲学之分：**前者把图当成过程的起点，后者把图当成终点**。

## 二、评测对比表

按本系列统一维度打分（★ 满分 5）。社区活跃度一栏 † 标注：本期未做线上数据核验，仅依据件内维护痕迹（版本迭代、更新注释、资产完整度）估算，非官方统计。

| Skill | 功能完整度 25% | 设计质量 25% | 实战效果 20% | 上手难度 15% | 社区活跃度† 15% | 加权总分 |
|-------|------|------|------|------|------|------|
| chart-craft-plus | ★★★★★ 5.0 | ★★★★☆ 4.5 | ★★★★ 4.0 | ★★★★★ 5.0 | ★★★ 3.0 | **4.4** |
| chart-craft | ★★★☆ 3.5 | ★★★★☆ 4.5 | ★★★★ 4.0 | ★★★★★ 5.0 | ★★☆ 2.5 | **3.9** |
| architecture-diagram-zh | ★★★ 3.0 | ★★★★☆ 4.5 | ★★★★☆ 4.5 | ★★★★ 4.0 | ★★★ 3.0 | **3.8** |
| mermaid-generator | ★★★ 3.0 | ★★★☆ 3.5 | ★★★★ 4.0 | ★★★★★ 5.0 | ★★★ 3.0 | **3.6** |
| excalidraw | ★★★★ 4.0 | ★★★☆ 3.5 | ★★★☆ 3.5 | ★★★ 3.0 | ★★★☆ 3.5 | **3.6** |

## 三、逐件拆解

### chart-craft-plus：把注册表卷到 35 种的全才

打开 SKILL.md 第一眼就是一张五类三十五行的注册表——A 技术架构（架构图、云基础设施、微服务、网络拓扑、部署图、C4、威胁建模）、B 流程逻辑（流程图、BPMN、泳道、时序、状态机、决策树、数据流）、C 业务战略（商业模式画布、SWOT、价值链、OKR 树……）、D 数据可视化（ER、漏斗、桑基、热力矩阵、韦恩）、E 信息展示（信息图、概念图、要点卡片）。对比基础版的 10 种，这个扩张不是简单堆数量，配套了两处关键设计：

**一是渐进式披露。** 35 种图表如果每种都写全模板，SKILL.md 会膨胀成没法读的巨物。Plus 的解法是把模板拆进五个文件（`templates-tech.md`、`templates-process.md` 等），SKILL.md 里只留一张索引表，运行时「定位类别，读取对应 templates-类别.md」。这是官方 skill-creator 推荐的渐进式披露模式在社区件里的标准落地，值得照抄。

**二是语义配色制度化。** 「cyan=前端，emerald=后端，violet=数据库，amber=云服务，rose=安全」，并把「图例必备」写进质量检查清单第 9 项——桑基、热力、C4、威胁建模这类复杂图没有图例就没法读，这一条是踩过坑的人才会写的。

短板也很清楚：无 JS 的静态 HTML 意味着零交互；35 选 1 的自动识别，在「画个上线流程」这种模糊需求下有误判风险（流程图还是甘特图还是路线图？），好在它规定了识别不了时给 2-3 个候选让用户选。另外它让执行 `open` 命令预览——这是 macOS 专属命令，Linux 下应为 `xdg-open`，这个小疵说明文件大概率在 Mac 上打磨，跨平台考虑不足。

它的五步流水线设计得很紧凑：

```mermaid
flowchart TD
    A["用户一句话需求"] --> B["35类里识别图型"]
    B --> C["定位类别载模板"]
    C --> D["信息不足追问三次内"]
    D --> E["选风格取设计令牌"]
    E --> F["单文件HTML落盘预览"]
```

### chart-craft：被 Plus 覆盖后，基础版还剩什么价值

基础版的结构和 Plus 几乎同构：类型注册表（10 种）、三种风格预设（mono 黑白简约 / dark 深色暗调 / claude 暖色）、四步工作流、十条质量检查清单。差异只在规模。有意思的问题是：Plus 并存的情况下，基础版还有存在价值吗？有两点，一是 **启动成本**——10 种注册表一屏读完，简单需求（画个 SWOT、画个组织架构）不用翻五类模板，生成路径更短；二是 **风格系统的原始定义更干净**——三种风格的关键词映射（「简约→mono」「科技感→dark」「温暖→claude」）和默认 Claude 暖色的规则写在同一屏里，没有 Plus 为技术类图表「默认建议深色」的分支逻辑。另一个细节是它接了一个外部依赖：用户说「Stripe 风格」时，走 `npx getdesign@latest add <slug>` 拉品牌设计令牌——Skill 之间互相调用加运行时拉取外部资源，这个设计在社区件里相当超前，但也意味着断网或 npm 源不通时该路径直接失效。

### mermaid-generator：唯一交「代码」不交「成片」的

四个中文件里，只有它输出的不是网页而是 Mermaid 代码块包着的 Markdown。图表类型只有三种（Flowchart、Sequence、Class），但它的设计功力体现在约束系统上：「3-7 法则」（每个 subgraph 3-7 个节点）、节点名 3-5 个字、emoji 只在 2-3 个关键位置出现、**节点数超过 15 就拆图**——拆成主流程 + 子流程，一个文件夹里 01、02 编号加 README 索引。这组约束直接对应 Mermaid 渲染器的痛点：节点一多，自动布局必然糊成一团。它的 SKILL.md 里有一处暴露手写痕迹的笔误——「使用 `flowchart TB/TB` 方向」，TB 写了两遍，无伤大雅但说明没有经过严格校对。

它的真正卖点是**可移植性**：Mermaid 代码贴进 GitHub README、Obsidian、语雀都能直接渲染，不依赖任何本地文件。如果你的图的归宿是文档仓库而不是朋友圈截图，这个件的实用分应该比表里更高。代价是视觉效果上限低——Mermaid 的默认样式谈不上好看，它用 emoji 和 subgraph 分组做的「增强可读性」，和两个 chart-craft 的成品美学不在一个次元。

### architecture-diagram-zh：一份工程规范书，单点打穿

如果 Plus 是广度路线，这件就是深度路线：只做架构图，但把规格写到了像素级。几个能看出功力的细节：

- **箭头 z-order 规则**：「连接箭头要在 SVG 中较早绘制，这样它们会渲染在组件方框之下」，并给出 `mask-bg` 不透明遮罩技巧解决半透明填充遮不住箭头的问题——这是手写 SVG 布局最容易翻车的两处，直接写成规范；
- **垂直间距公式**：组件高 60px、组件间最小 40px 间隙，连示例坐标都算好了；
- **中文字宽适配**：「中文字符宽度约为英文的 2 倍，组件方框宽度建议 140-180px」——通用画图件不会想到这一层，这是专做中文架构图的件才有的知识；
- **双主题系统**：深浅两套 CSS 变量 + `data-theme` 切换 + localStorage 持久化，且规定「组件描边色在两种主题下保持不变」。

它是五个件里唯一允许少量 JavaScript 的（主题切换用），也因此引入了 Google Fonts 外链——牺牲了 chart-craft 坚持的「无外部依赖」，换来 JetBrains Mono 的技术质感。代价同样明显：功能宽度只有架构图一项，且手摆 SVG 坐标在大图上的重叠风险要靠那些间距规则兜底——规则写得再细，执行的是模型本身。

### excalidraw：唯一的老外围观者，卖点是「还能改」

唯一英文件，输出 `.excalidraw` JSON 文件。开头一节「Critical Format Requirements (Updated 2026-03-01)」是全文件最值钱的部分：坐标必须是 int 不能是 float、`boundElements` 必须是空数组不能是 null、`version` 必须是 1——每一条都标注「会导致 invalid file 报错」。这些显然是用真实 Excalidraw 应用一次次试出来的格式暗礁，写日期的更新注释也说明作者在持续维护（这也是活跃度一栏给它估 3.5 的依据）。

它的内容结构是四种形态的混装：Excalidraw 应用嵌入教程（React/Next.js 组件用法）、JSON 元素生成、Mermaid 转 Excalidraw 的正则解析器、还有一段相当意外的彩蛋——**内置 3GPP 5G 核心网配色规范**（AMF/SMF 用蓝、UPF 用绿、RAN 用橙，连 N2/N4 接口标注模式都有）。这份电信知识出现在通用画图件里，大概率与作者的日常领域有关，对画核心网图的人是宝藏，对其他人则是噪音——也侧面反映了社区件的「个人工具公开化」出身。

短板在实战摩擦：模型要自己算坐标、自己跑 Python 布局脚本，失败面比模板化生成大；产出还要拖进 Excalidraw 应用才能看。但它是唯一一个「生成之后人还能继续拖」的件，把 AI 定位成白板的第一笔画而非全部。

## 四、同源痕迹与触发冲突：读原文才能看到的两件事

**同源痕迹。** 四个中文件的 SKILL.md 里反复出现同一组「指纹」：chart-craft 与 chart-craft-plus 共用同一个存盘路径 `00 收件箱/画板/chart-craft/`，mermaid-generator 用 `00 收件箱/画板/mermaid流程图/`；architecture-diagram-zh 与 chart-craft-plus 的深色主题都是 `#141413` 暖黑底 + `#faf9f5` Ivory 暖白，浅色都是 `#f5f4ed` 羊皮纸，且都强调「告别冷蓝色 slate」「融合 Cursor/Claude 审美」；连「追问不超过 3 个问题、要给默认选项」的措辞都几乎一致。这些从原文直接可观察的证据指向一个判断：这四个件要么出自同一作者，要么至少在同一套审美与工作流体系里互相引用演化（本期未能联网核实作者归属，此处仅陈述文本证据）。对读者的启示是：**装这四个件约等于装了同一套「画图操作系统」的四个组件**，风格不会打架，路径也统一归到「画板」目录下。

**触发冲突。** architecture-diagram-zh 的触发条件写的是「画一个架构图 / 画个图 / 画一个流程图 / 拓扑图」，mermaid-generator 的触发表里有「生成流程图 / 画个图表 / 创建架构图」，chart-craft-plus 的注册表触发词覆盖「架构图、流程图、时序图」。也就是说，同时安装后，「画个流程图」这句话至少同时命中三个件的描述。Claude 会现场仲裁（通常按描述匹配度和上下文判断），但这正是本系列此前说过的「一段描述决定 Skill 生死」的反面教材：**赛道拥挤时，触发词的排他性设计比功能列表更决定谁被用**。mermaid-generator 用「转为 mermaid」「可视化这个流程」这类格式词做了差异化，是三者中触发设计最清醒的。

## 五、安装与上手

五个件均采用目录式安装，无需任何包管理器：

```bash
# 通用方式：把整个 Skill 目录放进用户级 skills 目录
# 目录结构必须包含 SKILL.md
cp -r <skill目录> ~/.claude/skills/<skill名>

# 验证是否被识别（以 chart-craft-plus 为例）
ls ~/.claude/skills/chart-craft-plus/SKILL.md

# 重启 Claude Code 会话后，直接用自然语言触发：
# 「用 chart-craft-plus 画一个用户增长漏斗，深色风格」
# 「把这个流程转成 mermaid」
# 「画一张 K8s 部署架构图」
```

注意两点：想复现「00 收件箱/画板」的存盘体系，需要在本机先建好这个目录，否则首次生成时模型会自己创建；excalidraw 件还需要本地能跑 Python（布局脚本）并装有 Excalidraw 应用或 VS Code 插件来打开产物。

## 六、推荐排行榜

- **综合第一：chart-craft-plus（4.4）**——35 种图表 + 渐进式披露 + 图例强制，闭眼装不亏；
- **架构图专项：architecture-diagram-zh（3.8）**——只画架构图时，它的成品精细度是五个件之最；
- **文档党之选：mermaid-generator（3.6）**——产物进 Git 仓库、进笔记软件，可移植性无可替代；
- **要继续手改：excalidraw（3.6）**——唯一能拖回白板继续编辑的件，附赠 5G 核心网配色；
- **轻量备用：chart-craft（3.9）**——已被 Plus 功能覆盖，但更短更快，简单业务图仍顺手。

一条务实建议：不必五个全装。触发词重叠会稀释「画个图」的命中精度，按「成片派装 chart-craft-plus + architecture-diagram-zh，代码派装 mermaid-generator」二选一或三选一，是这个赛道目前的最优装机单。

## 参考来源

1. [chart-craft-plus SKILL.md](/home/gprshome/.claude/skills/chart-craft-plus/SKILL.md) — 35 种图表注册表、五类模板拆分、语义配色与图例规范（本地原文逐段阅读）
2. [chart-craft SKILL.md](/home/gprshome/.claude/skills/chart-craft/SKILL.md) — 10 种图表基础版、三风格预设、getdesign 品牌令牌集成（本地原文逐段阅读）
3. [mermaid-generator SKILL.md](/home/gprshome/.claude/skills/mermaid-generator/SKILL.md) — 3-7 法则、15 节点拆分策略、Mermaid 存盘模板（本地原文逐段阅读）
4. [architecture-diagram-zh SKILL.md](/home/gprshome/.claude/skills/architecture-diagram-zh/SKILL.md) — 双主题系统、mask-bg 遮挡技巧、中文字宽与间距规范（本地原文逐段阅读）
5. [excalidraw SKILL.md](/home/gprshome/.claude/skills/excalidraw/SKILL.md) — .excalidraw 格式暗礁清单（2026-03-01 更新）、Mermaid 转换器、3GPP 配色彩蛋（本地原文逐段阅读）

> 说明：本期网络检索通道受限，未引用线上榜单与星标数据；评测表「社区活跃度」维度系依据件内维护痕迹（版本迭代、更新注释、资产完整度）做出的估算，已用 † 标注，非官方统计。文中四个中文件同源的判断仅基于 SKILL.md 文本中可观察的路径、色值与措辞证据，作者归属未经外部证实。

> [!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)