# 图表件四条路线，同机先打一场 ## 概述 本期换个拆法：不追新星榜，把同一台机器里装着的「文字变图」赛道四件套拉到一张桌子上横评。四个 Skill——chart-craft、chart-craft-plus、mermaid-generator、article-to-excalidraw——全部来自本机一手装机文件，逐段对照其 SKILL.md 原文。核心发现有三条：同一条赛道已经裂成 Mermaid 代码、HTML 渲染、Excalidraw 画布三条技术路线；chart-craft 与 chart-craft-plus 是一对正在分家的同门；四个件的触发词高度互抢，「架构图」三个字同时命中三家。市场端热度数据本期缺席，评分全部基于装机文件本身的设计与迭代痕迹。 ## 评测对比表 | Skill | 功能完整度 25% | 设计质量 25% | 实战效果 20% | 上手难度 15% | 社区活跃 15% | 加权总分 | |-------|------|------|------|------|------|------| | chart-craft-plus | ★★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★★ | **4.50** | | chart-craft | ★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★ | **3.75** | | mermaid-generator | ★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★ | **3.75** | | article-to-excalidraw | ★★★ | ★★★★ | ★★★★ | ★★★ | ★★ | **3.30** | 口径说明：社区活跃度一项本期无法核验市场端 Star 与下载数（抓取通道受限），改按装机文件内可见的迭代痕迹折算——版本号、更新日志、文档完备度。实战效果按其工作流闭环的完整程度（质检清单、预览命令、保存规范）推断。两项均非市场实证，读者取用时请知悉。 ## 赛道盘点：一条赛道，三条技术路线 先看纵深。本机技能清单里，图表相关件远不止四个：excalidraw、excalidraw-diagram、architecture-diagram-zh、text-logic-diagram、baoyu-infographic、markdown-to-image 都在同一条货架上。本期只选四个主流代表，因为它们恰好各自占住一条技术路线： ```mermaid flowchart TD IN["同一段文字描述"] -->|流程与分支| R1["mermaid-generator"] IN -->|商务与技术图| R2["chart-craft"] IN -->|35种全类型| R3["chart-craft-plus"] IN -->|科普视频稿| R4["article-to-excalidraw"] R1 --> O1["Mermaid代码块"] O1 --> D1["笔记库原生渲染"] R2 --> O2["单文件HTML"] R3 --> O3["单文件HTML"] O2 --> D2["截图即分享"] O3 --> D2 R4 --> O4["excalidraw画布"] R4 --> O5["提词器脚本"] O4 --> D3["录屏切页"] O5 --> D3 D3 --> D4["成片交付"] ``` 三条路线的分野不在「画什么图」，在「产物归谁」：Mermaid 路线产出代码，归宿是笔记库，图随文走、版本可控；HTML 路线产出单文件网页，归宿是截图分享，像素自由但结构不可逆；Excalidraw 路线产出画布加脚本，归宿是视频产线，图本身就是拍摄现场。 ## chart-craft-plus：全类型注册表，赛道目前的完成度上限 定位是「AI 全能图表生成器」，开口一句角色设定与 chart-craft 一字不差：「把文字描述转化为设计精美、布局清晰的图表 HTML 文件……截图即可分享」。但它把注册表从 10 种扩到「5 大类 / 35 种」：A 技术架构 7 种（含 C4 模型、威胁建模、云基础设施拓扑）、B 流程逻辑 7 种（含 BPMN、泳道、状态机）、C 业务战略 10 种（含 OKR 对齐树、价值链）、D 数据可视化 8 种（含桑基、漏斗、热力矩阵）、E 信息展示 3 种。 设计上有两处真功夫。一是**语义化配色写成硬规则**：「cyan=前端，emerald=后端，violet=数据库，amber=云服务，rose=安全，slate=外部」——把工程师的心智模型直接焊进颜色 token，架构图不用读文字就能分层。二是**图例强制**：「复杂图（桑基、热力、时序、C4、威胁建模）必须附图例」，并写进了质检清单第 9 项。风格系统延续 mono/dark/claude 三套预设，且明说「所有风格均融合 Cursor/Claude/Airtable/Webflow 品牌设计精华，告别冷蓝色 slate 色系」，技术架构类未指定时默认 dark。 短板是体量：35 种类型的判断规则、品牌联动流程（依赖 brand-design-md 件加 `npx getdesign@latest` 拉取 token）全部塞进主文件，触发判断在类型重叠处（竞品分析 vs 对比表、路线图 vs 甘特图）要靠引导问题兜底，实际出图质量取决于读者答问的耐心。 ## chart-craft：同门的「精装小户型」 同门正主只有 10 种图：流程、架构、ER、商业模式画布、用户旅程、思维导图、竞品分析、SWOT、路线图、组织架构。判断逻辑写得更口语：「描述了『步骤→步骤→步骤』→ 流程图」「描述了『客户细分、价值主张、收入来源』→ 商业模式画布」——这是把每种图的**内容特征**而非关键词做成路由表，新手读一遍就懂路由为什么这么走。 它的十条质检清单是四件里最早成体系的：「中文渲染」「截图友好：在 1400px 宽度下一屏展示完整」「文件保存：路径和命名符合规范」——把「截图即可分享」这句口号拆成了可验收的条目。保存路径两者一致：`00 收件箱/画板/chart-craft/MMDD-主题.html`，生成后执行 `open` 打开浏览器，闭环完整。 短板即定位：技术类图种缺席，没有时序、没有 C4、没有云拓扑，工程场景一来就得让位给 plus。它现在的价值更像是 plus 的低配快启版——类型少、判断快、追问少，轻量场景仍然顺手。 ### 同门对决逐项账 | 对比项 | chart-craft | chart-craft-plus | |--------|-------------|------------------| | 图表类型 | 10 种，单张注册表 | 35 种，5 大类索引 | | 模板组织 | 结构速查内联主文件 | 按类拆 5 个 templates-*.md | | 技术类图种 | 无 | 14 种，默认 dark 风格 | | 配色规范 | 三风格 token | 三风格＋语义化配色 | | 图例要求 | 无硬性规定 | 五类复杂图强制 | | 共同基因 | 角色设定、保存路径、追问原则（≤3 问）、品牌联动完全同源 | 同左 | 两张注册表的措辞重合度极高，基本可以断定同源。分家方式也清晰：小弟守商务十件套，大哥吃下全部工程场景，彼此不再越界——这是赛道拥挤后最常见的和平方案。 ## mermaid-generator：最轻的件，最硬的方法论 只做三种图：flowchart、sequence、class。输出不是网页，是**带 mermaid 代码块的 Markdown 文件**，按 `00 收件箱/画板/mermaid流程图/MMDD-主题名/` 归档，复杂任务拆成「01-主流程、02-子流程」加一个 README 索引。产物直接进笔记库，Obsidian、GitHub 原生渲染，图随 Markdown 走，这是另外三家都不具备的「常驻」属性。 真正值钱的是它把节制写成了规则：「3-7 法则——每个 subgraph 3-7 个节点」「节点名称 3-5 个字」「适度使用 emoji——2-3 个关键位置即可」，拆图阈值量化到「节点数 > 15」就拆。这些数字不是装饰，是 Mermaid 图超宽翻车后总结出的工程经验，本站排版流程里同类约束一应俱全。 瑕疵也有两处。其一，设计原则原文写「使用 `flowchart TB/TB` 方向」，TB 写了两遍，方向参数的笔误直接留在主文件里——照抄示例的读者会得到一个冗余参数。其二，类型注册表只有三行，遇到「架构图」这类触发词时与 chart 系两件正面相撞，路由归属全看装机顺序和匹配权重，文件里没有任何让位或优先级声明。 ## article-to-excalidraw：唯一一条通向成片的产线 作者署名「学通信自媒体」，版本 v2.1.0，更新日志显示 2026 年 3 月 11 日一天连发 1.0、2.0、2.1 三版。它不跟你讨论图好不好看，直接交付视频拍摄现场：一次生成三件套——单文件 `.excalidraw` 画布、`teleprompter.txt` 提词器脚本、`使用指南.md` 录制说明。 设计核心是**用垂直布局硬解 Excalidraw 没有多页的死结**。原文写得坦白：「Excalidraw 不支持真正的多页面文件（如 PowerPoint）。本方案使用垂直布局＋分区背景实现」，并给出整张 Y 坐标分区表：0-500 封面、500-1300 架构区、1300-2100 流程区、2100-2600 对比区、2600-3000 场景区，滚动即翻页，Ctrl+F 搜「第X页」即定位。提词器脚本精确到秒：【3 秒】开头钩子、【30 秒】核心讲解，页数按时长给档位（短视频 4-6 页、中视频 6-10 页），连录制方案都备了双屏、单屏、画布内录三条。 最值得学的是 2.1.0 的更新日志：「修正技术描述：Excalidraw 不支持真正的多页面」——前一版吹过的能力，后一版亲手改口。Skill 文档敢给自己写勘误，比多加十种图型更稀缺。 短板在工作流上游：它是四件里唯一要求读者会开 Excalidraw、配提词器、进剪辑软件的件，上手成本天然高一档；配色也只备了科技蓝、暗色两套，远不如 chart 系的风格系统讲究。 ## 设计模式提炼：主文件该放多少货 ```mermaid flowchart TD S["SKILL.md 主文件"] -->|注册表35种| T1["按类型定位类别"] T1 -->|A类| F1["templates-tech.md"] T1 -->|B类| F2["templates-process.md"] T1 -->|C类| F3["templates-business.md"] T1 -->|D类| F4["templates-data.md"] T1 -->|E类| F5["templates-visual.md"] F1 --> H["生成单文件HTML"] ``` 四件摆在一起，正好构成 SKILL.md 写法的四档样本。**全量内联**（chart-craft）：10 种图的结构速查全塞主文件，类型少时最直观，扩到 35 种就会撑爆。**渐进式披露**（chart-craft-plus）：主文件只留 5 大类索引，每类细节下沉到 `templates-tech.md` 等 5 个分类文件，按需加载——这是官方 skill-creator 教科书里的标准解法，本机就有现成范本。**方法论内联**（mermaid-generator）：类型少不值得拆文件，把篇幅让给「3-7 法则」「拆分阈值」这类可执行约束，规则密度决定出图下限。**工程化配套**（article-to-excalidraw）：主文件一半篇幅给了坐标表、秒数表、录制方案——产物要进生产线的件，文档就得是操作手册。 给想动手写件的读者一句话：先数清楚自己的注册表会长到多大，10 种以内学 chart-craft 内联，超过 15 种学 plus 拆文件，其余篇幅一律让给约束和质检，而不是让给形容词。 ## 共存问题：触发词互抢与装法建议 四件同机必然撞车：「流程图」「架构图」同时是 chart-craft、chart-craft-plus、mermaid-generator 三家的触发词。装机前先想清楚两件事。第一，产物归宿你要哪种——要进笔记库版本可控，留 mermaid-generator；要截图分享汇报材料，留 plus（或轻量场景留 chart-craft）；要做视频，excalidraw 件不可替代。第二，留几件就口头约定路由：让 chart 系吃「商务图」「架构图」，把「流程图」「时序图」明确让给 mermaid 系，或干脆用「用 HTML 画」「用 mermaid 画」这类带路线前缀的说法强制分流。 安装路径统一：把对应 skill 目录放进 `~/.claude/skills/` 即被识别；想先逛市场再决定，可用 `npx skills find chart`、`npx skills find mermaid` 在聚合目录里搜同名上架版，装完用一句「画个用户旅程图」即可验证路由归谁。 ## 推荐排行榜 - **综合第一：chart-craft-plus（4.50）**——类型覆盖、配色规范、模板组织三项都是赛道天花板，装一件顶半条货架。 - **性价比并列第二：chart-craft / mermaid-generator（3.75）**——前者赢在快和省，后者赢在产物常驻笔记库；按归宿二选一，不必都装。 - **场景专属：article-to-excalidraw（3.30）**——通用图表不必装，但只要你的终点是视频成片，它就是唯一答案。 - **最佳设计细节**：article-to-excalidraw 的勘误式更新日志；chart-craft-plus 的语义化配色与强制图例；mermaid-generator 的拆图阈值。 - **最需回避的坑**：四件全装不路由——「架构图」三个字会让三个件同时抢答，出图风格当场精分。 ## 参考来源 1. 本机装机文件 `~/.claude/skills/chart-craft/SKILL.md` — 10 种类型注册表、三条质检清单、风格系统与保存规范的一手出处 2. 本机装机文件 `~/.claude/skills/chart-craft-plus/SKILL.md` — 5 大类 35 种注册表、分类模板索引、语义化配色与图例强制条款出处 3. 本机装机文件 `~/.claude/skills/mermaid-generator/SKILL.md` — 三种图型、3-7 法则、拆分策略与 `flowchart TB/TB` 笔误出处 4. 本机装机文件 `~/.claude/skills/article-to-excalidraw/SKILL.md` — 垂直布局坐标表、提词器脚本格式、v2.1.0 更新日志出处 5. skills.sh / skillsmp.com — 图表类 Skill 的市场热度通道；本期抓取通道受限未能取数，市场端 Star 与下载量留待下期补测 > [!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 等场景全覆盖。