首页 › skills-review › 一图即架构:图表引擎七维横评

一图即架构:技术图表引擎七维横评

概述

本轮评测聚焦 Claude Code 技能生态中一个长期被低估、却高频刚需的细分赛道——技术与业务关系图生成引擎。区别于面向社媒传播的信息图(一图即传播)、面向咨询战略的战略画布(述即成图),以及面向沟通协作的 Mermaid 画布(框图即沟通),本赛道的核心交付物是独立 HTML/SVG 图表制品:架构图、ER 图、BPMN、状态机、逻辑关系图、SWOT、漏斗、桑基、KPI 看板。它们共同的工程价值在于把"一段自然语言描述"压缩成"一张可二次编辑、可嵌入文档、可适配深浅主题的可视化资产"。我们横向评测七款代表性引擎,覆盖从 35+ 图表类型的全能力旗舰(chart-craft-plus),到专精单一场景的双主题架构图(architecture-diagram-zh),到聚焦中文逻辑拆解的 SVG 工具(text-logic-diagram),揭示各自的功能边界、变现路径与训练营适配度。

评测维度与权重

维度 权重 评价标准
功能完整度 25% 图表类型覆盖、主题/风格扩展、开箱即用程度
上手难度 20% 触发词设计、学习曲线、对非技术用户友好度
变现潜力 25% 能否封装为付费 SaaS / 会员产品、定价天花板
训练营适用性 15% 是否适合教学拆解、单课时时长、可复现性
社区活跃度 15% GitHub Star、贡献者、更新频率、二次传播

横评总览表

排名 技能名称 核心能力 输出格式 变现定位 加权综合
1 chart-craft-plus 35+ 图表类型,5 大类,3 风格 HTML 企业咨询/通用商业图表 4.50 / 5
2 architecture-diagram-zh 双深浅主题架构图,HTML+SVG HTML+SVG 架构咨询/招投标 4.35 / 5
3 text-logic-diagram 六类逻辑关系精准拆解 SVG 知识付费/内容沉淀 4.20 / 5
4 mermaid-generator Mermaid 流程图 + Obsidian 归档 Mermaid→画板 文档工程/DevOps 教学 3.60 / 5
5 chart-craft 10 种图表,Plus 的轻量子集 HTML 入门级通用图表 3.55 / 5
6 excalidraw-diagram 手绘风可视化论证 Excalidraw JSON 路演/手绘教学 3.20 / 5
7 json-canvas Obsidian JSON Canvas 节点画布 JSON Canvas 笔记插件生态 2.60 / 5

一、chart-craft-plus:图表类型的"全家桶"

来源:社区维护,SKILL.md 公开版本(wanghao8702/my-skill 等多个仓库收录)。 安装:将 chart-craft-plus 目录放入 .claude/skills/,或在 Codex/Claude 中粘贴 prompt 安装。

这是本赛道当之无愧的全能旗舰。它把图表生成抽象成"35+ 类型 × 5 大类别 × 3 内置风格 + 品牌扩展"的三维矩阵。5 大类别分别是技术架构(架构图/部署图/C4/ER)、流程逻辑(流程图/时序图/状态机/BPMN/决策树/泳道)、业务战略(商业模式画布/SWOT/竞品分析/产品路线图/OKR 树/价值链)、数据可视化(漏斗/桑基/热力图/KPI 看板/韦恩图)、信息展示(思维导图/概念图/信息图)。三种内置风格——黑白简约、深色暗调、Claude 暖色——已经能覆盖 90% 的企业文档审美,品牌扩展则允许注入企业 VI。

核心演示:输入"画一个电商订单系统的 C4 容器图,深色风格",它会自动选择技术架构类 → C4 图 → 深色暗调,输出一个独立 HTML 文件,内嵌可缩放 SVG。触发词矩阵设计得非常宽("画个 XX 图""帮我可视化""换成 XX 风格"),用户几乎不需要记忆命令。

