# 草图即说服：白板图引擎七件横评 ## 概述 2025 至 2026 年，可视化技能生态里出现了一条清晰的价值迁移线：**从"编码结构"走向"绘制论证"**。早期 Mermaid 一族以"文本即图表"取胜，把流程、时序、类图锁进声明式语法；而 Excalidraw 一族把白板手绘美学搬进 Claude Code，强调用潦草的线条、随性的箭头、非对称的布局去**说服**读者，而非只是"画对"。本期横评聚焦这条"手绘/白板/逻辑可视化"赛道上的七件技能——excalidraw、excalidraw-diagram、article-to-excalidraw、text-logic-diagram、architecture-diagram-zh、mermaid-generator、json-canvas，从功能完整度、上手难度、变现潜力、训练营适用性、社区活跃度五个维度拆解，并给出按场景的装机排序。结论先行：**架构交付选 architecture-diagram-zh，内容变现选 article-to-excalidraw，教学启蒙选 excalidraw**，其余依场景补位。 ## 评测总览表 | 技能 | 输出载体 | 美学定位 | 功能 | 上手 | 变现 | 训练营 | 社区 | 加权 | |------|----------|----------|:---:|:---:|:---:|:---:|:---:|:---:| | architecture-diagram-zh | HTML（内含 SVG） | 双主题·精密 | ★★★★★ | ★★★★ | ★★★★★ | ★★★★ | ★★★★ | **4.50** | | article-to-excalidraw | Excalidraw + 提词稿 | 手绘·封面化 | ★★★★ | ★★★★★ | ★★★★★ | ★★★★ | ★★★ | **4.30** | | excalidraw（核心） | Excalidraw JSON | 手绘·白板 | ★★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★★★ | **4.05** | | excalidraw-diagram | Excalidraw JSON | 手绘·论证 | ★★★★ | ★★★ | ★★★★ | ★★★★★ | ★★★★ | **3.95** | | mermaid-generator | Mermaid 文本 | 结构·简约 | ★★★★ | ★★★★★ | ★★ | ★★★★ | ★★★★★ | **3.85** | | text-logic-diagram | SVG | 逻辑·精准 | ★★★★ | ★★★ | ★★★ | ★★★★★ | ★★★ | **3.55** | | json-canvas（Obsidian） | JSON Canvas | 节点·卡片 | ★★★ | ★★★★ | ★★ | ★★★ | ★★★ | **2.95** | > 加权 = 功能 25% + 上手 20% + 变现 25% + 训练营 15% + 社区 15%。 ## 逐个深度评测 ### 1. architecture-diagram-zh —— 双主题架构图的"交付级"标杆 **来源与定位**：专为中文标注优化的系统架构图技能，输出独立 HTML 文件（内嵌 SVG），内置深色/浅色双主题一键切换按钮。覆盖系统架构、基础设施拓扑、云架构可视化、安全架构、网络拓扑等所有"组件 + 关系"类技术图。 **核心能力**：与 Mermaid 的"声明式渲染"不同，它走的是**矢量精绘**路线——SVG 不会因缩放发糊，HTML 容器让主题切换、图例、注释层都能交互。中文标注是其最大差异化：很多海外架构图工具对 CJK 字宽、竖排、长标签的折行处理粗糙，而它针对中文做了字体回退与对齐优化。 **五维评分**：功能 ★★★★★（双主题 + 独立 HTML + 中文，开箱即交付）；上手 ★★★★（一句"画个 X 架构图"即可）；变现 ★★★★★（架构图是企业招投标、方案宣讲、技术博客的刚需，单张可定价数百元）；训练营 ★★★★（适合架构师课程）；社区 ★★★★。 **变现与竞品**：相比 diagram-architect、Diagram Generator 等 Mermaid 路线技能，它的优势在**成品观感**——Mermaid 输出需要二次美化才能进 PPT，而它直接是可交付件。改造为"架构图订阅服务"或"方案可视化外包工具"定价空间充裕。 ### 2. article-to-excalidraw —— 内容变现在手绘赛道里最锋利 **来源与定位**：把一篇科普文章转化为"一个垂直布局的 Excalidraw 单文件多区域图表（含封面）+ 一个提词器友好的口播脚本"。一句话定位：**文章 → 可视化视频双产物**。 **核心能力**：这是本期**变现闭环最短**的一件。它的杀手锏不是"画图"，而是"画图 + 写口播稿"的捆绑——封面区抓眼球，内容区拆知识点，提词稿直接喂提词器录制，省去了"先画图、再另写文案"的二次创作。Excalidraw 的手绘风在短视频里辨识度极高，与知识科普、技术讲解的内容形态天然契合。 **五维评分**：功能 ★★★★（多区域 + 封面 + 脚本三合一）；上手 ★★★★★（输入 MD 文章即可）；变现 ★★★★★（产物即内容，可直接变现）；训练营 ★★★★；社区 ★★★（属定制技能，公开传播弱）。 **变现与竞品**：与 knowledge-card-pro、book-to-short-videos 等内容视频技能相比，它的差异点是**手绘风视觉资产**——卡片视频易同质化，而 Excalidraw 手绘封面具备"个人 IP 画师感"，适合做成口播账号矩阵或知识付费引流物料。 ### 3. excalidraw（核心）—— 手绘赛道的地基 **来源与定位**：Excalidraw 手绘白板的核心技能，对应社区里 coleam00/excalidraw-diagram-skill 这一脉（搜索显示该仓库约 3500 stars，2026 年仍在活跃更新）。提供可编辑、手绘风格的图表与草图生成能力。 **核心能力**：作为"地基"，它定义了手绘赛道的语法——潦草的矩形、抖动的连线、随机的填充纹理。它的价值不在炫技，而在**降低视觉门槛**：开发者无需设计功底，也能产出"看起来像人画的"图。Excalidraw 的 `.excalidraw` JSON 是可二次编辑的，这点比纯位图输出强太多。 **五维评分**：功能 ★★★★（核心绘图原语齐全）；上手 ★★★★（熟悉 Excalidraw 即可）；变现 ★★★（属基础设施，单独收费难，需捆绑）；训练营 ★★★★★（教视觉思维的最佳载体）；社区 ★★★★★（生态最庞大）。 **变现与竞品**：单独的 excalidraw 技能偏"工具属性"，变现要靠上层包装——例如搭配 article-to-excalidraw 做内容，或搭配 course-video-maker 做教学。竞品是 tldraw 一脉，但 Excalidraw 在 Claude Code 技能生态里装机量与成熟度领先。 ### 4. excalidraw-diagram —— 把"视觉论证"写进技能目标 **来源与定位**：生成 Excalidraw 图表 JSON，但技能描述里有一句点睛之笔——"make visual arguments"（做出视觉论证）。它不满足于"画清楚"，而追求"**用布局说服人**"。 **核心能力**：与核心 excalidraw 的区别在于**意图层**：核心技能回答"这个系统长什么样"，而 excalidraw-diagram 回答"为什么应该这样设计"。它倾向用对比布局、强调色块、留白节奏去引导视线，让架构图带上"论证味"。这正是 2026 年 "visual argumentation" 讨论的核心议题（有博客将其定义为"教编码智能体做视觉论证"）。 **五维评分**：功能 ★★★★（JSON 图表 + 论证布局）；上手 ★★★（需理解 JSON schema 与布局意图）；变现 ★★★★（论证型图表对咨询、产品评审、方案说服溢价高）；训练营 ★★★★★（能教"怎么用图说服人"，稀缺能力）；社区 ★★★★。 **变现与竞品**：面向的不是开发者，而是**产品经理、咨询顾问、技术布道师**——这群人愿意为"一张能说服老板/客户的图"付费。可包装为"方案说服力工具"或"评审可视化模板包"。 ### 5. mermaid-generator —— 结构化赛道的"零门槛"基准线 **来源与定位**：文本/工作流/逻辑 → 清晰简约的 Mermaid 流程图，支持 flowchart、sequence、class 等多类型，自动按日期与主题分类存入 Obsidian 画板目录。 **核心能力**：它是本期**上手最快、生态最厚**的一件。Mermaid 的优势是声明式、可 diff、可纳入版本控制、GitHub/Notion 原生渲染——这些是手绘 JSON 给不了的工程红利。它的短板也明显：**观感平庸**，输出进 PPT 前几乎必经二次美化。 **五维评分**：功能 ★★★★（多类型 + 自动归档）；上手 ★★★★★（文本进、图出）；变现 ★★（Mermaid 已是基础设施，单技能难收费）；训练营 ★★★★；社区 ★★★★★。 **变现与竞品**：作为"基准线"它不可替代——文档化、README、CI 里嵌入架构图，Mermaid 仍是首选。但若目标是**对外交付**（宣讲、投标、教学），它的成品竞争力被 architecture-diagram-zh 和 Excalidraw 一族压制。建议作为"内部文档图"标配，而非"对外交付图"主力。 ### 6. text-logic-diagram —— 逻辑拆解的"精密件" **来源与定位**：把文本段落进行逻辑拆解，生成**精准的逻辑关系 SVG**，覆盖递进、流程、循环、层次、对比、矩阵六种关系，一次可拆多张，中文友好。 **核心能力**：它的差异化在**逻辑严谨**——不是"画一张好看的图"，而是"判断这段文字属于哪种逻辑关系，再用对应范式可视化"。递进用阶梯，循环用环，对比用双栏，矩阵用网格。对教学、说理、论文配图尤其友好。SVG 输出保证清晰度。 **五维评分**：功能 ★★★★（六种关系 + 批量）；上手 ★★★（需先识别内容逻辑类型）；变现 ★★★（逻辑图偏教学/学术，溢价中等）；训练营 ★★★★★（教逻辑结构的绝佳载体）；社区 ★★★。 **变现与竞品**：适合知识博主做"逻辑图专栏"、教师做课件配图。与 Excalidraw 一族的"感性手绘"形成互补——**手绘管情绪，逻辑图管理性**。短板是美学个性不强，需与配色/字体技能联动。 ### 7. json-canvas（Obsidian）—— 卡片式知识图的"格式派" **来源与定位**：基于 JSON Canvas 格式（Obsidian 生态开放标准）生成节点卡片式关系图，是 Obsidian 用户在画板里组织笔记的官方格式。 **核心能力**：它的价值高度绑定 Obsidian——若你的工作流不在 Obsidian，这件技能的吸引力骤降。JSON Canvas 的长处是**与笔记双向链接**：图上的节点可以指向真实笔记，笔记变动图随之更新。短板是**美学克制、表现力有限**，不适合做对外交付的炫图。 **五维评分**：功能 ★★★（格式专精、Obsidian 绑定）；上手 ★★★★（懂 Obsidian 即可）；变现 ★★（小众工作流）；训练营 ★★★；社区 ★★★。 **变现与竞品**：在"个人知识管理"语境下它是隐形冠军，但作为通用可视化技能偏窄。建议作为 Obsidian 重度用户的装机件，而非主力可视化工具。 ## 生态分类思维导图 ```mermaid mindmap root((白板图引擎生态)) 按美学定位 手绘/白板派 excalidraw 核心地基 excalidraw-diagram 论证派 article-to-excalidraw 内容派 精密结构派 mermaid-generator 声明式 text-logic-diagram 逻辑SVG 主题交付派 architecture-diagram-zh 双主题HTML 卡片节点派 json-canvas Obsidian格式 按输出载体 SVG 矢量 HTML+SVG 可交互 Excalidraw JSON 可二次编辑 Mermaid 文本 可diff JSON Canvas 笔记联动 按核心价值 交付观感→ architecture-zh 内容变现→ article-to-excalidraw 视觉论证→ excalidraw-diagram 教学启蒙→ excalidraw核心 内部文档→ mermaid-generator 理性说理→ text-logic-diagram 个人PKM→ json-canvas ``` ## 推荐排行榜 **综合装机 TOP 3** 1. **architecture-diagram-zh**（4.50）—— 对外交付观感最强，加权第一。 2. **article-to-excalidraw**（4.30）—— 变现闭环最短，内容创作者首选。 3. **excalidraw 核心**（4.05）—— 手绘赛道地基，社区最厚。 **变现潜力 TOP 3** 1. architecture-diagram-zh —— 架构图是企业刚需，单价高。 2. article-to-excalidraw —— 产物即内容，直接变流量/付费。 3. excalidraw-diagram —— 论证型图表对咨询/产品溢价高。 **训练营适用 TOP 3** 1. excalidraw 核心 —— 教视觉思维的最佳载体。 2. excalidraw-diagram —— 稀缺的"视觉论证"教学点。 3. text-logic-diagram —— 教逻辑结构的利器。 **上手最快 TOP 2** 1. mermaid-generator —— 文本进图出，零门槛。 2. article-to-excalidraw —— 一篇文章一套产物。 **场景速查** - 写 README / 内部文档 → **mermaid-generator** - 做方案宣讲 / 招投标图 → **architecture-diagram-zh** - 做知识科普短视频 → **article-to-excalidraw** - 教"怎么用图说服人" → **excalidraw-diagram** - 给论文 / 课件配逻辑图 → **text-logic-diagram** - Obsidian 知识库组织 → **json-canvas** ## 结论与延伸 这七个引擎的共同底色是：**图不再是结构的副产物，而是独立的表达媒介**。结构化派（Mermaid、逻辑 SVG）解决了"画对"，主题交付派（architecture-diagram-zh）解决了"画得能交付"，而手绘白板派（Excalidraw 一族）解决了一个更难的问题——**画得像人、画得能说服人**。后者正是 2026 年可视化赛道最有溢价的角落：当 AI 能秒出"正确但冰冷"的 Mermaid 时，"潦草但有温度"的手绘论证反而成了稀缺品。 选型逻辑其实很简单——**对内要正确，选 Mermaid；对外要交付，选 architecture-diagram-zh；对受众要打动，选 Excalidraw 一族**。三派并不互斥，真正的装机最优解往往是"mermaid-generator 管文档 + architecture-diagram-zh 管交付 + article-to-excalidraw 管内容"的三件套，按场景各司其职。 ## 参考来源 1. [GitHub - coleam00/excalidraw-diagram-skill](https://github.com/coleam00/excalidraw-diagram-skill) — 手绘赛道高星技能（约 3500 stars，2026 年活跃），Excalidraw 一族的代表实现。 2. [The Excalidraw Diagram Skill — Teaching Coding Agents Visual Argumentation](https://ice-ice-bear.github.io/posts/2026-04-01-excalidraw-skill/) — 2026 年对"视觉论证"概念的深度拆解，本期 excalidraw-diagram 评测的核心理论依据。 3. [Mermaid vs Excalidraw — Whiteboard Sketches vs Code Diagrams](https://nicepick.dev/compare/excalidraw-vs-mermaid) — 手绘白板派与结构化声明派的对比指南，支撑本期"对内/对外"选型逻辑。 4. [Mermaid.js vs Excalidraw: Why Text-Based Diagrams Win Long-Term](https://medium.com/activated-thinker/how-one-comment-changed-the-way-i-create-flowcharts-eba4e69eafa9) — 结构化派长期优势的论证，支撑 mermaid-generator 在文档场景的不可替代性。 5. [The Ultimate Claude Code Resource List 2026](https://www.scriptbyai.com/claude-code-resource-list/) — 2026 年 Claude Code 技能生态全景索引，用于交叉验证图表可视化类技能的装机分布。 --- *本文由「51学通信」内容引擎出品，站长爱卫生（微信：gprshome201101）。* > [!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 等场景全覆盖。