它是干什么的:一句话定位 + 为什么最近火

cathrynlavery/diagram-design 把自己定位成 Editorial diagrams your designer won’t hate——翻译过来就是编辑级、设计师不嫌弃的图表。MIT 协议、HTML/TypeScript,GitHub 仓库 cathrynlavery/diagram-design,目前总星 31,993,今日新增 +621(Trending 日榜第 3),作者 Cathryn Lavery,BestSelf.co 创始人,她自己也在 littlemight.com 写 AI / 创业 / 设计文章(据其个人简介及 README 末段)。

它真正解决的问题,作者在 README 「Why I built it」 一段讲得很直白:

  • 每次写文章需要一个架构图、流程图或重要性金字塔,问 Claude 得到的都是一个普通的圆角矩形图,跟自家站点风格不沾边。
  • 备选只有两条:进 Figma 磨 30 分钟,或者干脆不画。
  • 所以她做了一个 Agent Skill,装了之后 60 秒内自动匹配你网站色板与字体,产出一致性可截图即用的图。

为什么 9 月初这股 Agent Skills 风潮把它顶上 Trending:

  • 9 月初 Trending 被 skills 类项目包场,mattpocock/skills 当日 +2,206 颗星,人类层 skill / anthropic skills 也在涨,说明开发者现在对小而专的指令包比大而全的 Agent 框架更买账。
  • 单项目同时官方支持 Claude Code / Codex / Factory Droid / Pi / OpenCode / Kiro 六家 Agent 客户端(每个客户端对应一个 .claude-plugin/、.codex-plugin/、.factory-plugin/ 等市场清单),装一次到处能用,这种全兼容是别的技能类项目少见做到的。
  • 设计风格够硬:不是又一个 Mermaid 克隆,而是从审美层把 AI 出图那种塑料味按下来——一个 accent 色、1–2 个焦点元素、4px 网格、字体三件套(Instrument Serif / Geist / Geist Mono)。

核心功能:39 种图型 + 三大静态变体 + 55 枚图标

按 README 列的 What it makes,这个 Skill 默认产出三种静态变体(minimal-light、minimal-dark、full-editorial),不依赖构建、不跑 JS、不引外部图片,直接打开浏览器就能看。所有图型都按语义模式与视觉类型两层组织:行为先,排版后。

39 种图型分三类(本文挑最有代表性的各举几个)

  • 结构类(8 种):Architecture(组件+连线)、IT current-state(遗留资产+现代化)、Layer stack(分层堆叠)、Nested(嵌套/包含)、Tree(父子)、Org chart(汇报关系)、High-Level(端到端栈)、Component map。
  • 行为类(15 种):Flowchart、Sequence、State machine、Swimlane、Process、Loop/flywheel(2.0 新增)、Sankey、Fishbone、Deployment、Dependency graph、UML class、Story map、User journey、Medallion、Data flow。
  • 数据/坐标类(13 种):ER / data model、Quadrant、Radar/spider、Bar chart、Line chart、Scatter plot、Treemap、Polar、DP integration、DP security matrix、Kanban、Database schema、Gantt。

v2.5.10 这个 release 又补齐了最后 10 种布局语法:Sankey、鱼骨图、Wardley 地图、Kanban、User Journey、Deployment、Dependency graph、UML class、Story map、Database schema。加上此前已有的架构图、状态机、序列图、ER 等,凑齐了 39 种。

三个变体,按场景选

  • minimal-light / minimal-dark:黑白稿,直接放到文档、博客内文里不会突兀。
  • full-editorial:带摘要卡的杂志感版式,适合做推文配图、Newsletter 头图、Notion 文档封面。

仓库里提供了三套 HTML 模板(assets/template.html、assets/template-full.html、assets/template-motion.html),可以直接 cp 起步。

语义模式先于视觉类型(这是它跟普通出图工具的最大区别)

README 把这件事专门拉了一节讲:当行为很重要时,Skill 先选语义模式、再选视觉类型。自带的 7 种 routed patterns 包括:

  • fan-in queues and bottlenecks(汇聚型队列与瓶颈)
  • repeated stage slots(可复用阶段槽位)
  • unstructured-input transformation(非结构输入转换)
  • paired policy traces(成对的策略追踪)
  • secure paved roads(安全铺好的路)
  • governance catalogs(治理目录)
  • compensating security layers(补偿式安全层)

每个 pattern 都定义了触发词、原语、预算、反模式、静态兜底、以及最接近的视觉类型。这层抽象让画一张带配额重试的 LLM 调用序列图这种事不再卡在我应该用 sequence 还是 swimlane 上。

55 枚 IT/云图标,自动继承站点色板

Skill 内置 Tabler Icons(MIT)+ Simple Icons(CC0)裁出来的 55 枚单色图标——laptop、phone、user、server、database、Docker、Kubernetes、AWS、Azure、GitHub、Postgres 这些常画的都有。每个图标 currentColor 继承当前主题色,所以你 onboard 一次之后,所有图标自动跟站点调性走,不用再单画。

