首页 › skills-review › 指令即成图:图表生成引擎横评

概述

前端的尽头不只有页面与组件。当一句"画个架构图""把这段话转成逻辑图"就能落地成可独立交付的视觉成品,图表生成类 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 风格"即可切换。

变现思路是把它拆成"行业图库"——金融 KPI 看板、教育 OKR 树、医疗威胁建模,按行业打包成付费模板。竞品上,它比 diagram-architect(5 主题 HTML)图库更宽,但严肃工程感稍弱。

2. text-logic-diagram —— 把废话抽成逻辑

来源:中文语义逻辑图 Skill。这是本期最具"智力含量"的一款。它不是把你给的语法画出来,而是先读懂一段话的逻辑,再选择递进、流程、循环、层次、对比、矩阵六种关系之一,落地成精准的 SVG 逻辑图。支持中文,一次可拆多张。

核心演示:输入"先做需求调研,再做原型,原型过了才开发,开发完压测,压测不过回炉",它会识别为"流程 + 循环回退",产出带回流箭头的 SVG。输入对比性论述,它出矩阵或对比图。

它是本期最值得做付费产品的候选:逻辑拆解 + 中文 SVG 在通用市场几乎无对手,唯一竞品是自己手画,定价空间来自"省掉半小时整理思路"。

3. architecture-diagram-zh —— 工程严肃派架构图

来源:中文系统架构图 Skill。专为系统架构图、基础设施拓扑、云架构、安全架构、网络拓扑设计,输出独立 HTML(内含 SVG),内置深色 / 浅色双主题切换按钮,标注全中文。

核心演示:描述一个微服务 + Redis + 消息队列 + 网关的拓扑,它产出可交互切换主题的 HTML,能直接发给团队评审。相比纯图,它的可交互性(一键切主题)让它更像"交付物"而非"截图"。

竞品是市面上 5 主题的 HTML 架构图 Skill(如 diagram-architect)和 Cloudflare 风的 technical-svg-diagrams。它的优势在中文原生与主题切换闭环,劣势在风格数量少于 diagram-architect 的 5 套。

4. excalidraw-diagram —— 手绘感的协作

来源:基于 coleam00/excalidraw-diagram-skill 的中文生态版本。从自然语言生成 Excalidraw JSON,输出 .excalidraw 文件,手绘风格,流程图 / 架构图 / 关系图 / 思维导图皆可,且生成后可手动二次编辑。

核心演示:一句"画一个用户下单到支付的流程",得到一份手绘风流程图,拖拽、改字、加箭头全在 Excalidraw 里完成,团队成员可实时协作。

它和 article-to-excalidraw(文章转多区域手绘 + 提词器)是同源不同向:本款单图精修,那款多图成片。变现上别卖图,卖"手绘模板包"或嵌入到知识管理产品里。

5. mermaid-generator —— 老牌稳态

来源:文本 / 工作流 / 逻辑 → Mermaid 流程图,支持 flowchart、sequence、class 等多类型,自动保存到 Obsidian 画板目录并按日期 / 主题分类。

核心演示:把一段会议纪要或 SOP 文字丢进去,它产出 Mermaid 源码并落盘 Obsidian。由于 Mermaid 是 GitHub、Notion、Obsidian 原生渲染格式,产物可直接贴进任何地方。

它的护城河不在画图,而在"生成即归档进 Obsidian 知识库"这条工作流。竞品是 Claude Code 内置的 Mermaid 能力,它的增量是落盘分类。

6. baoyu-infographic —— 信息密度视觉

来源:宝玉品牌的信息图 Skill,配套 baoyu-xhs-images(小红书图)、markdown-to-image 形成图片输出矩阵。专攻高信息密度的信息图,适合社媒传播与知识科普。

核心演示:给一段数据或观点,产出图文并茂、可直发小红书 / 公众号的信息图,强视觉、强传播。

它是本期商业现金流属性最强的一款——信息图即内容即流量。竞品是各类 AI 海报工具,它的差异化在"信息密度"而非"颜值",更适合知识型账号。

7. chart-craft —— 轻量入门款

来源:chart-craft-plus 的基础前置版,触发与交互逻辑同源,但图库更窄、风格更少,定位轻量入门与快速原型。

核心演示:覆盖最常见的流程图、思维导图等基础类型,满足"先出个图看看"的快糙猛需求。

它的价值是 plus 的引流款与教学脚手架,本身不适合独立商业化。

Skills 生态分类思维导图

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 — 千级 Skill 生态总览,覆盖分类、安装与构建方法
  2. Best Claude Code Skills & Plugins (2026 Guide) — DEV Community — 2026 年社区精选 Skill 清单,含图表与可视化类目
  3. coleam00/excalidraw-diagram-skill — GitHub — 自然语言生成 Excalidraw 图表的原版 Skill 仓库
  4. diagram-architect — Claude Code Skill — 生产级 HTML 图表生成,5 套专业主题,作为架构图横向竞品参照
  5. 10 Must-Have Skills for Claude (and Any Coding Agent) in 2026 — Medium — 2026 年 Agent Skill 趋势与必备能力分析 er,说明节点抓取、Variables、Assets 的 MCP 工具接口。
  6. Anthropic Engineering Blog — Design to Code — Anthropic 工程博客,涉及设计令牌驱动的前端工程化分层与 agent 友好的产物结构实践。
  7. claude-code 公开 Skill 仓库(GitHub) — 官方与社区 Skill 源码,frontend-design、figma-implement-design 的实现细节与触发逻辑来源。
  8. Model Context Protocol 规范 — 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 等场景全覆盖。

51学通信知识星球海报-扫码加入