45,500 Stars：AI 终于能画出「不像 AI」的图了

让 Claude Code 画一张架构图，你得到的通常是圆角矩形 + 渐变 + 阴影——那种”一看就是 AI 生成的”视觉风格。Cathryn Lavery 的 diagram-design 项目用 45,500 个 GitHub Star 证明了一件事：AI 生成的图表可以拥有编辑级排版品质，而且不需要 Figma。这个项目是一个 Claude Code / Codex / Copilot 的 skill 插件，内置 42 种图表类型，输出自包含的 HTML + SVG，没有 JavaScript，没有构建步骤，没有外部图片依赖。

“没有 Mermaid 垃圾”

项目的 slogan 直接叫”No Mermaid slop”，这话说得毫不客气。Mermaid 是程序员画图的事实标准，但它的输出风格是固定的：圆角矩形、等宽字体、机械的箭头排列。diagram-design 走的是完全相反的路——编辑排版（editorial design），参考的是杂志和书籍里的图表风格，而不是技术文档里的框线图。每种图表有三个变体：minimal light、minimal dark 和 full-editorial，直接在浏览器里打开就能看，零依赖。

42 种图表类型覆盖了绝大多数技术写作场景：架构组件图、序列图、状态机、ER 数据模型、时间线、泳道图、象限图、雷达图、飞轮/循环图、嵌套层级图、组织架构图、金字塔/漏斗、柱状图、Treemap、折线图、甘特图、散点图、Sankey 图、鱼骨图、Wardley 价值地图、看板图、用户旅程、部署图、依赖图、UML 类图、故事地图、数据库 schema……最特别的是”Exploded axonometric”（爆炸轴测图），能把一个手机拆解成零件沿一条轴展开，或者把一栋办公楼的房间从单视角全部呈现。

设计哲学：最高质量的动作是删除

作者在 README 里写了一句设计信条：”The highest-quality move is usually deletion. Every node earns its place. The accent color is reserved for the 1-2 things the reader should look at first. Target density: 4/10.” 翻译成中文就是：每个节点都必须证明自己存在的理由，强调色只留给读者应该最先看到的 1-2 个元素，目标密度是 10 分里的 4 分。这个密度控制是”编辑级”和”AI 级”图表的核心区别——AI 默认往图里塞东西，编辑排版默认删东西。

品牌匹配是另一个杀手功能。skill 会读取你网站的 CSS 变量，提取主色调、字体和间距，然后 60 秒内把图表风格对齐到你的品牌。这意味着你不需要在 Figma 里花 30 分钟选颜色——AI 自己从你的网站里学。

谁会用这个

最直接的受众是技术写作者：写架构博客、做技术分享、写产品文档的人。过去画一张像样的架构图，要么打开 Figma 花半小时调颜色对齐间距，要么用 Mermaid 接受”能看但不好看”的结果。diagram-design 把这两步压缩成一句话：”帮我画一个用户注册的泳道图，风格匹配我的网站。” Claude Code 读取网站 CSS，选择泳道图模板，输出一个可以直接贴进博客的 HTML 文件。

另一个被低估的受众是 AI agent 开发者。项目支持”语义模式”（semantic patterns）——队列、策略追踪、信任边界这些行为描述可以和任何现有图表类型组合，不需要扩展类型数量。这意味着如果你的 agent 需要生成”这个微服务的权限矩阵”或”数据管道中每个角色的访问权限”，不需要专门设计一种新图表，用现有的 matrix 类型 + 语义标注就够了。

核心观点：diagram-design 解决的不仅是”画得好不好看”的问题，而是把”图表从草稿到发布”的流程从 30 分钟压缩到 10 秒。如果你每周都要画 2-3 张架构图，这个 skill 一周就能回本时间成本。安装命令一行：/plugin marketplace add cathrynlavery/diagram-design。