刊 DailyNews 科技 / AI 每日文摘2026 年 10 月 30 日

每日文摘

深挖 · diagram-design：把设计师品味写成规则，31k star 的 Claude 画图 skill

题图

让 AI 画过图的人都撞过同一堵墙：要不动动就甩你一张 Mermaid，布局歪扭、配色随缘；要不生成一堆 generic rounded boxes，一眼 AI 味。cathrynlavery/diagram-design 就是冲这堵墙来的——一个装在 Claude Code（以及 Codex、Pi、Kiro、OpenCode）里的开源 skill，8 月 12 日登顶 GitHub Trending，调研当天 30,962 star。它的做法很有意思：不造任何渲染引擎，而是把设计师的品味直接写成 LLM 可执行的规则。这篇按老规矩从技术、环境、评测三个维度拆，最后结合我的使用场景给判断。

是什么

diagram-design 是一个 Agent Skill 插件（MIT 协议，v2.6.12），口号很挑衅：“No shadows. No Mermaid slop."——不画阴影，不产 Mermaid 垃圾。它让 coding agent 生成「编辑级（editorial）」图表：39 种图型（架构图、时序图、ER 图、Sankey、鱼骨图、Wardley map 等）× 3 种变体（minimal light / minimal dark / full-editorial），产物是自包含的单文件 HTML（CSS 内嵌、SVG 内联、默认零 JS）。

