首页 › skills-review › 文本出图四件对决:范式定边界

文本出图四件对决:范式定边界

概述

Round 7 的固定动作是同赛道横评。本期选的赛道是「文本出图」——把一段结构化描述变成一张图。这条赛道选手众多,但真正头对头撞车的是四件:excalidraw-diagram-generator(可编辑白板)、design-doc-mermaid(Mermaid 纯文本)、architecture-diagram-zh(双主题架构 HTML)、text-logic-diagram(六类关系 SVG)。它们很少比「谁功能多」,而是各自押注一种渲染范式——范式决定了产物的物理属性:能不能 diff、能不能二次编辑、能不能直接投屏,这些属性反过来画死了各自的边界。本期把四件放到同一道题下对撞,逐项比产物属性,并复核 6 月那轮八件横评之后座次有无变化。先说结论:三个月过去,没有新范式入场,四件座次未动;真正该审的是数据口径——同一件 Skill 的装机数字在不同轮次记录里能差出 20 倍。

评测对比表

选手 渲染范式 功能完整度 25% 设计质量 25% 实战效果 20% 上手难度 15% 社区活跃 15% 加权总分
excalidraw-diagram-generator Excalidraw JSON 白板 ★★★★ ★★★★ ★★★★★ ★★★★★ ★★★★★ 4.5
design-doc-mermaid Mermaid 纯文本 ★★★★ ★★★★★ ★★★★ ★★★ ★★★★ 4.1
architecture-diagram-zh 自包含 HTML+SVG ★★★★ ★★★★ ★★★★ ★★★★★ ★★★ 4.0
text-logic-diagram 六类关系 SVG ★★★ ★★★★★ ★★★★ ★★★★★ ★★★ 4.0

口径声明:装机量取本专栏 2026-06-25 轮记录的 skills.sh 单件口径——excalidraw 件 25K(GitHub 官方 awesome-copilot 收录版)、design-doc-mermaid 11.9K、coleam00 原件 5.8K;architecture 件常被引的「4.5k」是 GitHub star 数而非装机量,两者不可混用。实战效果分依据当时记录的社区反馈(掘金/博客报道)而非本次实测,特此说明。

逐件拆解

1. excalidraw-diagram-generator — 把图当「工程」交付的白板派

定位:自然语言进,Excalidraw JSON 出。它和其他三件的根本分歧在于:产物不是一张「死图」,而是一份可在 excalidraw.com 画布上继续拖拽、改色、协作的「活图」。社区给它按的头衔是「视觉论证」——让图表承载论点,而不是追求像素完美的工程制图(ice-ice-bear 那篇设计理念分析把这个定位讲得最透)。

SKILL.md 设计亮点:它把脏活全揽给了布局算法——节点间距、连线路径、文字换行自动处理,使用者只管描述关系。手绘风的「粗糙感」是刻意保留的审美决策:头脑风暴、教学板书、思路草图这些场景里,太精致反而显得「已经定稿不可改」。

短板:JSON 是嵌套对象,进 Git 后 diff 全是坐标噪音,code review 基本不可读;复杂大图自动布局后仍需手动微调。它的价值高度绑定 Excalidraw 生态——脱离画布编辑器,产物就是一坨不好读的 JSON。

2. design-doc-mermaid — 唯一把图当代码治理的工程派

定位:Mermaid 细分赛道装机头名(11.9K),专为设计文档、技术评审场景调优。四件里只有它把「图」纳入了软件工程流程:产物是纯文本,可以进 PR、可以行级 diff、可以在 review 评论里逐行讨论。

SKILL.md 设计亮点:裸写 Mermaid 人人都会,它的增量在于工程化补齐——文档上下文嵌入、命名规范、风格一致性。这很像 lint 规则之于代码:单看每条都不起眼,合起来才让「图库」在多人仓库里可维护。时序图、类图、设计文档图是它的主场。

短板:语法概念对非技术用户有门槛;审美上是「工程感」压过「设计感」,投屏给业务方时观感朴素;改一条连线的位置有时要牵动整段脚本——这也是 6 月轮次记录里 Excalidraw 派攻击它的主要火力点。

3. architecture-diagram-zh — 中文架构场景的深度特化派