评分:功能完整度 ★★★★★|上手难度 ★★★★☆|变现潜力 ★★★★★|训练营适用性 ★★★★★|社区活跃度 ★★★☆☆

变现分析:这是七款中最具 SaaS 化潜力的。35+ 类型天然适配"商业图表模板库"订阅产品——可包装为面向产品经理、咨询顾问的付费会员,按月 49–199 元定价;训练营层面,每一个图表类型都可拆成一节 15 分钟微课,整套就是一门完整的"商业可视化"体系课。

与竞品对比:相较同门的 chart-craft(10 类型),Plus 的覆盖广度是其 3.5 倍;相较 architecture-diagram-zh 的单点专精,Plus 牺牲了一点架构图的精致度换取全品类覆盖。


二、architecture-diagram-zh:架构图的"主题工厂"

来源:Cocoon-AI 团队开源的 architecture-diagram-generator,GitHub 已近 2000 Star,是本赛道社区热度最高的明星项目。 安装:git clone 仓库到 skills 目录,或从 claude.ai skills 市场一键安装。

它做减法做到极致——只做一件事:生成专业级系统架构图,但把这件事做到了"告别 Visio、Draw.io 手绘时代"的程度。最大卖点是一键深浅双主题切换:同一个 HTML 文件内置主题切换按钮,浅色用于正式文档、深色用于技术评审和路演,无需重新生成。输出为独立 HTML(内含 SVG 图形),支持中文标注。

核心演示:一句"画一个 AWS 三层 Web 架构,含 ALB、ECS、RDS、Redis",30 秒内产出带分层布局、连接线、图例的架构图。CSDN、知乎、51CTO 上有大量"三句话生成专业架构图"的实战测评,足见其出圈程度。

评分:功能完整度 ★★★★☆|上手难度 ★★★★★|变现潜力 ★★★★☆|训练营适用性 ★★★★☆|社区活跃度 ★★★★★

变现分析:架构咨询、招投标技术方案、CTO 路演是它的主战场。可封装为面向架构师社群的垂直工具——按图收费或会员制。它的社区声量(近 2000 Star、多家技术媒体测评)意味着自带流量,适合做"开源引流 + Pro 版付费"的双层结构。

与竞品对比:在"架构图"这个单点上,它的主题双切换和精致度超过 chart-craft-plus;但一旦需求扩展到 ER/BPMN/SWOT,就力不从心。它是专精型选手,不是全能型。


三、text-logic-diagram:中文逻辑的"关系手术刀"

来源:zephyrwang6 的 draw-skill 系列(xxsong5/draw-skills 收录),SkillsMP 等市场可一键安装。

它的差异化定位非常清晰——不做花哨的图表,专攻"把一段中文论述拆解成精准的逻辑关系图"。支持六种关系类型:递进、流程、循环、层次、对比、矩阵。当用户给一段文章/论述,它能自动判断逻辑结构并选择对应关系类型,一次可批量拆解多张图,输出为干净的关系 SVG。

核心演示:输入一段"我们之所以要做这个功能,是因为 A、B、C 三点,其中 A 又可拆为 A1、A2",它识别为"层次+对比"混合关系,输出一张结构化的递进层次图。对知识博主、技术作者而言,这是把长文"瘦身成图"的利器。

评分:功能完整度 ★★★★☆|上手难度 ★★★★★|变现潜力 ★★★★☆|训练营适用性 ★★★★★|社区活跃度 ★★★☆☆

变现分析:知识付费场景天然适配——把一本书、一篇万字长文拆成 10 张逻辑图做成卡片集,就是一套可售卖的"知识图谱"产品。训练营层面,六种关系类型就是现成的六节方法论课,教学结构异常清晰,是七款中最适合做"思维可视化"训练营的。

与竞品对比:相较 chart-craft-plus 的"品类广",它是"逻辑深"——它不画 SWOT、不画桑基,但在"文字→逻辑结构"这条链上,它的关系分类体系比通用工具更精准、更适合中文语境。