可选的可访问动效(默认静态,不是花活)

motion 不是新增视觉类型,而是给按步骤解释那种场景的可选附件:none/reveal/step/loop 四种模式,带 prefers-reduced-motion 兜底,reduced-motion 用户直接看到完整静态帧。控制器被锁死成 template-motion.html 那一个被审过的脚本,任何修改版都会被拒。默认 none,普通输出依然静态无 JS。

怎么用起来:四步把 Claude Code / Codex 装上,带品牌一起走

路径 A:在 Claude Code 里装(最省事)

1
2

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

注意 Claude Code 默认对第三方市场关掉了 auto-update,所以装完要顺手在 /plugin 里把 diagram-design 市场的 auto-update 打开,以后更新才能在后台自动追。

路径 B:在 Codex / Factory Droid / Pi 里装

  • Codex:codex plugin marketplace add cathrynlavery/diagram-design + codex plugin add diagram-design@diagram-design
  • Factory Droid:droid plugin marketplace add https://github.com/cathrynlavery/diagram-design + droid plugin install diagram-design@diagram-design --scope user
  • Pi:pi install https://github.com/cathrynlavery/diagram-design,然后在 Pi 会话里 /reload。Pi 没自动包刷新机制,改完去执行 pi update --extensions。

路径 C:想改样式 —— editable install(把仓库克隆下来)

1
2

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

一个一次性迁移提示:如果之前你用过 npx skills add 装过独立版,装上 marketplace 版后会停摆,要先卸载独立版再装 marketplace 版,以后才能跟着客户端的原生升级路径走。

路径 D:不开 AI 客户端,纯本地看 39 种图

克隆仓库后,直接 open skills/diagram-design/assets/index.html(Linux 用 xdg-open)就能在浏览器里翻全部 39 种图、切换 light/dark/full-editorial 三个 tab,先看看合不合你的口味再决定装不装。

让图跟你网站长得一样:onboard

装好之后,直接在 Agent 里说一句:

onboard diagram-design to https://yoursite.com

Agent 会去抓你的首页,抽出主色板 + 字体栈,映射到语义角色:

从你的站点抓什么变成什么 token
body 背景色paper
主文本色ink
次级 / 说明文本色muted
卡片 / 容器背景paper-2
CTA / 链接 / 标题里出现最多的品牌色accent
h1 字体族title
body 字体族node-name
code / pre 字体族sublabel

抓完还会先做一遍 WCAG AA 对比度检查——你的 accent 色如果在小字号(9–12px)下和背景对比度不达标,Skill 会自动提议一个调整值并解释为什么。

Onboard 完之后每张新图都用你网站的 paper / ink / accent / 字体,还会出一份 fidelity receipt 告诉你:采样了哪些 URL、每个色板对应哪个角色、字体用了哪几个 weight、字体源 URL 是什么。

多客户/多站点并行:Profile + Marker

每个客户 onboard 一次存为 named profile,放在 ~/.diagram-design/profiles/SLUG.md;然后在每个客户项目根目录放一个 .diagram-design 文件,里面写 profile: SLUG。这套机制在 Claude Code / Codex / Factory Droid / Pi 之间共享,你可以同时跑多个客户的写作工作区,各自用各自的色板,共享的 style-guide.md 不会被覆盖。

把已有的 draw.io / Mermaid 重画一遍

这是它最值钱的隐藏功能之一——你不需要从零画图,而是把旧的喂给它:

1
2
3
4

/diagram-design:import-drawio platform.drawio
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified

支持 .drawio / .drawio.xml / .drawio.png(内嵌图)/ .drawio.svg 四种 draw.io 容器,包括 base64 压缩的那堆乱码。Mermaid 接受 .mmd / .mermaid 单文件,也接受 Markdown 里一个或多个 ```mermaid 代码块。纯文本解析,不发网络、不起浏览器、不点链接——这点对处理企业内网私有 Mermaid 块的人很关键。

最厉害的是四旋钮:同一个源文件,Format(HTML/SVG/PNG/html+png) × Size(doc-inline / doc-wide / slide-16x9 / slide-4x3 / social-og / social-square / print-a4-landscape / print-letter-landscape / fit) × Detail(faithful ≤24 节点 / balanced ≤12 / simplified ≤7) × Audience(engineer / mixed / executive)自由组合。比如同一张平台架构图,投给工程师看可以保留 12 个节点、写满端口和字段;投给高管看就压到 7 节点、文案改成 Sign-in / Browse / Buy。每次转换完会输出一份 fidelity ledger——哪些节点被合并、哪些被折叠、哪些被丢,你看得到降级路径。

导出 PNG / SVG 给 Figma 和 PPT

1
2

/diagram-design:export-diagram path/to/diagram.html --svg-only
/diagram-design:export-diagram path/to/diagram.html --png-only --scale=3
  • SVG:抽出 svg 节点并注入 Google Fonts,可在浏览器、Figma、Illustrator 里独立渲染。
  • PNG:用 Playwright 以默认 2 倍光栅化,首次要 pip install playwright && playwright install chromium。

同类横评:Mermaid / Excalidraw / draw.io 各自强在哪

这不是谁替代谁,是分工——先把这个说清楚。

工具总星主要形态优势痛点
mermaid-js/mermaid90,119文本 DSL → SVG/PNG写起来快、Git 友好、Markdown 原生代码块排版是它的弱项,复杂图节点一多就乱,默认配色一看就是 AI 出的
excalidraw/excalidraw131,238白板式手绘风团队 brainstorming、画草图非常顺手难做正式文档配图,手绘风不适合工程文档
drawio / diagrams.net仓库 mirror桌面 + Web 拖拽自由度最高、企业部署友好、模板库巨大学习曲线陡;出来的图带工具感,需要二次美化
cathrynlavery/diagram-design31,993Agent Skill(HTML/SVG/PNG 输出)编辑级审美;按你站点自动套色板;旧图重画;可访问性默认到位必须在 Claude Code/Codex/Pi 等 Agent 里用;不能像 Excalidraw 那样多人共编

Star 数为 2026-09-06 从各项目 GitHub 主页抓取。换句话说:Mermaid 是会写就快,Excalidraw 是想画就动,drawio 是想要全,diagram-design 是想让 Agent 帮你出一张跟品牌一致的成品。

谁适合用、谁别碰、我的判断

现在就该用

  • 个人站长 / 独立博客作者:经常写技术教程、副业复盘、创业日记,需要架构图、流程图、数据流图,但又不想每次开 Figma。这就是这个 Skill 的目标用户。
  • 做 Newsletter 或 Substack 写作的人:每期需要一个能直接做配图、跟 Newsletter 风格一致的图。onboard 一次,以后每期图都是统一风格。
  • AI 工程师 / DevRel:经常要把系统画给非工程读者看。用 --audience=mixed 或 --audience=executive 直接出高管能读懂的版本,省得自己重画一份。
  • 企业技术博客 / 内训作者:已经有 .drawio 资产,用 import-drawio 命令一键重画、统一视觉。

再等等

  • 纯前端 / 交互设计师:你已经有 Figma 工作流,这个 Skill 解决不了你要交互的场景,顶多当一个从文字到初稿的起点。
  • 做高保真信息图(Infographic):Skill 明确说不做图表视觉类型的扩张,已经有 39 种定型了,不会为某张特殊海报再开洞。

别碰

  • 不想用 Agent / Coding CLI 的人:Skill 的全部价值建立在 Agent 调用上,纯手动画请继续用 Excalidraw。
  • 一次性的"一张图"需求:你为了一张图装全套 Skill 是亏的,直接打开 Mermaid Live Editor 还更快。
  • 在嵌入式 / 离线企业内网跑 Claude / Codex 的人:Skill 依赖远程大模型来理解你的描述 → 选类型 → 渲染,完全离线场景下用不上。

我的判断

这个项目踩中的不是模型层也不是画图层,而是样式系统和品牌一致性两个被严重低估的需求。绝大多数个人站长/副业作者做内容最大的隐性成本就是每张图都长得不一样、文档看着像拼凑的——diagram-design 把这件事变成 onboard 一次、之后忘了,它真正的护城河是审美判断和设计纪律,而非技术。

我个人最欣赏的是三件事:

  • 默认拒绝花活,默认静态输出,默认拒绝 JS、阴影、随机圆角——这是真的懂信息密度的团队才写得出的规矩。
  • Semantic patterns separate from visual types 这层抽象是工业级的——它把画什么和怎么画解耦,让 Skill 能在不膨胀图型数量的情况下覆盖更多业务场景。
  • 没有把 draw.io/Mermaid 用户当敌人,而是给他们一条升级路径:import-drawio / import-mermaid 命令让现有资产无痛迁移,这种"打补丁不要替天行道"的产品哲学非常难得。

不建议你现在为这个 Skill 去重写整套内容流水线。先装一次、onboard 一个真实项目、画 5 张图试试,再决定要不要把它纳入主流程。它是个耐用品,不是引爆点——这正是它长期值得 star 的原因。

一句话总结

39 种图型、三套静态变体、按你站点自动套色板和字体、把已有的 draw.io/Mermaid 重画一遍——cathrynlavery/diagram-design 是给 Agent 时代内容创作者的图表设计系统,不是又一个 Mermaid 克隆。GitHub 总星 31,993,今日新增 +621,MIT 协议,六家 Agent 客户端官方支持。

站内互链

参考链接

顺带一提:画图久了,桌面舒服程度直接影响产出——极客桌面 2000 元整套按「久坐盯屏」配的。

本文由拾光札记编辑部整理,勘误请联系我们。