<!-- title: 可改即共识：可编辑白板引擎七测 -->

## 概述

本期聚焦一类长期被低估、却在企业落地中最具粘性的可视化引擎——**可编辑白板/图表引擎**。与前几期评测的"一图即传播""述即成图"等一次性成品图引擎不同，这一类的核心卖点不是"渲染得多漂亮"，而是**产物能否被人类继续拖拽、改名、改色、改结构**。换句话说，它输出的不是图片，而是一份**可二次编辑的活文档**（`.excalidraw` / `.drawio` / `.canvas` / Mermaid 源码 / HTML）。这种"可改"属性决定了它的真实使用场景：架构评审会上的实时改图、技术方案的多轮迭代、教学板书的可复用资产。本期横评覆盖 Excalidraw 手绘派（3 款）、draw.io 专业派（1 款）、Mermaid 文本派（1 款）、SVG 逻辑派（1 款）、HTML 交互派（1 款），共七款引擎，按功能完整度、上手难度、变现潜力、训练营适用性、社区活跃度五维打分，最终由 drawio-skill 以 4.45 分登顶，而表面更"性感"的手绘派在变现维度被专业派反超。

## 评测总览表

| 引擎 | 输出形态 | 编辑性 | 上手 | 变现 | 综合分 |
|------|---------|--------|------|------|--------|
| **drawio-skill**（Agents365） | `.drawio` + PNG/SVG/PDF | 原生可编辑（draw.io） | ★★★ | ★★★★★ | **4.45** |
| **architecture-diagram-zh** | 双主题 HTML（内含 SVG） | 源码可改、主题可切 | ★★★★ | ★★★★ | **3.85** |
| **article-to-excalidraw** | `.excalidraw` + 提词器脚本 | Excalidraw 全可编辑 | ★★★ | ★★★★ | **3.65** |
| **excalidraw**（Obsidian 视觉包） | `.md`/`.excalidraw`/动画 | 全可编辑、支持动画 | ★★★★ | ★★★ | **3.60** |
| **excalidraw-diagram** | `.excalidraw` JSON | Excalidraw 全可编辑 | ★★★★ | ★★★ | **3.60** |
| **mermaid-skill**（WH-2099） | Mermaid 源码 | 纯文本、最强可改 | ★★★★★ | ★★ | **3.55** |
| **text-logic-diagram** | SVG（六种逻辑关系） | SVG 可编辑、精度高 | ★★★★★ | ★★★ | **3.55** |

> 评分基于五维加权：功能完整度 25% / 上手难度 20% / 变现潜力 25% / 训练营适用性 15% / 社区活跃度 15%。

## 逐个深度评测

### 1. drawio-skill（Agents365）— 专业派的重型兵器

**来源 / 安装**：`github.com/Agents365-ai/drawio-skill`，单文件 `SKILL.md` 驱动，零 MCP、零守护进程；前置依赖为 draw.io 桌面 CLI（macOS `brew install --cask drawio`，Linux 需 `xvfb`，建议版本 ≥30 以解锁 Mermaid→`.drawio` 转换与 ELK 布局）。

**核心能力**：这是本期唯一能把"非自然语言输入"自动转图的引擎。它支持四类输入源：自然语言、**真实代码库**（Python/JS-TS/Go/Rust 的 import 图与类继承图）、**IaC 配置**（Terraform/K8s/docker-compose，资源渲染为官方 AWS/Azure/GCP/K8s 图标，边由真实引用推导）、**SQL DDL**（`CREATE TABLE` 转 ER 图，带 PK/FK 与鸦爪标）。更硬核的是 C4 模型钻取：一条命令生成 System Context→Container→Component 多页 `.drawio`，父元素可点击跳转子页。配合"自检+自动修复"（读取自己输出的 PNG，最多两轮修正重叠/裁切/堆边）和最多 5 轮迭代反馈，几乎是一个自动化的架构制图流水线。

