我今天（2026-10-08）翻 GitHub Trending，被一个叫 diagram-design 的项目戳中了。
如果你也用 Claude Code、Codex 这类编程智能体干活，大概率撞过同一个尴尬：让它“画张架构图”，它甩给你一个灰底圆角方块配箭头的玩意儿，跟你整个项目文档的调性八竿子打不着。作者 Cathryn Lavery 在 README 里写得很直白——她每次要图，要么跟 Figma 搏斗半小时，要么干脆不画。于是她自己写了一个 Claude Code 技能，专门治这个病。
① 一句话定位
diagram-design 是一套“社论级”图表技能，接在 Claude Code、Codex、GitHub Copilot、Factory Droid、Pi 以及一切兼容 Agent Skills 的主机里，把智能体随手画的“Mermaid 大路货”换成自包含、可贴牌的 HTML＋SVG 图表。它要解决的那个老痛点就一句话：AI 画出来的图，终于能像“你家的图”了。
② 核心能力 / 架构
整套东西是一个跨智能体的插件，仓库里同时挂着 .claude-plugin、.codex-plugin、.factory-plugin、.agents 四个目录，真正干活的逻辑都在 skills/diagram-design/ 这个共享技能包里——references/ 放每种图的类型指南，assets/ 放图标和画廊，scripts/ 里甚至自带 self_check.py，让装了技能的智能体能对自己生成的图做自检。它还有个挺巧的设计：用“语义模式”把“这张图在表达什么行为”和“它长什么样”分开描述，于是队列、策略追踪、信任边界这类图，可以复用离它最近的那一个类型，而不必无限扩张类型数量。仓库甚至用 CI 门禁锁死文档同步——SKILL.md 的描述一旦丢了某个类型的钩子词，或者画廊里某个示例断链，CI 直接失败，逼着作者不敢偷懒。
官方标题宣称支持“42 种图”；我翻了 SKILL.md 里的真实枚举，实际是一长串类型家族：架构图、架构差异图、流程图、时序图、状态机、ER/数据模型、时间线、泳道图、象限图、雷达图、环路/飞轮、嵌套图、树图、组织架构图、层叠图、爆炸轴测图、韦恩图、金字塔/漏斗、热力图、桑基图、甘特图、鱼骨图、Wardley 地图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图、数据库 Schema……粗数四十出头个家族，一部分还含子变体（比如“折线图”下挂着 slopegraph、ridgeline、streamgraph、bump）。所以“42”更接近一个取整后的宣传口径，别当精确计数。
技能包里还藏着一张决策路由表：你描述的是“两条规则追踪要分过/失败/跳过”，就归到流程图；是“信任边界加允许或禁止的入口路径”，就归到安全铺路架构——你不用背类型名，只要说清手里的材料，它自己归类。
它最狠的一招是“贴牌”。你只要让它读一次你的网站，它能在大约六十秒内把配色、字体、图标对齐到你的品牌，存成一个命名 profile；之后在每个客户项目里放一个 .diagram-design 标记写上 profile 名，并行工作区就能各用各的品牌而不打架。默认输出自包含 HTML，静态优先；需要“先讲 A 再讲 B”的有序解释时，可以开可选动效。它还能把已有的 draw.io、Mermaid、Excalidraw 源文件，按你指定的格式、尺寸、精细度重画一遍——这对被“Mermaid 大路货”荼毒过的老文档特别实用。
③ 上手步骤
前提是你的主机在支持列表里。Claude Code 用户直接在会话里敲两行：
/plugin marketplace add cathrynlavery/diagram-design/plugin install diagram-designCodex 是 `codex plugin marketplace add …` 再加 `codex plugin add …`；Copilot 用 `copilot plugin …` 同款动词；Factory Droid 是 `droid plugin marketplace add <仓库地址>` 再 `install --scope user`；Pi 则是 `pi install <仓库地址>` 后跑一次 `/reload`。至于 Cursor、Cline、Gemini CLI、Windsurf、Zed、Warp 这些“其它兼容主机”，作者接了 skills.sh 的跨智能体 CLI，一行 `npx skills add cathrynlavery/diagram-design` 就能把整个技能包（连同 references/、assets/、scripts/）装进你选的每个主机根目录。装好后你不用背语法——直接跟智能体说“把我这段微服务拆成架构图，用我品牌 profile”，它就会去翻类型指南、挑最贴切的那一种。仓库还附带 `/export-diagram`、`/import-mermaid`、`/import-excalidraw`、`/profile`、`/doctor` 等斜杠命令，导入旧图、导出成品、做品牌体检都能一句话搞定。想改风格指南做可编辑安装，就 `git clone` 后把 skills/diagram-design/ 软链到 `~/.claude/skills/diagram-design`（Windows 没开开发者模式时 CLI 会自动退化为复制）。要导出 PNG，先 `pip install playwright && playwright install chromium`，它会用 Playwright 默认 2× 栅格化——这一步属“待验”，本机没实跑，按 README 原文记录。
④ 适用场景与边界
谁该用：如果你天天要给客户方案、技术博客、内部文档配图，又嫌 Figma 太重、Mermaid 太丑，这套几乎是降维打击，尤其“品牌贴牌”和“导入旧图重画”两个能力是真省时间。
谁别碰：它本质是一套“设计语言约束”——你要的图不在那四十多个家族里，或者你就想随手涂张草图，它反而增加仪式感；只是偶尔要一张图的人，犯不着为它配一套品牌 profile。对团队来说，统一一套品牌 profile 还能顺手把文档视觉标准化，新人不用每人画出一种风格。
已知局限：成图质量仍取决于底层模型；PNG 导出依赖 Playwright 和 Chromium；品牌匹配要读你的网站，涉及对外站点的读取，敏感项目先掂量；可选动效需要浏览器环境。许可证是 MIT，放心改。
⑤ 来源与延伸
三个真实链接：仓库本体 `github.com/cathrynlavery/diagram-design`（我核对的星标数是 45,651，Trending 脚本报 45,667，差一点点属实时波动；许可证 MIT，语言 HTML，创建于 2026-04-16，今天仍有提交）；在线演示与画廊 `cathrynlavery.github.io/diagram-design/`；跨智能体安装入口 skills.sh（`npx skills add` 的出处，也是 Agent Skills 这套跨主机技能标准的事实入口——同一个 SKILL.md，Claude Code、Codex、Copilot 都能读，所以它才能一套技能喂给这么多主机）。作者 Cathryn Lavery 同时运营 littlemight.com 与 BestSelf.co，所以这套技能从第一天就把“和品牌一致”当成头等大事。
说到底，我们折腾这些技能，不就是为了少跟“AI 味”搏斗吗——图能像自己的，话能像人说的，这事才算真的提效了。