四、mermaid-generator:Mermaid 的"Obsidian 归档官"

来源:社区维护,与 Obsidian 画板生态深度绑定。 安装:放入 skills 目录,依赖本地 Obsidian 仓库路径配置。

它把 Mermaid 这门"图表 DSL"包装成了自动归档工作流:把任意文本/工作流/逻辑转成 Mermaid 流程图(支持 flowchart、sequence、class 等),然后自动保存到 Obsidian 画板目录,按日期和主题分类。这让生成的图表不再是孤立的代码块,而是沉淀进个人知识库的可检索资产。

核心演示:粘贴一段部署流程描述,生成 sequence 时序图并自动归档到 Obsidian/Canvas/2026-07/部署流程 路径,下次直接在 Obsidian 图谱中检索复用。

评分:功能完整度 ★★★★☆|上手难度 ★★★★☆|变现潜力 ★★★☆☆|训练营适用性 ★★★★☆|社区活跃度 ★★★☆☆

变现分析:变现天花板相对有限——它的价值高度依赖 Obsidian 用户基数。更适合作为"个人知识管理"课程的一个标准模块嵌入,而非独立付费产品。训练营适配度不错,Mermaid 语法本身就有成熟的教学路径。

与竞品对比:它是本赛道中唯一把"生成 + 归档 + 检索"做成闭环的。劣势是绑死 Obsidian,对非笔记用户价值骤减。


五、chart-craft:轻量级的"入门款"

来源:chart-craft-plus 的前身/同门轻量版。 安装:同 chart-craft-plus。

10 种图表类型、3 种视觉风格,定位是通用入门。流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析、SWOT、产品路线图、组织架构——这 10 类恰好覆盖了 80% 的高频需求。

评分:功能完整度 ★★★☆☆|上手难度 ★★★★★|变现潜力 ★★★☆☆|训练营适用性 ★★★★☆|社区活跃度 ★★★☆☆

变现分析:作为免费引流款非常合适,但单独商业化空间被 Plus 压制。更适合定位为"Plus 的体验版"——让用户先用 10 类感受价值,再向上迁移到 Plus 的 35+ 类。

与竞品对比:在 Plus 面前,它唯一的优势是"选择更少、决策更快"。对于只需常用图表的用户,它的轻量反而是优点。


六、excalidraw-diagram:手绘风的"论证画师"

来源:社区维护,基于 Excalidraw JSON 格式。

输出手绘风格的 Excalidraw 图表 JSON,强调"做视觉论证"——适合需要营造亲和力、强调"手作感"的场景,比如路演宣讲、教育内容、产品故事。手绘美学天然降低了图表的"权威压迫感"。

评分:功能完整度 ★★★☆☆|上手难度 ★★★★☆|变现潜力 ★★★☆☆|训练营适用性 ★★★☆☆|社区活跃度 ★★★☆☆

变现分析:手绘风是差异化卖点,但受众偏窄——主要服务教育、自媒体路演场景。可作为"内容创作者工具包"的一个特色组件,独立变现空间中等。

与竞品对比:在所有图表引擎中独一份的"手绘美学",但它放弃了专业架构图的精致度,定位是"情感化沟通"而非"技术交付"。


七、json-canvas:节点关系的"画布协议层"

来源:基于 Obsidian 官方 JSON Canvas 规范。

它是七款中最底层的——直接生成符合 JSON Canvas 规范的节点-边画布文件。不追求美观,追求结构化、可程序化处理、可被任何支持该规范的工具读取。

评分:功能完整度 ★★★☆☆|上手难度 ★★★☆☆|变现潜力 ★★☆☆☆|训练营适用性 ★★★☆☆|社区活跃度 ★★☆☆☆

变现分析:商业价值最低,因为它本质是"协议层"而非"产品层"。价值在于作为其他可视化技能的底座被集成,而非直接面向终端用户收费。