**五维评分**：功能★★★★★ / 上手★★★ / 变现★★★★★ / 训练营★★★★ / 社区★★★★★。

**变现分析**：变现天花板最高。它直接命中企业架构咨询、售前方案、云迁移评审三大付费场景——"把客户的 Terraform 一键变成带官方云图标的架构图"几乎是按项目报价的服务。可包装为 SaaS（上传 repo/IaC 出图）、企业内训（架构师制图规范）、合规审计可视化产品。

**对比**：相比 Excalidraw 派的"草稿美感"，drawio-skill 输出的是可直接进入招标书的成品；相比 Mermaid，它解决了 Mermaid 无法表达云厂商官方图标、无法做多页钻取的痛点。

### 2. architecture-diagram-zh — 中文交互架构图的稳妥选择

**来源 / 安装**：本地内置 skill，无需联网安装，直接通过 Skill 工具触发；输出为独立 HTML 文件（内含 SVG 图形）。

**核心能力**：定位是"系统架构图、基础设施拓扑、云架构可视化、安全架构图、网络拓扑图"。两个差异化亮点：**深色/浅色双主题一键切换**（内置主题切换按钮），以及**原生中文标注**——这两点恰好是大量英文 skill 在国内场景的硬伤。SVG 内嵌意味着图本身就是矢量、可缩放、可二次在浏览器里查看，源码也可手工微调。

**五维评分**：功能★★★★ / 上手★★★★ / 变现★★★★ / 训练营★★★★ / 社区★★★。

**变现分析**：面向 B2B 的方案展示、内部技术分享、招投标 PPT 嵌图。双主题切换对"白天会议室浅色 / 深夜值班深色"的真实工作流很友好，可作为企业内部"架构图模板库"的基础设施售卖，定价空间中等偏上。

**对比**：不如 drawio-skill 能吃代码库，但胜在零依赖、纯前端、即开即用；相比 Excalidraw 更"正式"，适合不能露怯的对外场景。

### 3. article-to-excalidraw — 文章变白板，再变短视频

**来源 / 安装**：本地内置 skill；输入一篇科普/技术 MD 文章，输出"一个垂直布局的 Excalidraw 文件（封面 + 多个内容区域） + 一个提词器友好的口播脚本"。

**核心能力**：它把 Excalidraw 从"单张图工具"升级为"内容生产线"。一篇文章被拆解为封面区 + 若干内容区，每个区域可独立讲解；配套的口播脚本直接喂提词器，形成"图+词"的短视频素材。本质是把知识科普、技术讲解的视频前置工作自动化。

**五维评分**：功能★★★★ / 上手★★★ / 变现★★★★ / 训练营★★★★ / 社区★★★。

**变现分析**：变现路径清晰——短视频知识付费。手绘风白板 + 口播是 B 站/视频号/小红书高完播率的经典形态，"一篇文章一条视频"的工业化产出适合个人 IP 矩阵号。训练营场景同样强：可作为"知识转视频"教学的标准起点。

**对比**：相比纯 excalidraw，它补齐了"从内容到成片"的最后一公里；相比 content-to-video 类引擎，它的中间产物（.excalidraw）仍可手工精修，保留了创作者的控制权。

### 4. excalidraw（Obsidian 视觉包）— 手绘派的瑞士军刀

**来源 / 安装**：源自 `axtonliu/axton-obsidian-visual-skills`，与 Mermaid、Canvas 同包；MIT 协议，实验性状态。

**核心能力**：三种输出模式是它的招牌——**Obsidian 模式**（默认输出 `.md`，Obsidian 直接打开）、**标准模式**（`.excalidraw`，可在 excalidraw.com 编辑分享）、**动画模式**（借助 excalidraw-animate 生成动画）。支持流程图、思维导图、层级、关系、对比、时间线、矩阵、自由布局八种类型；使用 Excalifont（fontFamily: 5）保证手绘美感，且对中文有专门字符处理。触发词中英双语（"画图""流程图""mind map"）。

