# 图表赛道五强横评：四条输出路线 ## 概述 本期是第 7 轮的同赛道对比横评，选题是「文字变图」。与以往从榜单抓新面孔不同，这次把镜头对准本机 `~/.claude/skills/` 里实际装着的五个图表类 Skill：chart-craft、chart-craft-plus、mermaid-generator、text-logic-diagram、baoyu-infographic。五个样本恰好覆盖了这条赛道的全部四条技术路线——Mermaid 文本、手排 SVG、HTML+CSS 排版、AI 生图。由于五个 SKILL.md 全文都在手，本次拆解做到了逐段引用原文的程度；评分中无法核实的星数信息一律不写，社区活跃度维度改用「系内迭代信号」替代（详见表格脚注）。核心发现：这条赛道已经出现「羊皮纸+赭石」的设计语言趋同，以及一份教科书级的 v1→v2 改版对照实验。 ## 五件套速览 | Skill | 输出物 | 类型规模 | 一句话定位 | |---|---|---|---| | mermaid-generator | Mermaid 代码（.md） | 3 类 | 开发者原生，图随文档走 | | text-logic-diagram | 内嵌 SVG 的 HTML | 6 种逻辑关系 | 论述文本专属的逻辑拆图器 | | chart-craft | HTML+CSS 单文件 | 10 类 | 商务图表快枪手 | | chart-craft-plus | HTML+CSS+内联 SVG | 35 类 5 大类 | 前者的全面扩编版 | | baoyu-infographic | AI 生图 PNG | 20 版式 × 17 风格 | 唯一走图像生成路线的产品化选手 | ## 评测对比表 | 维度（权重） | chart-craft | chart-craft-plus | mermaid-generator | text-logic-diagram | baoyu-infographic | |---|---|---|---|---|---| | 功能完整度 25% | ★★★ | ★★★★★ | ★★★ | ★★★☆ | ★★★★★ | | 设计质量 25% | ★★★★ | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | | 实战效果 20% | ★★★★ | ★★★★☆ | ★★★★ | ★★★☆ | ★★★★ | | 上手难度 15% | ★★★★★ | ★★★★★ | ★★★★★ | ★★★★★ | ★★★ | | 社区活跃度* 15% | ★★★ | ★★★ | ★★★ | ★★★ | ★★★★ | | **加权总分** | **3.8** | **4.6** | **3.8** | **4.0** | **4.4** | > *脚注：五个 Skill 均为本机已装，无公开星数可核实，该维度按可观察的迭代信号评估——chart-craft 系有 v1→v2 明确迭代轨迹，baoyu-infographic 有完整的配置/备份/重试工程体系且出自社区知名作者（宝玉）之手，其余三个计基准分。 ## 主线：同一条赛道的四条输出路线 五个 Skill 输入几乎一样（一段话、一份文档），分歧全部发生在「最终交付什么」。这条光谱的本质是**确定性与表现力的交换**： ```mermaid flowchart LR T[同一输入：一段文字描述] T --> A T --> B T --> C T --> D subgraph L1[路线一：Mermaid 文本] A[识别结构] --> A1[Mermaid 代码存 .md] end subgraph L2[路线二：手排 SVG] B[判定逻辑关系类型] --> B1[按坐标公式排 SVG] end subgraph L3[路线三：HTML+CSS 排版] C[注册表匹配类型] --> C2[注入风格 token] --> C1[单文件 HTML] end subgraph L4[路线四：AI 生图] D[结构化内容] --> D1[版式×风格提示词] --> D2[图像模型出 PNG] end ``` - **Mermaid 文本**（mermaid-generator）：渲染完全确定性，图随 Markdown 进版本库、进 GitHub、进 Obsidian，可 diff 可手改，代价是表达力被语法锁死。 - **手排 SVG**（text-logic-diagram）：代码即图，渲染确定，但坐标靠模型手算，精度取决于规范写得多严。 - **HTML+CSS 排版**（chart-craft 系）：Flexbox/Grid 自适应，模型不碰像素坐标，翻车率最低；截图即分享是明确设计目标。 - **AI 生图**（baoyu-infographic）：表现力天花板，但生成不确定、不可编辑，所以它才需要全流程工程护栏。 五件没有谁是「更好的」，选型只取决于你要把图**放进哪里**：进文档选 Mermaid，进文章插图选 HTML 截图，进社交媒体选 PNG，做论证分析选手排 SVG。 ## 逐个拆解 ### chart-craft：10 类注册表 + 「不用 JS」的分享哲学 它的骨架是一张 10 类型的注册表（流程图、架构图、ER 图、商业模式画布、用户旅程、思维导图、竞品分析、SWOT、路线图、组织架构），四步工作流：识别类型 → 收集内容 → 选风格 → 生成 HTML。最见设计意图的一句是：「**用 HTML + CSS 布局，不用 Canvas 和 JS。确保截图时清晰锐利，打印友好**」——输出形态由分享场景倒推，这个决策让模型完全避开坐标计算，只做语义布局。内容收集环节的追问纪律也值得抄：「一次不超过 3 个问题」「给默认选项供选择」。短板：35 类版图里的技术图表（C4、部署图、桑基图）它一概没有，遇到「画个 K8s 部署图」只能硬套架构图；风格只给关键词不给色值，全靠 `references/style-presets.md` 补。 ### chart-craft-plus：一次教科书级的 v2 扩编 和 v1 逐段对照，能看出清晰的改版策略。**第一刀：类型扩编并分类。** 10 类变 35 类，新增 C4、威胁建模、BPMN、桑基、漏斗、KPI 看板等，并收进 A-E 五大类。**第二刀：渐进披露。** v1 把十类「图表结构速查」整段内联在 SKILL.md 里；v2 删掉速查，换成一张路由表——「A 技术架构 → `references/templates-tech.md`」，按需读一个文件。代价是生成时多一次文件读取，收益是主文件瘦身且 35 类可维护。这正是官方渐进披露原则最直观的活教材。**第三刀：军规加密。** 新增「语义化配色：cyan=前端，emerald=后端，violet=数据库，amber=云服务，rose=安全」——把配色从审美判断降级为查表操作；再新增「图例必备」，并把 v1 清单里的「文件保存」「浏览器预览」两项合并，腾出一格给图例，清单总数保持 10 项。技术架构类默认深色风格，方向也对。短板：保存路径、`open` 预览命令与 v1 完全相同，可移植性没有随扩编一起修。 ### mermaid-generator：3-7 法则与拆分阈值 全场最小的一个，只认 Flowchart / Sequence / Class 三类，但它把「克制」写成了规则：**「3-7 法则——每个 subgraph 3-7 个节点」「节点名称 3-5 个字」「emoji 2-3 个关键位置即可」**。尤其可贵的是给出了量化的拆图阈值：「节点数 > 15」「有明显的子流程」「涉及多个系统/角色」就拆成主流程 + 子流程多文件，并配 README 索引。这解决了 LLM 画图最常见的失败模式——什么都往一张图里塞。输出按 `00 收件箱/画板/mermaid流程图/MMDD-主题/` 落盘，天然融入笔记工作流。短板同样明显：三类之外（ER、甘特、桑基）全部无解，subgraph 配色示例依赖渲染器支持，GitHub 上并不着色；没有输出 HTML/图片的通道，纯文本路线的玻璃天花板。 ### text-logic-diagram：全场唯一的「排版数学」 输入域最窄、规范最精的一个。它不接「画个架构图」这类泛需求，只做一件事：把论述性文本按段落判定为六种逻辑关系（递进/流程/循环/层次/对比/矩阵），每种配一套视觉语法（阶梯式、蛇形编号、环形弧线、树形嵌套、左右对称、象限网格），多段文本拆成多张 SVG 卡片排在同一 HTML 里。它的 SKILL.md 是五件中工程精度最高的：viewBox 固定 `0 0 800 500`，阴影参数精确到 `dx=1.5, dy=1.5, stdDeviation=2`，节点字号 14px/600，连接线标注 10px——以及全场唯一的排版公式：「**中文字符宽度约为英文 2 倍，节点宽度按 14px × 字数 × 0.7 估算**」。这是对「LLM 排 SVG 必然文字溢出」这一顽疾的直接回应。它还是唯一写明主动触发条件的：「当用户提到以下场景时，主动使用此技能」。短板：手排坐标终究是高风险动作，长文本节点多时仍可能重叠；只出深浅两套同色系主题，表现力有限。 ### baoyu-infographic：把「出图」做成产品 唯一的生图路线，也是工程化程度最高的一个。核心是 **20 版式 × 17 风格的自由组合**（linear-progression、iceberg、funnel、periodic-table……配 craft-handmade、chalkboard、ikea-manual……），默认 bento-grid + craft-handmade，另给 12 组按内容类型的推荐组合降低选择成本。真正让它高出一档的是流程工程：① EXTEND.md 双层偏好（项目级优先于用户级），首次使用走引导；② 备份军规——任何要覆盖的文件先改名 `*-backup-YYYYMMDD-HHMMSS`；③ 交互合并——「Do NOT split into separate AskUserQuestion calls」，版式/画幅/语言一次问完；④ 失败自动重试一次。还有一条全场独有的数据军规：「**Preserve all source data verbatim—no summarization or rephrasing**」——信息图的第一事故是数据被模型好心改写，它明文禁止。代价：依赖可用的图像生成 Skill，有首次配置成本，PNG 不可二次编辑。 ## 同门对照：v1→v2 的三条改版经验 chart-craft 到 chart-craft-plus 的演化，是这份拆解里最值得抄进自己 SKILL.md 的部分： 1. **类型表膨胀到 10 行以上就该分类外置。** v1 的内联速查在 10 类时尚可容忍，35 类必然撑爆主文件；v2 的「类别 → 模板文件」路由表是标准解法。 2. **军规清单要置换不要增生。** v2 没有把清单从 10 项拉长，而是合并「保存/预览」换入「图例标注」——检查项数量稳定，检查内容随能力升级。 3. **给审美决策查表化。** 从 v1 的「风格关键词」到 v2 的「语义化配色 + 内联色值」，模型需要做的自由判断越少，跨次生成的稳定性越高。 ## 生态观察：一个「羊皮纸+赭石」流派正在形成 把五个文件放在一起读，会发现两个非同源的 Skill 用了几乎相同的语言：text-logic-diagram 写「融合 Cursor 暖色深底 + Claude 赭石强调色。**告别冷蓝色调**」，chart-craft-plus 写「融合 Cursor/Claude/Airtable/Webflow 品牌设计精华，**告别冷蓝色 slate 色系**」；两者的色值表高度重合——`#141413` 暖近黑、`#faf9f5` Ivory、`#f5f4ed` 羊皮纸、`#c96442` 赭石。chart-craft 系与 mermaid-generator 则共享同一套个人知识库假设：产出统一落进「00 收件箱/画板/」，生成完执行 macOS 的 `open` 命令预览。三条结论：Claude 系审美正在成为社区图表类 Skill 的默认包脉；「00 收件箱」暴露了这批 Skill 的 PARA 工作流基因，移植前先改路径；`open` 在 Linux 上不存在，照抄要换成 `xdg-open`——这是本次横评发现的唯一一个所有 HTML 系样本共有的可移植性坑。 触发设计上，五个样本给出了三种回答：text-logic-diagram 用显式触发清单主动抢话（最激进），mermaid-generator 用「用户说法 → 触发」表格被动匹配，baoyu-infographic 以斜杠命令 `/baoyu-infographic` 为第一入口（最保守）。图表类属于高意图窄场景，第三种其实最不容易误触发。 ```mermaid mindmap root((文字变图赛道)) 输出介质 Mermaid 文本 手排 SVG HTML+CSS 单文件 AI 生图 PNG 类型规模 3 类 mermaid-generator 6 种逻辑关系 text-logic-diagram 10 类 chart-craft 35 类 chart-craft-plus 20×17 组合 baoyu-infographic 设计流派 羊皮纸加赭石 17 风格画廊 emoji 克制派 ``` ## 安装与使用 五个 Skill 均已在本机 `~/.claude/skills/` 下，同款获取方式：把含 SKILL.md 的目录放进 `~/.claude/skills/<名称>/`，或用 Skills CLI 的 `npx skills add /` 模式从上游仓库安装。上手命令（均为各自 SKILL.md 原生用法）： ```bash # chart-craft / chart-craft-plus：自然语言直出 # 「画个 K8s 部署图，深色风格」「做个用户增长漏斗」 # 产物：00 收件箱/画板/chart-craft/MMDD-主题.html # mermaid-generator：文本转图，多图自动拆分落盘 # 「把这段流程转成 mermaid」「用时序图展示登录流程」 # text-logic-diagram：论述文本拆逻辑图 # 「把这篇文章拆成逻辑关系图」（默认深色主题） # baoyu-infographic：斜杠命令 + 参数化 /baoyu-infographic path/to/content.md --layout funnel --style chalkboard --aspect portrait --lang zh ``` ## 推荐排行榜 - **综合加权分**：chart-craft-plus（4.6）＞ baoyu-infographic（4.4）＞ text-logic-diagram（4.0）＞ chart-craft = mermaid-generator（3.8） - **新手第一次装**：mermaid-generator——零配置、产物进任何 Markdown 环境都渲染 - **功能覆盖王**：chart-craft-plus——35 类连威胁建模和 KPI 看板都有 - **工程化范本**：baoyu-infographic——偏好持久化、备份军规、交互合并，最像产品 - **提示词精度范本**：text-logic-diagram——唯一的排版公式与像素级规范 - **学习写 SKILL.md**：对照读 chart-craft 与 plus 两个版本，一晚胜读十篇教程 - **中文长文场景**：text-logic-diagram，字符宽度公式就是为中文生的 ## 结语 这条赛道真正的分化变量不是「支持多少种图」，而是「图最终活在什么介质里」。五个样本用四种输出路线把这题答全了，而它们共同的贡献是把画图从一次概率事件改造成一套约束系统：类型靠注册表、配色靠语义表、追问限三个、数据一字不改。想自己写一个图表 Skill 的人，先抄这套约束，再谈风格。 ## 参考来源 1. [chart-craft SKILL.md](/home/gprshome/.claude/skills/chart-craft/SKILL.md) — 本机安装版全文，10 类注册表与「不用 Canvas/JS」原则引文出处 2. [chart-craft-plus SKILL.md](/home/gprshome/.claude/skills/chart-craft-plus/SKILL.md) — 35 类五分类、语义化配色与路由表结构引文出处 3. [mermaid-generator SKILL.md](/home/gprshome/.claude/skills/mermaid-generator/SKILL.md) — 3-7 法则、15 节点拆分阈值引文出处 4. [text-logic-diagram SKILL.md](/home/gprshome/.claude/skills/text-logic-diagram/SKILL.md) — 六种逻辑关系与中文字宽公式引文出处 5. [baoyu-infographic SKILL.md](/home/gprshome/.claude/skills/baoyu-infographic/SKILL.md) — 版式×风格组合、EXTEND.md 与 verbatim 数据军规引文出处；Mermaid 渲染环境参见 mermaid 官方文档 mermaid.js.org > [!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 等场景全覆盖。