## 概述 前端的尽头不只有页面与组件。当一句"画个架构图""把这段话转成逻辑图"就能落地成可独立交付的视觉成品，图表生成类 Skill 就成了 Claude Code 生态里最被低估的隐形赛道。本期第 2 轮评测聚焦"文字 / 指令 → 可视化产物"这一细分链路，横评 7 款代表性引擎：从 35+ 图表类型全覆盖的 `chart-craft-plus`，到专攻语义逻辑拆解的 `text-logic-diagram`，再到双主题架构图 `architecture-diagram-zh`、手绘风的 `excalidraw-diagram`、流程图老牌 `mermaid-generator`、信息图 `baoyu-infographic`，以及基础版 `chart-craft`。 评测发现：这条赛道的分化已非常明显——通用型拼图库广度，语义型拼逻辑深度，手绘型拼协作手感，架构型拼工程严肃性。对于想做付费产品或训练营课程的人而言，真正有定价空间的不是"会画图"，而是"能从一段废话里抽出可落地的逻辑结构"。 ## 评测总览表 | Skill | 图表广度 | 输出格式 | 核心差异化 | 功能 | 上手 | 变现 | 训练营 | 社区 | 综合 | |------|---------|---------|-----------|------|------|------|--------|------|------| | chart-craft-plus | 35+ 类 | HTML | 全能 + 3 视觉风格 | ★★★★★ | ★★★★★ | ★★★★☆ | ★★★★★ | ★★★☆☆ | ★★★★☆ | | text-logic-diagram | 6 种关系 | SVG | 文本语义逻辑拆解 | ★★★★☆ | ★★★★☆ | ★★★★★ | ★★★★★ | ★★★☆☆ | ★★★★☆ | | architecture-diagram-zh | 架构专项 | HTML+SVG | 双主题切换 + 中文 | ★★★★☆ | ★★★★☆ | ★★★★☆ | ★★★★☆ | ★★★★☆ | ★★★★☆ | | excalidraw-diagram | 手绘全能 | .excalidraw JSON | 自然语言 + 可编辑 | ★★★★☆ | ★★★★★ | ★★★☆☆ | ★★★★☆ | ★★★★★ | ★★★★☆ | | mermaid-generator | Mermaid 全系 | Mermaid/JSON | Obsidian 画板集成 | ★★★★☆ | ★★★★★ | ★★★☆☆ | ★★★★☆ | ★★★★★ | ★★★★☆ | | baoyu-infographic | 信息图 | 图片 | 强信息密度视觉 | ★★★★☆ | ★★★★☆ | ★★★★★ | ★★★☆☆ | ★★★★☆ | ★★★★☆ | | chart-craft | 基础图表 | HTML | 轻量入门 | ★★★☆☆ | ★★★★★ | ★★★☆☆ | ★★★☆☆ | ★★★☆☆ | ★★★☆☆ | ## 逐个深度评测 ### 1. chart-craft-plus —— 全能图表工厂 来源：社区通用图表 Skill 扩展版。触发词极宽："画个 XX 图""生成 XX 图""做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"。它把图表横跨技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别，一键产出独立 HTML 文件。 核心演示：丢一句"做一个商业模式画布"，它会先归类（业务战略类），再选样式，最后落地 HTML。内置 3 种风格——黑白简约、深色暗调、Claude 暖色，并支持品牌风格扩展，说一句"换成 XX 风格"即可切换。 - 功能完整度 ★★★★★：35+ 类目是本期最广，几乎没有"画不出来"的常见图。 - 上手难度 ★★★★★：触发词白名单覆盖到几乎不需要学。 - 变现潜力 ★★★★☆：天然适合做"企业图库 + 品牌皮肤订阅"，但广度也是双刃剑——通用意味着易被复制。 - 训练营适用性 ★★★★★：一节课演示一种图，35+ 类目能撑起一整期课程。 - 社区活跃度 ★★★☆☆：扩展版偏新，生态尚未沉淀大量二次创作。 变现思路是把它拆成"行业图库"——金融 KPI 看板、教育 OKR 树、医疗威胁建模，按行业打包成付费模板。竞品上，它比 `diagram-architect`（5 主题 HTML）图库更宽，但严肃工程感稍弱。 ### 2. text-logic-diagram —— 把废话抽成逻辑 来源：中文语义逻辑图 Skill。这是本期最具"智力含量"的一款。它不是把你给的语法画出来，而是**先读懂一段话的逻辑**，再选择递进、流程、循环、层次、对比、矩阵六种关系之一，落地成精准的 SVG 逻辑图。支持中文，一次可拆多张。 核心演示：输入"先做需求调研，再做原型，原型过了才开发，开发完压测，压测不过回炉"，它会识别为"流程 + 循环回退"，产出带回流箭头的 SVG。输入对比性论述，它出矩阵或对比图。 - 功能完整度 ★★★★☆：覆盖面不如 chart-craft-plus，但逻辑深度独一份。 - 上手难度 ★★★★☆：需要喂的是有逻辑的段落，而非现成结构，有一定输入门槛。 - 变现潜力 ★★★★★：咨询师、产品经理、培训师的刚需——把零散表达结构化是高客单服务，可包装成"汇报图生成器"。 - 训练营适用性 ★★★★★：极佳的"结构化思维"教学载体，能直接当一节逻辑训练课。 - 社区活跃度 ★★★☆☆：小而精，知道的人不多，正是先发红利窗口。 它是本期最值得做付费产品的候选：逻辑拆解 + 中文 SVG 在通用市场几乎无对手，唯一竞品是自己手画，定价空间来自"省掉半小时整理思路"。 ### 3. architecture-diagram-zh —— 工程严肃派架构图 来源：中文系统架构图 Skill。专为系统架构图、基础设施拓扑、云架构、安全架构、网络拓扑设计，输出独立 HTML（内含 SVG），内置深色 / 浅色双主题切换按钮，标注全中文。 核心演示：描述一个微服务 + Redis + 消息队列 + 网关的拓扑，它产出可交互切换主题的 HTML，能直接发给团队评审。相比纯图，它的可交互性（一键切主题）让它更像"交付物"而非"截图"。 - 功能完整度 ★★★★☆：架构专项深度够，但跳出架构域能力有限。 - 上手难度 ★★★★☆：需要用工程语言描述组件关系。 - 变现潜力 ★★★★☆：企业 IT 评审、售前方案场景刚需，可做"架构图代出"服务。 - 训练营适用性 ★★★★☆：架构师课程的标准件，但受众偏窄。 - 社区活跃度 ★★★★☆：架构图是技术圈高频需求，传播面广。 竞品是市面上 5 主题的 HTML 架构图 Skill（如 diagram-architect）和 Cloudflare 风的 technical-svg-diagrams。它的优势在中文原生与主题切换闭环，劣势在风格数量少于 diagram-architect 的 5 套。 ### 4. excalidraw-diagram —— 手绘感的协作 来源：基于 `coleam00/excalidraw-diagram-skill` 的中文生态版本。从自然语言生成 Excalidraw JSON，输出 `.excalidraw` 文件，手绘风格，流程图 / 架构图 / 关系图 / 思维导图皆可，且**生成后可手动二次编辑**。 核心演示：一句"画一个用户下单到支付的流程"，得到一份手绘风流程图，拖拽、改字、加箭头全在 Excalidraw 里完成，团队成员可实时协作。 - 功能完整度 ★★★★☆：手绘域内几乎全能。 - 上手难度 ★★★★★：自然语言输入，零学习成本。 - 变现潜力 ★★★☆☆：Excalidraw 本身开源免费，纯卖图不成立，适合做"工作流 / 模板"而非成品。 - 训练营适用性 ★★★★☆：白板式讲解课程的绝佳素材生成器。 - 社区活跃度 ★★★★★：Cole Medin 的原版在 Claude Code 社区热度极高，衍生生态最成熟。 它和 `article-to-excalidraw`（文章转多区域手绘 + 提词器）是同源不同向：本款单图精修，那款多图成片。变现上别卖图，卖"手绘模板包"或嵌入到知识管理产品里。 ### 5. mermaid-generator —— 老牌稳态 来源：文本 / 工作流 / 逻辑 → Mermaid 流程图，支持 flowchart、sequence、class 等多类型，自动保存到 Obsidian 画板目录并按日期 / 主题分类。 核心演示：把一段会议纪要或 SOP 文字丢进去，它产出 Mermaid 源码并落盘 Obsidian。由于 Mermaid 是 GitHub、Notion、Obsidian 原生渲染格式，产物可直接贴进任何地方。 - 功能完整度 ★★★★☆：Mermaid 能表达的它都能做。 - 上手难度 ★★★★★：输入门槛最低，格式兼容性最好。 - 变现潜力 ★★★☆☆：Mermaid 已高度商品化，单独定价困难，价值在"Obsidian 自动归档"的工作流闭环。 - 训练营适用性 ★★★★☆：作为"工作流自动化"课的章节非常合适。 - 社区活跃度 ★★★★★：Mermaid 生态是所有图引擎里最大的。 它的护城河不在画图，而在"生成即归档进 Obsidian 知识库"这条工作流。竞品是 Claude Code 内置的 Mermaid 能力，它的增量是落盘分类。 ### 6. baoyu-infographic —— 信息密度视觉 来源：宝玉品牌的信息图 Skill，配套 `baoyu-xhs-images`（小红书图）、`markdown-to-image` 形成图片输出矩阵。专攻高信息密度的信息图，适合社媒传播与知识科普。 核心演示：给一段数据或观点，产出图文并茂、可直发小红书 / 公众号的信息图，强视觉、强传播。 - 功能完整度 ★★★★☆：信息图域成熟。 - 上手难度 ★★★★☆：需要对内容有提炼能力。 - 变现潜力 ★★★★★：信息图是内容商业化的硬通货，可直接做"日更信息图"账号或接单。 - 训练营适用性 ★★★☆☆：更偏运营实操，技术教学性弱。 - 社区活跃度 ★★★★☆：宝玉 IP 自带流量。 它是本期商业现金流属性最强的一款——信息图即内容即流量。竞品是各类 AI 海报工具，它的差异化在"信息密度"而非"颜值"，更适合知识型账号。 ### 7. chart-craft —— 轻量入门款 来源：chart-craft-plus 的基础前置版，触发与交互逻辑同源，但图库更窄、风格更少，定位轻量入门与快速原型。 核心演示：覆盖最常见的流程图、思维导图等基础类型，满足"先出个图看看"的快糙猛需求。 - 功能完整度 ★★★☆☆：够基础，缺长尾图表。 - 上手难度 ★★★★★：最简。 - 变现潜力 ★★★☆☆：能力被 plus 完全覆盖，难单独定价。 - 训练营适用性 ★★★☆☆：可作为 plus 的"降配演示"。 - 社区活跃度 ★★★☆☆：存在感主要靠 plus。 它的价值是 plus 的引流款与教学脚手架，本身不适合独立商业化。 ## Skills 生态分类思维导图 ```mermaid mindmap root((文字/指令→可视化)) 通用全能型 chart-craft-plus 35+图表类型 3视觉风格 chart-craft 轻量入门 语义逻辑型 text-logic-diagram 六种关系拆解 中文SVG 工程架构型 architecture-diagram-zh 双主题切换 中文HTML+SVG 手绘协作型 excalidraw-diagram 自然语言 可二次编辑 格式生态型 mermaid-generator Obsidian归档 商业传播型 baoyu-infographic 信息密度视觉 ``` ## 推荐排行榜 **变现潜力榜（想做付费产品选这些）** 1. text-logic-diagram —— 逻辑拆解无人竞争，客单价最高 2. baoyu-infographic —— 信息图即现金流 3. chart-craft-plus —— 行业图库订阅 4. architecture-diagram-zh —— 售前 / IT 评审代出 **训练营教学榜（想开课选这些）** 1. chart-craft-plus —— 35+ 类目撑一整期 2. text-logic-diagram —— 结构化思维核心课 3. excalidraw-diagram —— 白板讲解素材 4. mermaid-generator —— 工作流自动化章节 **零基础上手榜（小白首选）** 1. mermaid-generator —— 兼容性王 2. chart-craft —— 最简 3. excalidraw-diagram —— 自然语言 **工程严肃度榜（团队交付选这些）** 1. architecture-diagram-zh —— 可交互主题 2. mermaid-generator —— 全平台原生渲染 3. chart-craft-plus —— 品牌皮肤一致性 ## 结论：这条赛道的真正定价权 横评 7 款之后，结论很清晰：**图表生成 Skill 的分层已经和"会不会画图"无关，而和"输入端的智能密度"正相关**。`chart-craft` 和 `chart-craft-plus` 解决的是"我已知结构、只是懒得画"；`mermaid-generator`、`excalidraw-diagram` 解决的是"我想要某格式 / 某手感"；而 `text-logic-diagram` 解决的是"我只有一段话、需要有人帮我想清楚结构"。 谁替用户承担了从混乱到结构的认知负担，谁就拥有定价权。这也是为什么 `text-logic-diagram` 的变现评级给到五星，而广度最强的 `chart-craft-plus` 反而在变现上略逊一筹——广度可被快速复制，结构化智能很难。对训练营而言，教 `chart-craft-plus` 的 35 种图是"术"，教 `text-logic-diagram` 的六种逻辑关系是"道"，二者搭配才是完整产品。 落地建议：要做付费工具，押 `text-logic-diagram` + `baoyu-infographic`；要开训练营，用 `chart-craft-plus` 做主干、`text-logic-diagram` 做拔高；要快速交付团队，`architecture-diagram-zh` + `mermaid-generator` 的组合最稳。手绘协作场景交给 `excalidraw-diagram`，它是目前协作手感天花板。 ## 参考来源 1. [Claude Code Skills Ecosystem: The Complete 2026 Guide — getbeam.dev](https://getbeam.dev/blog/claude-code-skills-ecosystem-guide.html) — 千级 Skill 生态总览，覆盖分类、安装与构建方法 2. [Best Claude Code Skills & Plugins (2026 Guide) — DEV Community](https://dev.to/raxxostudios/best-claude-code-skills-plugins-2026-guide-4ak4) — 2026 年社区精选 Skill 清单，含图表与可视化类目 3. [coleam00/excalidraw-diagram-skill — GitHub](https://github.com/coleam00/excalidraw-diagram-skill) — 自然语言生成 Excalidraw 图表的原版 Skill 仓库 4. [diagram-architect — Claude Code Skill](https://lohasle.github.io/diagram-architect.skill/) — 生产级 HTML 图表生成，5 套专业主题，作为架构图横向竞品参照 5. [10 Must-Have Skills for Claude (and Any Coding Agent) in 2026 — Medium](https://medium.com/@unicodeveloper/10-must-have-skills-for-claude-and-any-coding-agent-in-2026-b5451b013051) — 2026 年 Agent Skill 趋势与必备能力分析 er，说明节点抓取、Variables、Assets 的 MCP 工具接口。 3. [Anthropic Engineering Blog — Design to Code](https://www.anthropic.com/engineering) — Anthropic 工程博客，涉及设计令牌驱动的前端工程化分层与 agent 友好的产物结构实践。 4. [claude-code 公开 Skill 仓库（GitHub）](https://github.com/anthropics/skills) — 官方与社区 Skill 源码，frontend-design、figma-implement-design 的实现细节与触发逻辑来源。 5. [Model Context Protocol 规范](https://modelcontextprotocol.io/) — MCP 协议规范，理解 figma MCP 在交付链入口的角色与工具调用机制。 > [!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 等场景全覆盖。