看仓库结构会发现它不是传统工具代码库，而是「规则 + 范例资产包」：1 个 SKILL.md + 54 个 references/*.md 规则文件 + 155 个示例 HTML + 3 个 Python 辅助脚本，共 519 个文件 / 11.2 MB。

作者 Cathryn Lavery 不是工程师出身：建筑设计起步，转做产品，是 BestSelf Co. 的创始人（$55M+ 营收的 bootstrapped 公司，2022 年卖给 PE，2024 年又买回来重建成 AI-native 公司），现在在 littlemight.com 写面向非程序员的 AI 教程。她做这个 skill 的动机很直接：每次让 Claude 画图，出来的东西和她的站点风格完全冲突，只能在「跟 Figma 搏斗半小时」和「干脆不画」之间二选一——于是先为自己的写作需求做了这个工具。

核心机制：LLM 手写 SVG，品味写成硬规则

生成方式是最反直觉的一点：没有图表库、没有 DSL、没有渲染引擎。LLM 按规则直接手写自包含 HTML + 内联 SVG，无构建步骤、默认无 JavaScript，唯一外部资源是 Google Fonts（SKILL.md）。Mermaid 在这里的角色是输入而不是输出——你可以把现有 Mermaid 或 .drawio 源喂进去重画。

调度上走渐进披露（progressive disclosure）：先判断是否命中语义模式（信任边界、trace、瓶颈），再选视觉类型并强制加载对应的 references/type-<type>.md 才允许动笔。以 type-architecture.md 为例，约 550 词全是可执行硬规则：主流向必须统一左→右或上→下、dashed 矩形标信任边界（每图最多 3 个 zone）、连接线必须圆角正交（转角 r=8px，画对角线直接判 fail）、交叉箭头在次重要路径上加 hop 弧——这套规则和 ByteByteGo 系统架构图的视觉语法高度同构。

真正的核心创新是把「审美」量化成了预算和网格：

还有品牌 onboarding：说一句 “onboard diagram-design to https://yoursite.com”，skill 会抓取站点配色和字体映射成语义 token，并做 WCAG AA 对比度检查——图出来自动匹配你自己的博客。

导入管线的设计哲学值得一提：”Extract, don’t render / Redraw — never convert"。drawio_extract.py 把 .drawio 确定性解码为规范化 IR，文件头注释明说「这个脚本从不做设计决策」——确定性只用于解析输入，设计决策全部交给 LLM 加规则，并输出 fidelity ledger 告诉你重画时合并/删除了什么。

工程质量在 skill 生态里算天花板级：24 个 test + 21 个 verify 脚本按图型逐一校验，CI 里有官方 claude-code plugin validate --strict、跨 OS × Python 矩阵、截图新鲜度校验，docs/ 里还有 9 个 ADR。

怎么跑起来：一条命令，依赖极轻

Claude Code 安装就两条命令：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex、Factory Droid、Pi、Kiro、OpenCode 各有对应路径（README 有完整矩阵）；skills/diagram-design/ 目录本身自包含，直接拷贝或 symlink 进 ~/.agents/skills/ 即可跨工具共享——第三方宿主（如 ZCode 这类认 SKILL.md 与 .claude-plugin manifest 的环境）理论上开箱即用。

运行期依赖极轻：宿主 agent 能读写文件 + Python 3（导入/自检脚本用）就能出 HTML，不需要浏览器自动化。SVG 导出零依赖；PNG 导出需要本地 pip install playwright && playwright install chromium（skill 只检测、绝不自动装）。

成本结构干净：MIT 可商用，skill 本身免费、零 API key，唯一成本是宿主 agent 的模型调用。一个中文场景的已知摩擦：CJK 有 fallback 字体栈文档，但繁体 web font 没随包发布（issue #175），中文博客配图建议先实测字体回退效果。

数据说话：31k star 的成色

热度曲线本身是真实的：2026-04-16 创建（首发 13 种图型），4 月 19 日 550 star，8 月 12 日 GitHub Trending #1（TrendShift 独立记录，周榜 #2），9 月 5 日 30,962 star（GitHub API）。四个月从 0 到 31k，作者在 X/LinkedIn 的持续运营是明显放大器——她本来就有面向非程序员受众的自带流量。

最有分量的独立实测来自一篇日文博客（note.com 三方对比）：博主同机装了 ELI5、show-me、diagram-design 三个 skill 跑同样的三个任务（代码说明、向非技术者解释缺索引、博客 OAuth 流程图）。对 diagram-design 的评价：制作精细、解释逻辑清晰、适合博客和资料的「可发表级清稿图」；但日常代码理解场景「太重」、耗时与成本稳定偏高，同任务对比输给了轻量的 show-me（两者 SKILL.md 体量差 123 倍：3.3KB vs 39.5KB）。该实测的结论很值得抄下来：素 Claude（Sonnet/Opus 5）不开 skill 也能产出相当不错的图解，skill 的真正价值在固定输出形式与纪律，而非提升质量本身。

落差信号也要如实摆：HN 上唯一的提交 1 分 0 评论，热度集中在上 GitHub/X/LinkedIn；2026 年的 AI 画图工具综述和 Medium 架构图 skill 榜单都没收录它。真实缺陷类 issue 存在（企业代理后导出卡死 #176 等）。仓库自身口径也有点乱：About 栏写 38 种、README 写 39 种、references 里 type-*.md 有 52 个文件（含变体）——以 SKILL.md 的 39 为准。治理是单点模式：外部 PR 不直接 merge、统一并入作者的 consolidation PR（保留署名），contributors 28 位但核心维护者就她一个。

横向定位（综合该实测与生态盘点）可以切成三档，互补不互斥：

需求选用
日用随手图、快速理解代码show-me / ELI5（轻量）
工程可维护图（要一张能改的模型）drawio-skill / draw.io MCP 路线
对外发布的成品美学图diagram-design

值不值得跟

结合我自己的场景（写深挖博客、长期收集 ByteByteGo 架构图当范本、Claude Code/ZCode 双主力环境），我的判断是：值得装来试一轮，但把它当「成品图出品工具」而不是「画图默认项」。

三个具体理由：

  1. 博客文内配图正是它的最佳场景。第三方实测的三个任务之一就是博客 OAuth 流程图——「可发表级清稿图」这个定位跟深挖文章里的机制图、流程图需求严丝合缝。onboard 到自己域名后图自动带站点品牌，这是 Mermaid 路线永远给不了的。
  2. 它和我上一篇深挖的 system-design-101 构成闭环：101 提供视觉范式库（收藏学习用），diagram-design 提供把范式落成产物的规则引擎；type-architecture.md 那套信任边界/正交连接线/hop 弧规则，基本就是 ByteByteGo 架构图视觉语法的文字化。想要「ByteByteGo 风格的图」，这是目前最短的路径。
  3. 就算不装，方法论也值得抄。把审美量化成预算（9 节点上限）、网格（4px）和反模式清单，配上按图型的 verify 脚本和 ADR——这套「把主观标准写成可执行约束」的工程化思路，对写任何 skill（不只是画图）都有直接参考价值。

采纳路径建议一步到位验证：拿一篇真实博文的架构图需求试跑，重点看中文字体回退和 SVG/PNG 导出链路（对应 #175、#176 两个已知坑）；日用随手图交给轻量方案，对外成品图再请它出场。

参考阅读