# 文本出图四件对决：范式定边界 ## 概述 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 | 无市场口径 | ## 安装命令 ```bash # 可编辑白板：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 两种分发渠道的安装惯例至今没有统一，这本身就是新人上手这条赛道的第一道摩擦。 ## 选型决策树 ```mermaid 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](https://skills.sh/antvis/chart-visualization-skills/chart-visualization) — 可视化类装机量参照（2026-06-21 口径：antvis 4.1K、baoyu 9.7K、github excalidraw 24.5K） 2. [draw-skills/skills/text-logic-diagram/SKILL.md](https://github.com/xxsong5/draw-skills/blob/main/skills/text-logic-diagram/SKILL.md) — 六种逻辑关系与设计系统原文（#141413 / #c96442、JetBrains Mono、15 字约束） 3. [coleam00/excalidraw-skill](https://github.com/coleam00/excalidraw-skill) — Excalidraw 视觉论证件源仓库 4. [The Excalidraw Diagram Skill: Teaching Visual Argumentation — ice-ice-bear](https://ice-ice-bear.github.io/posts/2026-04-01-excalidraw-skill/) — 「视觉论证」设计理念深度分析 5. [Cocoon-AI/architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) — 架构双主题件源仓库 6. [程序员画架构图的痛，被这个 4.5k star 的 Claude Skill 一句话治好了 — 掘金](https://juejin.cn/post/7634079284186677299) — 架构件社区热度与用法佐证 �件名称与存在性的一手依据 > [!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 等场景全覆盖。