定位:Cocoon-AI 系的中文双主题变体,只做一件事:系统架构、网络拓扑、云基础设施、安全架构。不追求广度,把「架构图」这个高频刚需做到即开即用。

SKILL.md 设计亮点有三处。其一,自包含 HTML(内嵌 SVG),浏览器双击直开,零依赖;其二,深色/浅色双主题一键切换——同一份产物既能投深色 Keynote 又能贴浅色文档,解决了「换个背景重画一遍」的老问题;其三,中文排版原生:节点标签、连线说明、图例注释按中文标点和字体优化。更狠的是输入侧:它能读代码仓库的目录、依赖、配置,推断组件关系直接出图——「读代码即出图」,描述成本趋近于零。

短板:范围窄,业务论证、数据图表一概不接;中文社区声量不错(掘金有「4.5k star 用了就回不去」的爆款报道),国际可见度低,长期维护存疑。

4. text-logic-diagram — 全场唯一约束「阅读体验」的设计派

定位:来自 xxsong5/draw-skills(MIT 协议,v1.1),输入一段论述,输出逻辑关系 SVG。它把逻辑图收敛成六种标准关系:递进(阶梯)、流程(编号节点)、循环(环形闭环)、层次(树形金字塔)、对比(左右对称)、矩阵(网格象限),支持多段文字一次拆成多张图。