与竞品对比:不在同一竞争维度——它不和前六款比"谁画得好看",而是比"谁的结构最标准、最可互操作"。


技术图表引擎生态分类思维导图

mindmap
  root((技术图表引擎生态))
    全品类通用
      chart-craft-plus
        35+图表类型
        3风格+品牌扩展
        企业咨询变现
      chart-craft
        10类型轻量版
        入门引流
    场景专精
      architecture-diagram-zh
        系统架构图
        深浅双主题
        2000星社区
      text-logic-diagram
        六类逻辑关系
        中文论述拆解
        知识付费
    风格化
      excalidraw-diagram
        手绘美学
        视觉论证
    工作流闭环
      mermaid-generator
        Mermaid DSL
        Obsidian归档
    协议底座
      json-canvas
        JSON Canvas规范
        节点边结构化

推荐排行榜

🥇 综合实力榜(加权总分) 1. chart-craft-plus(4.50)— 全品类覆盖 + 高变现天花板 2. architecture-diagram-zh(4.35)— 社区声量 + 双主题专精 3. text-logic-diagram(4.20)— 中文逻辑拆解无对手

💰 变现潜力榜 1. chart-craft-plus — 模板库订阅/SaaS,定价空间最大 2. architecture-diagram-zh — 架构咨询垂直付费,自带流量 3. text-logic-diagram — 知识图谱卡片集,知识付费适配

🎓 训练营适配榜 1. chart-craft-plus — 35+ 类型即 35+ 节微课 2. text-logic-diagram — 六种关系即六节方法论课 3. chart-craft — 10 类型轻量,适合 1 天速成班

⚡ 上手最快榜 1. architecture-diagram-zh — 一句话生成,零学习成本 2. text-logic-diagram — 自然语言触发,自动判断关系 3. chart-craft — 类型少,决策无负担

🌐 社区活跃榜 1. architecture-diagram-zh — 近 2000 Star,多平台测评 2. chart-craft-plus — 多仓库收录,二次传播活跃 3. mermaid-generator — Obsidian 生态背书

选型决策建议

如果只能装一款,chart-craft-plus 是无脑首选——它的品类广度让它在任何场景都不会"卡壳"。如果团队主业是架构咨询或招投标,architecture-diagram-zh 的双主题和精致度更胜一筹,可与 Plus 组成"架构专精 + 全品类补位"的搭配。如果做的是知识付费和内容沉淀,text-logic-diagram 的中文逻辑拆解能力无可替代。对个人开发者,mermaid-generator + Obsidian 的归档闭环则让图表真正成为可复用的知识资产。

值得注意的是,本赛道整体呈现出"专精型项目社区更热、全能型项目变现更强"的分化规律——architecture-diagram-zh 靠单点极致拿到 2000 Star,而 chart-craft-plus 靠矩阵覆盖拿到更高的商业天花板。这提示技能开发者:开源引爆靠专精,商业变现靠矩阵,二者不必非要二选一,可以先做专精打响声量,再用矩阵承接流量。

参考来源

  1. Cocoon-AI/architecture-diagram-generator — GitHub — 架构图生成技能官方仓库,近 2000 Star,双深浅主题 HTML/SVG 输出
  2. Claude Code architecture-diagram Skill:用代码画出专业级架构图 — CSDN — 架构图技能的实战使用指南,含触发与定制流程
  3. text-logic-diagram Agent Skill — SkillsMP — 六类逻辑关系 SVG 生成技能的市场页与安装说明
  4. Claude Code 生成专业图表的 15 个 Skills — 苏米客 — 横向梳理 7 种渲染引擎、15 款图表技能的完整对比指南
  5. Best Claude Code Skills in 2026: 349 Agent Skills Ranked — OpenAI Tools Hub — 2026 年 349 款技能的 12 类分类排名,含可视化赛道排名

[!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学通信知识星球海报-扫码加入