**五维评分**：功能★★★★ / 上手★★★★ / 变现★★★ / 训练营★★★★ / 社区★★★。

**变现分析**：手绘风的"软价值"高但"硬变现"弱——更适合个人知识管理、教学板书、社群分享，难直接做成付费产品。可作为 Obsidian 生态付费课程/模板包的配件。

**对比**：相比 excalidraw-diagram 更强调"与 Obsidian/动画生态联动"，覆盖面更广但单点深度略浅；作者明确标注"实验性，输出质量随模型版本波动"，生产环境需注意。

### 5. excalidraw-diagram（coleam00 一脉）— 让图"会说话"

**来源 / 安装**：源自社区 `coleam00/excalidraw-diagram-skill` 及多个衍生版本；本地内置触发词含"可视化工作流、架构、概念"。

**核心能力**：核心理念是生成"make visual arguments（做出视觉论证）"的 Excalidraw JSON，覆盖架构图、数据流、工作流、系统设计。相比纯美化，它更关注图的**说服结构**——要素之间的从属、因果、对比关系是否讲得清楚。输出为标准 `.excalidraw`，可继续在 Excalidraw 全平台编辑。

**五维评分**：功能★★★★ / 上手★★★★ / 变现★★★ / 训练营★★★ / 社区★★★★。

**变现分析**：适合技术博客配图、方案论证、产品 PR 文档。coleam00 系在社区知名度较高（多平台分发），但手绘风格限制了企业级付费场景。

**对比**：在"图的说服力"维度强于 Obsidian 视觉包，但在"Obsidian/动画联动"上弱于后者；二者互补。

### 6. mermaid-skill（WH-2099）— 文本派的零成本王者

**来源 / 安装**：`github.com/WH-2099/mermaid-skill`，安装即 `cp -r` 到 `.claude/skills/` 或 git submodule；用 `/mermaid` 命令触发。

**核心能力**：覆盖 23 种图类型，横跨流程（Flowchart/State/Journey）、结构（Class/ER/C4/Architecture）、时序（Sequence/Gantt/Timeline/GitGraph）、数据可视化（Pie/XY/Sankey/Quadrant/Radar/Treemap）、组织（Mindmap/Kanban/Block/Requirement）、技术（Packet/ZenUML）。最被低估的亮点是**内置 GitHub Action 每周自动从官方 mermaid-js 仓库同步语法文档**——这意味着 Mermaid 升级后 skill 不会过时。

**五维评分**：功能★★★★ / 上手★★★★★ / 变现★★ / 训练营★★★★ / 社区★★★。

**变现分析**：变现最弱。Mermaid 是事实标准的免费文本图表语法，本身无壁垒，skill 只是封装。价值在于"教学/模板"而非产品。但正因零成本，它是训练营里"第一张图"的最佳起点。

**对比**：可编辑性最强（纯文本，diff 友好，Git 可追踪），但表达力天花板低于 draw.io（无云厂商官方图标、无多页钻取）；与 drawio-skill 的 Mermaid→`.drawio` 转换形成上下游关系。

### 7. text-logic-diagram — 精准逻辑关系的 SVG 雕刻师

**来源 / 安装**：本地内置 skill；输入文本段落/论述，输出精准的 SVG 逻辑图，一次可拆多张。

**核心能力**：专注六种逻辑关系——**递进、流程、循环、层次、对比、矩阵**。与"什么都画"的通用引擎不同，它强制把内容归类到这六种结构里，输出的是结构高度规整、关系语义明确的 SVG。这种"先定关系、再定形"的思路，对论述类内容（论文、方案、复盘）特别友好。

**五维评分**：功能★★★ / 上手★★★★★ / 变现★★★ / 训练营★★★★ / 社区★★★。

