让 Claude 或 Codex 画张架构图，只会得到一个通用圆角框，配色像从模板库里随机抽的，跟你网站那套风格八竿子打不着。还要再钻进 Figma 折腾半小时调色，折腾来折腾去越画越生气。

来看看 Diagram Design，3.3 万多个 Star，一整套的设计系统，让 AI 出的图直接能进你正经的文章和 slide。

它一口气给了 39 种编辑级图表类型，全部自包含 HTML 加 SVG，没有构建步骤、没有跑脚本、没有外部图片依赖。明令不要阴影、不要通用圆角框、不要 Mermaid 那套。

每种图都出三套静态变体：极简亮色、极简暗色、完整编辑版。浏览器直接打开看，不用打包。同一个意思，也能从你手上的 draw.io 或 Mermaid 重画过来。

特点

01 语义和版式分开。它先把行为归到语义模式，再把长相归到版式。一个队列、一条策略路径、一处信任边界，都可以套最近的类型，不必为了换个场景就新开一种图。类型数稳在 39，不膨胀。

02 品牌 60 秒上车。对它说「onboard 到我的网站」，它会抓首页主色板和字体栈，映射成语义角色：纸面、墨色、弱化、强调、链接，然后写进 style 指南。之后每张图都套你的色，CTA 色变成焦点强调色，正文字体变成节点字族。还带对比度校验和保真回执。

03 无障碍默认到位。每张 SVG 自带 role、标题和描述，ID 按图加前缀，多张图内联同页也不撞名。对比度在写令牌前先查 WCAG AA，不达标的会提议调过的色并说明原因，装饰图标对读屏隐藏。

04 顺手重绘老图。你有 draw.io 或 Mermaid 的老图，喂给它，它按你要的格式、尺寸、详略、受众重画一遍。格式能选 HTML、SVG、PNG；尺寸能切文档、slide、社交图、打印；详略按固定阶梯降级，每回还附一张保真台账。

快速上手

01 Claude Code 两行装。在 Claude Code 里先后敲这两行：

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

02 Codex 同理。Codex 也是两条命令：

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

03 开口就说人话。装完直接聊就行：「给我画个架构图，前端、后端、数据库、Redis 缓存」「来个象限图，Q2 项目按影响力和工作量排」。它挑类型、出 HTML、存盘。Pi、Kiro、OpenCode 这些宿主也都能接。

友情提示

• 它是 Agent 技能，得有宿主。它本质是一套 Claude Code 技能包，得装在能跑插件或 Agent Skill 的环境里，单独丢个仓库出来它自己不画图。
• 39 种不是无限。语义模式覆盖了常见行为，但真遇到奇葩构图，还是得自己写模板或改 style 指南。
• 默认皮要先绑定。新项目第一次用，会先问你要不要跑品牌绑定、手填令牌、还是先用默认。想每张图都像你的，先花那 60 秒 onboarding。
• 读站取色有分寸。onboarding 读你的公开网站，字体直接用并渲染后校验，不会偷偷换成系统字体。许可是 MIT，能看能改能商用，放心。

写在最后

AI 能写代码、能写文章，但出的图一直像临时工画的。Diagram Design 这 3.3 万 Star 说明，想要「能进正经文档」的图的人不少。如果也被 AI 的丑图烦过，就来试试这个吧。

Github：https://github.com/cathrynlavery/diagram-design