首页 › skills-review › 可改即共识:可编辑白板引擎七测

概述

本期聚焦一类长期被低估、却在企业落地中最具粘性的可视化引擎——可编辑白板/图表引擎。与前几期评测的"一图即传播""述即成图"等一次性成品图引擎不同,这一类的核心卖点不是"渲染得多漂亮",而是产物能否被人类继续拖拽、改名、改色、改结构。换句话说,它输出的不是图片,而是一份可二次编辑的活文档(.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 生态分类思维导图

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) — 自然语言/代码库/IaC/SQL 转 .drawio,C4 钻取、自检自修、万级官方图标
  2. axton-obsidian-visual-skills(axtonliu) — Obsidian 视觉技能包:Canvas/Excalidraw/Mermaid 三件套,手绘风三模式
  3. mermaid-skill(WH-2099) — 23 种图类型,/mermaid 命令,GitHub Action 周更官方文档
  4. excalidraw-diagram-skill(coleam00) — 自然语言生成可编辑 Excalidraw 图,强调视觉论证
  5. Turn Any Text Into Hand-Drawn Diagrams With Claude Code(Medium) — 手绘风文本转图的实践与生态综述

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