概述

前端设计类技能中，UI 生成、主题皮肤、样式重做已被反复评测，但有一条主线长期被忽视——把文字、数据、代码直接变成图表的可视化引擎。这类技能不产出页面，只产出"图"，却撑起了内容创作、技术文档、售前方案、社媒运营四个高价值场景。本期横向评测 8 款代表性引擎，覆盖 Mermaid 文本图、Excalidraw 手绘白板、SVG 逻辑图、SVG 架构图、HTML 信息图、AntV 数据图表六大渲染范式。结论先行：装机量冠军是宝玉的 baoyu-infographic（27K）与 GitHub 官方收藏夹的 excalidraw-diagram-generator（25K），图表类型冠军是 chart-craft-plus（35+ 种），而企业级变现天花板来自蚂蚁 AntV 官方套件。

评测对比表

综合分按权重加权：功能 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 重"逻辑结构识别"，是两条不同的转图路径。

五维评分：功能 ★★★★、上手 ★★★★、变现 ★★★（内容运营工具）、训练营 ★★★★、社区 ★★★。适合公众号/知识付费的长文配图需求，社区声量偏小，但逻辑拆解思路清晰，可作教学补充。

可视化引擎生态分类

mindmap
  root((Claude Code<br/>可视化引擎生态))
    数据图表
      AntV chart-visualization<br/>(官方G2/G6/L7)
      chart-craft-plus<br/>(35+种最广)
    逻辑关系图
      text-logic-diagram<br/>(6关系)
      silvere viz-skills<br/>(7关系)
    系统架构图
      Cocoon-AI<br/>architecture-diagram-generator
      architecture-diagram-zh<br/>(双主题)
    文本图表Mermaid
      spillwavesolutions<br/>design-doc-mermaid 11.9K
      softaworks<br/>mermaid-diagrams 4.4K
    手绘白板Excalidraw
      github awesome-copilot<br/>25K装机王
      coleam00<br/>excalidraw-diagram 5.8K
    社媒信息图
      baoyu-infographic<br/>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 种渲染引擎的完整指南 — 苏米客 — 横向梳理 15 款图表技能与 7 种渲染引擎分类
2. antvis/chart-visualization-skills — GitHub — 蚂蚁 AntV 官方六大可视化 Skill 源仓库
3. 蚂蚁集团开源 6 大可视化 Skill，Claude Code 画图能力大升级 — 苏米客 — AntV 套件功能、自动选型与 25+ 图表类型解读
4. draw-skills/skills/text-logic-diagram/SKILL.md — GitHub — text-logic-diagram 六种逻辑关系与设计系统原文
5. 程序员画架构图的痛，被这个 4.5k star 的 Claude Skill 一句话治好了 — 掘金 — 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 等场景全覆盖。