SKILL.md 设计亮点:它是四件里唯一把「设计系统」写进规则的件——深色主题用 Cursor 暖深底(#141413)配 Claude 赭石强调色(#c96442),浅色用羊皮纸底,全局 JetBrains Mono 等宽字体,节点文字严控 15 字以内。注意这最后一条:约束的不是图种数量,而是文案长度——它管的是读图人的认知负荷。这种「两维正交」(关系类型 × 视觉主题)的写法是 SKILL.md 提示词工程的教科书样本。

短板:只认逻辑关系,不吃真实数据;社区小、更新看作者精力;六种关系之外的论证结构它会硬套,套错时需要人工纠偏。

同题竞画:一道题,四份卷

横评最怕各说各话,所以直接上对撞题。

题一(工程评审向):「订单从下单到履约经过五个服务,库存校验失败要走补偿流程——画出来给评审会用。」design-doc-mermaid 交出 flowchart 加时序图两段文本,进 PR 逐行可审,最优解;architecture-diagram-zh 交出自包含双主题 HTML,投屏体面,次优;excalidraw 交出手绘风 JSON,会上可现场拖拽标注、散会导 PNG 贴文档,走的是另一条价值线;text-logic-diagram 交卷最弱——「流程」关系能给编号节点,但补偿分支这种带条件的技术细节不是它的语义范围。

题二(观点论证向):「三家云厂商方案的成本与稳定性对比论证。」text-logic-diagram 独走:「对比」关系出左右对称骨架,「矩阵」关系出象限图,正好命中;architecture-diagram-zh 直接交白卷(不接业务论证);excalidraw 能画但论证骨架要自己讲;mermaid 能画但观感撑不起说服场景。

结论很清晰:两道题没有出现同一个赢家。四件的功能列表或许能互相模仿,但产物的物理属性无法互相模仿——这正是一个按「渲染范式」而非「功能」完成切分的成熟赛道的标志。

产物属性对照表(选型真正该看的列)

产物属性 excalidraw design-doc-mermaid architecture-zh text-logic
产物格式 Excalidraw JSON Mermaid 文本 自包含 HTML+SVG SVG
进 Git 可 diff 差(坐标噪音) 优(行级 diff) 中(HTML 噪音) 中(XML 冗长但可 diff)
二次编辑 优(画布拖拽) 中(改源码重渲) 中(改源码重开) 弱(重新生成)
中文排版 中 中 优(原生+双主题) 优(15 字约束)
渲染依赖 需 Excalidraw 编辑器 需 Mermaid 渲染器 浏览器直开 浏览器直开
装机量(2026-06 口径) 25K 11.9K star 口径 4.5k 无市场口径

安装命令

# 可编辑白板:GitHub 官方 awesome-copilot 收录版(装机王)
npx skills add github/awesome-copilot@excalidraw-diagram-generator

# Mermaid 文本件:设计文档场景专用
npx skills add spillwavesolutions/design-doc-mermaid@design-doc-mermaid

# 架构双主题件:仓库直装
git clone https://github.com/Cocoon-AI/architecture-diagram-generator

# 逻辑关系件:仓库内路径 skills/text-logic-diagram(MIT)
git clone https://github.com/xxsong5/draw-skills

顺带一提:四件里两件用 owner/repo@skill 的 @ 命名、两件要 clone 仓库——skills.sh 与 GitHub 两种分发渠道的安装惯例至今没有统一,这本身就是新人上手这条赛道的第一道摩擦。

选型决策树

flowchart TD
    Q["拿到一个画图需求"] --> P{"图的观众是谁"}
    P -->|"评审会现场 要投屏标注"| E["excalidraw-diagram-generator"]
    P -->|"技术文档 要进 Git 评审"| M["design-doc-mermaid"]
    P -->|"客户方案 要配深浅双主题"| A["architecture-diagram-zh"]
    Q --> L{"内容是论证而非系统"}
    L -->|"是 六类关系骨架"| T["text-logic-diagram"]
    E --> X["产物 可拖拽的 JSON"]
    M --> Y["产物 可 diff 的文本"]
    A --> Z["产物 双主题自包含 HTML"]
    T --> W["产物 六种关系 SVG"]

推荐排行榜

工程团队首选榜:1. design-doc-mermaid(唯一可 review)→ 2. architecture-diagram-zh(交付物体面)→ 3. excalidraw → 4. text-logic-diagram

现场沟通/教学榜:1. excalidraw(可当场改)→ 2. architecture-diagram-zh(投屏效果)→ 3. text-logic-diagram(讲结构利器)→ 4. design-doc-mermaid

内容创作者榜:1. text-logic-diagram(观点文配图)→ 2. architecture-diagram-zh(中文观感)→ 3. excalidraw → 4. design-doc-mermaid

新手第一件榜:1. excalidraw(生态最成熟、容错最高)→ 2. text-logic-diagram(粘文本即出图)→ 3. architecture-diagram-zh → 4. design-doc-mermaid(需语法概念)

三个关键发现

发现一:范式即边界,选型先选产物属性。 想清楚「这张图死后要不要进 Git、生前要不要被人改」,比看功能列表有用十倍。要 diff 选 Mermaid,要二次编辑选 Excalidraw,要投屏选双主题 HTML,要拆论证选六关系 SVG——四题四解,互不抢饭碗。

发现二:三个月座次未动,赛道进入成熟期。 6 月两轮横评(六件版与八件版)之后,9 月回看,头部依然是这四个范式、这几件代表,没有第五种渲染范式入场。对一个 2025 年底才爆发的赛道来说,范式层收敛得相当快——后续的竞争会从「谁能画」转入「谁画得稳、谁维护得久」。

发现三:装机数字有口径债,横评先对账。 同一件 Excalidraw Skill,本专栏 6 月 4 日轮记为 120K+ 安装,6 月 25 日轮记为 5.8K——差出 20 倍,显然是「全系列/整机口径」与「skills.sh 单件口径」的差别;architecture 件被广泛引用的 4.5k 则是 star 数。任何「装机王」叙事,先问口径再信数字。

参考来源

  1. skills.sh 市场:chart-visualization / baoyu-diagram / mermaid-diagrams — 可视化类装机量参照(2026-06-21 口径:antvis 4.1K、baoyu 9.7K、github excalidraw 24.5K)
  2. draw-skills/skills/text-logic-diagram/SKILL.md — 六种逻辑关系与设计系统原文(#141413 / #c96442、JetBrains Mono、15 字约束)
  3. coleam00/excalidraw-skill — Excalidraw 视觉论证件源仓库
  4. The Excalidraw Diagram Skill: Teaching Visual Argumentation — ice-ice-bear — 「视觉论证」设计理念深度分析
  5. Cocoon-AI/architecture-diagram-generator — 架构双主题件源仓库
  6. 程序员画架构图的痛,被这个 4.5k star 的 Claude Skill 一句话治好了 — 掘金 — 架构件社区热度与用法佐证 �件名称与存在性的一手依据

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