## 概述 前端设计类技能中，UI 生成、主题皮肤、样式重做已被反复评测，但有一条主线长期被忽视——把文字、数据、代码直接变成图表的**可视化引擎**。这类技能不产出页面，只产出"图"，却撑起了内容创作、技术文档、售前方案、社媒运营四个高价值场景。本期横向评测 8 款代表性引擎，覆盖 Mermaid 文本图、Excalidraw 手绘白板、SVG 逻辑图、SVG 架构图、HTML 信息图、AntV 数据图表六大渲染范式。结论先行：装机量冠军是宝玉的 `baoyu-infographic`（27K）与 GitHub 官方收藏夹的 `excalidraw-diagram-generator`（25K），图表类型冠军是 `chart-craft-plus`（35+ 种），而企业级变现天花板来自蚂蚁 AntV 官方套件。 ## 评测对比表 | 引擎 | 渲染范式 | 图表/关系覆盖 | 安装量 | 功能完整 | 上手 | 变现 | 训练营 | 社区 | 综合 | |------|---------|-------------|--------|---------|------|------|--------|------|------| | AntV chart-visualization-skills | 数据图表(G2/G6/L7) | 25+ 类 + 6 套件 | 4.3K | ★★★★★ | ★★★★ | ★★★★★ | ★★★★★ | ★★★★★ | 4.8 | | chart-craft-plus | HTML 多引擎 | 35+ 种 / 5 大类 | — | ★★★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★ | 4.2 | | text-logic-diagram | 矢量 SVG | 6 种逻辑关系 | — | ★★★★ | ★★★★★ | ★★★ | ★★★★ | ★★★ | 4.0 | | Cocoon-AI architecture-diagram-generator | HTML/SVG 架构 | 系统架构专精 | ~4.5k★ | ★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★★★ | 4.3 | | spillwavesolutions design-doc-mermaid | Mermaid 文本 | 设计文档图 | 11.9K | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★★ | 3.9 | | github excalidraw-diagram-generator | Excalidraw 手绘 | 通用白板 | 25K | ★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★★★ | 4.4 | | jimliu baoyu-infographic | HTML 信息图 | 20 布局×17 风格 | 27K | ★★★★★ | ★★★★ | ★★★★★ | ★★★★ | ★★★★★ | 4.6 | | silvere/viz-skills | HTML 信息图 | 7 种逻辑关系 | — | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | 3.7 | > 综合分按权重加权：功能 25% · 上手 20% · 变现 25% · 训练营 15% · 社区 15%。安装量数据来自 skills.sh 官方市场（截至 2026-06-25）。 ## 逐个深度评测 ### 1. AntV chart-visualization-skills — 蚂蚁官方的可视化全家桶 **来源与安装**：蚂蚁集团 AntV 团队官方开源（GitHub: `antvis/chart-visualization-skills`），安装命令 `npx skills add antvis/chart-visualization-skills@chart-visualization`。它不是单个技能，而是一套六件套：`chart-visualization`（统计/关系图）、`infographic-creator`（信息图）、地图、数据叙事、透视表、图标库，底层复用 G2/G6/L7 三大成熟引擎，可生成 25+ 种可视化。 **核心能力**：最大卖点是"自动选型"——喂给它一份数据，它判断该用柱状、桑基、地图还是路书，配色直接达到蚂蚁内部 BI 大屏水平，告别"上世纪学术报告配色"。装机量 4.3K（infographic-creator 另有 1.6K），但这是单技能口径，整套生态影响力远超数字。 **五维评分**：功能 ★★★★★（官方全家桶）、上手 ★★★★（需理解数据格式）、变现 ★★★★★（企业 BI/数据大屏/售前方案的天然付费场景）、训练营 ★★★★★（官方文档标准化）、社区 ★★★★★（蚂蚁团队长期维护）。**这是唯一具备阿里级企业背书、可直接包装为付费数据可视化 SaaS 的引擎**，定位天花板最高，缺点是部署较重、对纯小白略陡。 ### 2. chart-craft-plus — 图表类型覆盖最广的"全家桶"挑战者 **来源与安装**：个人开发者 zephyrwang6 出品（SkillsMP 平台 `zephyrwang6/draw-skill/chart-craft-plus`，亦收录于 `wanghao8702/my-skill`）。触发词极宽——"画个 XX 图""做个架构图/桑基图/韦恩图/热力图/KPI 看板"都会命中。 **核心能力**：一句话生成 **35+ 种图表的独立 HTML 文件**，横跨技术架构、流程逻辑、业务战略、数据可视化、信息展示五大类，内置三种视觉风格（黑白简约、深色暗调、Claude 暖色）并可扩展品牌风格。它本质是 chart-craft 的扩展版，把"图种"做到了品类最广。 **五维评分**：功能 ★★★★★（35+ 种为全场最多）、上手 ★★★★★（自然语言零门槛）、变现 ★★★（个人作品，模板可打包售卖但缺品牌护城河）、训练营 ★★★★（极佳的入门 workshop 教材）、社区 ★★★（个人维护，更新看作者精力）。**最大价值是"广度第一"**，适合需要一站式覆盖各类图表、又不想装六件套的轻度用户。 ### 3. text-logic-diagram — 把段落拆成逻辑关系的精准 SVG **来源与安装**：来自 `xxsong5/draw-skills` 仓库（`draw-skills/skills/text-logic-diagram`，MIT 协议，版本 1.1），与 chart-craft 系出同门。 **核心能力**：通读一段文字 → 段落拆解 → 判断关系类型 → 抽象关键词 → 输出 SVG。它把逻辑图收敛为六种标准关系：**递进（阶梯）、流程（编号节点）、循环（环形闭环）、层次（树形金字塔）、对比（左右对称）、矩阵（网格象限）**，且支持多段文字一次拆成多张图。设计系统相当讲究：深色主题用 Cursor 暖深底（`#141413`）+ Claude 赭石强调色（`#c96442`），浅色用羊皮纸底，全局 JetBrains Mono 等宽字体，节点文字严控 15 字以内。 **五维评分**：功能 ★★★★（范围窄但精）、上手 ★★★★★（粘贴文本即可）、变现 ★★★（知识博主/内容拆解工具）、训练营 ★★★★（逻辑可视化教学利器）、社区 ★★★。**它是"逻辑表达刚需"人群的最佳解**，缺点是只吃逻辑图，画不了真实数据图表。 ### 4. Cocoon-AI architecture-diagram-generator — 让架构师告别 Visio 的爆款 **来源与安装**：Cocoon-AI 团队开源（GitHub: `Cocoon-AI/architecture-diagram-generator`），中文社区常以 `architecture-diagram-zh`（双主题切换版）传播，掘金、知乎多篇万字文称其"4.5k star、用了就回不去"。 **核心能力**：自然语言描述系统 → 自包含 HTML 架构图（内嵌 SVG），三句话出图，自带暗色主题，专业度被公认"比手画一小时还像样"。它的杀手锏是**针对性极强**：不追求广度，只把"系统架构图"这一高频刚需做到极致，连线、分层、组件库都为架构场景调优。 **五维评分**：功能 ★★★★（架构图专精）、上手 ★★★★★（一句话）、变现 ★★★★（架构咨询、售前方案、技术评审的病毒级传播工具，可做成企业内部工具）、训练营 ★★★★（架构师入门教学）、社区 ★★★★★（4.5k star + 多篇爆款，传播力全场第一）。**适合所有画过架构图、被对齐和排版折磨过的工程师**。 ### 5. spillwavesolutions design-doc-mermaid — Mermaid 类装机量冠军 **来源与安装**：`npx skills add spillwavesolutions/design-doc-mermaid@design-doc-mermaid`，11.9K 安装量是 Mermaid 细分赛道的头名。 **核心能力**：把 Mermaid 这门"文本即图表"语言工程化进设计文档流程，专门为技术文档、设计评审场景调优（设计文档图、时序、类图等），输出可版本管理、可 diff 的纯文本图源。相比裸写 Mermaid，它补齐了文档上下文嵌入、命名规范、风格一致性。 **五维评分**：功能 ★★★★、上手 ★★★★（需理解 Mermaid 语法概念）、变现 ★★★（研发团队工具，B2B 内部销售）、训练营 ★★★★、社区 ★★★★（11.9K，Mermaid 类第一）。**适合把图表纳入 Git 流程的技术团队**，缺点是对非技术用户有语法门槛，输出偏"工程感"而非"设计感"。 ### 6. github/awesome-copilot excalidraw-diagram-generator — 手绘风白板的装机王 **来源与安装**：收录于 GitHub 官方 `awesome-copilot` 收藏夹，`npx skills add github/awesome-copilot@excalidraw-diagram-generator`，25K 安装量在"图表/白板"大类仅次于 baoyu-infographic。同类还有 coleam00 的 `excalidraw-diagram-skill`（5.8K）。 **核心能力**：自然语言 → Excalidraw 手绘风图表。最大差异化在于**产物可二次编辑**：导出的不是死图，而是 Excalidraw 的 JSON 工程，能在 Excalidraw 画布上继续拖拽、改色、协作。手绘粗糙感反而成了"思路草图、头脑风暴、教学板书"场景的审美优势。 **五维评分**：功能 ★★★★、上手 ★★★★★、变现 ★★★★（白板/在线协作 SaaS，Excalidraw 本身已验证赛道）、训练营 ★★★★、社区 ★★★★★（25K + GitHub 官方背书）。**适合需要"可继续编辑的活图"而非"最终定稿的死图"的协作场景**。 ### 7. jimliu baoyu-skills baoyu-infographic — 全场装机量天花板 **来源与安装**：知名 AI 博主宝玉（jimliu）出品，`npx skills add jimliu/baoyu-skills@baoyu-infographic`，**27K 安装量为整篇评测全场最高**。同系列还有 `baoyu-diagram`（10.1K）。 **核心能力**：分析内容 → 推荐"布局×风格"组合 → 生成出版级信息图，内置 **20 种布局 × 17 种视觉风格**，并针对小红书、公众号等社媒平台优化竖版比例。它的成功是"内容创作者刚需 + 个人 IP 信任 + 工程化模板"三重叠加的结果。 **五维评分**：功能 ★★★★★、上手 ★★★★、变现 ★★★★★（社媒/小红书种草/营销物料，变现路径最短最直接，可做成订阅制内容工具）、训练营 ★★★★、社区 ★★★★★（27K + 宝玉 IP）。**变现潜力与 baoyu 系列的内容属性高度绑定**，是内容创业者首选。 ### 8. silvere/viz-skills — 文章转信息图的内容运营向选手 **来源与安装**：`silvere/viz-skills`（GitHub），定位"把文章转成可视化信息图"。 **核心能力**：分析文章的**逻辑结构，覆盖 7 种关系类型**（比 text-logic-diagram 的 6 种多一种），偏重内容运营场景的长文转图。与 baoyu-infographic 的差异在于：baoyu 重"视觉模板"，viz-skills 重"逻辑结构识别"，是两条不同的转图路径。 **五维评分**：功能 ★★★★、上手 ★★★★、变现 ★★★（内容运营工具）、训练营 ★★★★、社区 ★★★。**适合公众号/知识付费的长文配图需求**，社区声量偏小，但逻辑拆解思路清晰，可作教学补充。 ## 可视化引擎生态分类 ```mermaid mindmap root((Claude Code
可视化引擎生态)) 数据图表 AntV chart-visualization
(官方G2/G6/L7) chart-craft-plus
(35+种最广) 逻辑关系图 text-logic-diagram
(6关系) silvere viz-skills
(7关系) 系统架构图 Cocoon-AI
architecture-diagram-generator architecture-diagram-zh
(双主题) 文本图表Mermaid spillwavesolutions
design-doc-mermaid 11.9K softaworks
mermaid-diagrams 4.4K 手绘白板Excalidraw github awesome-copilot
25K装机王 coleam00
excalidraw-diagram 5.8K 社媒信息图 baoyu-infographic
27K全场最高 AntV infographic-creator ``` ## 推荐排行榜 **装机量榜（市场用脚投票）** 1. baoyu-infographic — 27K 2. excalidraw-diagram-generator — 25K 3. design-doc-mermaid — 11.9K 4. baoyu-diagram — 10.1K 5. AntV chart-visualization — 4.3K **图表/类型覆盖广度榜** 1. chart-craft-plus — 35+ 种 / 5 大类 2. AntV chart-visualization — 25+ 种 + 6 套件 3. baoyu-infographic — 20 布局 × 17 风格 4. WH-2099 mermaid-skill — 23 种图 5. text-logic-diagram — 6 种逻辑关系 **变现潜力榜（能否做成付费产品）** 1. AntV chart-visualization — 企业 BI/数据大屏 SaaS，阿里背书 2. baoyu-infographic — 社媒内容订阅，变现路径最短 3. Cocoon-AI architecture-diagram-generator — 售前方案/架构咨询工具 4. excalidraw-diagram-generator — 在线白板协作 SaaS 5. chart-craft-plus — 模板市场 **新手友好榜（零基础上手速度）** 1. chart-craft-plus — 一句话、35+ 种、三种风格 2. Cocoon-AI architecture-diagram-generator — 三句话出架构图 3. text-logic-diagram — 粘贴文本即可 4. excalidraw-diagram-generator — 自然语言 + 可二次编辑 5. baoyu-infographic — 自动推荐布局风格 **选型速查**：要企业级数据可视化选 **AntV**；要图表类型最全选 **chart-craft-plus**；要画架构图选 **Cocoon-AI**；要可编辑的协作白板选 **Excalidraw**；要做社媒信息图变现选 **baoyu-infographic**；要把文章逻辑拆成图选 **text-logic-diagram**。这八款各占一席，几乎没有重叠——这正说明可视化是一个按"渲染范式"而非"功能"切分的成熟赛道。 ## 参考来源 1. [Claude Code 生成专业图表的 15 个 Skills：覆盖 7 种渲染引擎的完整指南 — 苏米客](https://www.xmsumi.com/detail/2997) — 横向梳理 15 款图表技能与 7 种渲染引擎分类 2. [antvis/chart-visualization-skills — GitHub](https://github.com/antvis/chart-visualization-skills) — 蚂蚁 AntV 官方六大可视化 Skill 源仓库 3. [蚂蚁集团开源 6 大可视化 Skill，Claude Code 画图能力大升级 — 苏米客](http://xmsumi.com/detail/2970) — AntV 套件功能、自动选型与 25+ 图表类型解读 4. [draw-skills/skills/text-logic-diagram/SKILL.md — GitHub](https://github.com/xxsong5/draw-skills/blob/main/skills/text-logic-diagram/SKILL.md) — text-logic-diagram 六种逻辑关系与设计系统原文 5. [程序员画架构图的痛，被这个 4.5k star 的 Claude Skill 一句话治好了 — 掘金](https://juejin.cn/post/7634079284186677299) — Cocoon-AI 架构图生成器社区热度与用法 > [!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 等场景全覆盖。