**变现分析**：适合咨询报告、方法论可视化、知识卡片。精准度高但功能面窄，作为"逻辑图专项工具"嵌入更大的内容流水线更划算，单独变现空间有限。

**对比**：在"关系语义的准确性"上碾压通用手绘派，但牺牲了自由度；与 architecture-diagram-zh 互补（一个管逻辑、一个管架构）。

## Skills 生态分类思维导图

```mermaid
mindmap
  root((可编辑可视化引擎))
    手绘白板派
      excalidraw Obsidian视觉包
        三模式 md/excalidraw/动画
      excalidraw-diagram
        视觉论证 JSON
      article-to-excalidraw
        文章转白板加口播
    专业工程派
      drawio-skill
        代码库/IaC/SQL转图
        C4钻取 自检自修
      architecture-diagram-zh
        双主题HTML 中文标注
    文本逻辑派
      mermaid-skill
        23类型 周更文档
      text-logic-diagram
        六种逻辑关系SVG
    价值轴
      变现天花板 drawio最高
      上手门槛 mermaid/text最低
      训练营起点 mermaid最佳
```

## 推荐排行榜

**🏆 综合实力榜**
1. drawio-skill — 4.45（专业、能吃代码、变现强）
2. architecture-diagram-zh — 3.85（零依赖、双主题、中文）
3. article-to-excalidraw — 3.65（内容→视频闭环）
4. excalidraw / excalidraw-diagram — 3.60（并列，手绘双雄）
5. mermaid-skill / text-logic-diagram — 3.55（并列，文本逻辑双低门槌）

**💰 变现潜力榜**
1. drawio-skill — 企业架构咨询、云迁移可视化、合规审计
2. article-to-excalidraw — 短视频知识付费、IP 矩阵号
3. architecture-diagram-zh — B2B 方案展示、内部模板库
4. excalidraw / excalidraw-diagram / text-logic-diagram — 个人 IP、教学配件
5. mermaid-skill — 商品化无壁垒，仅作教学

**🎓 训练营上手榜（最快出第一张图）**
1. mermaid-skill — `/mermaid` 一行命令，零依赖
2. text-logic-diagram — 自然语言→SVG，关系自动归类
3. excalidraw / architecture-diagram-zh — 触发词即出图
4. drawio-skill — 需装桌面 CLI，门槛最高但回报最大

**选型建议**：要对外招标书选 **drawio-skill**；要中文交互演示选 **architecture-diagram-zh**；要做短视频知识号选 **article-to-excalidraw**；要低成本教学生画第一张图选 **mermaid-skill**。本期最值得长期持有的单一资产是 drawio-skill——它是少数能把"不可变现的草稿"升级为"可报价的工程交付物"的引擎。

## 参考来源

1. [drawio-skill — From Text to Professional Diagrams（Agents365-ai）](https://github.com/Agents365-ai/drawio-skill) — 自然语言/代码库/IaC/SQL 转 `.drawio`，C4 钻取、自检自修、万级官方图标
2. [axton-obsidian-visual-skills（axtonliu）](https://github.com/axtonliu/axton-obsidian-visual-skills) — Obsidian 视觉技能包：Canvas/Excalidraw/Mermaid 三件套，手绘风三模式
3. [mermaid-skill（WH-2099）](https://github.com/WH-2099/mermaid-skill) — 23 种图类型，`/mermaid` 命令，GitHub Action 周更官方文档
4. [excalidraw-diagram-skill（coleam00）](https://github.com/coleam00/excalidraw-diagram-skill) — 自然语言生成可编辑 Excalidraw 图，强调视觉论证
5. [Turn Any Text Into Hand-Drawn Diagrams With Claude Code（Medium）](https://medium.com/@algoinsights/turn-any-text-into-hand-drawn-diagrams-with-claude-code-93bcb07fd1d7) — 手绘风文本转图的实践与生态综述

> [!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学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)
