diagram-design：这个开源项目让AI 画的图终于不再千篇一律

今天 GitHub 热榜第一是 diagram-design，一个给 AI 编码工具用的图表 Skill。它让 Claude Code、Codex 和 Pi 直接产出编辑级的图。你只要用一句话描述，它返回一张自包含的 HTML 图，不用再打开 Figma。 单日 2855 个 Star 把它顶到了榜首，总 Star 也过了万。

作者在 README 里写了自己做它的原因。每次要一张架构图、流程图，让 AI 画，出来的都是千篇一律的圆角框。这些图和网站风格完全不搭，最后要么在 Figma 里调半小时，要么干脆不画。 他就把这个烦恼做成一个 Skill，用一句话总结自己的产品：设计师不会讨厌的编辑级图表。

这个项目最核心的一句话是：最高质量的动作通常是删除。每个节点都得有存在的理由，强调色只留给读者第一眼该看的一两处。它把目标信息密度定在 4/10，宁少勿多。 一套硬性约束跟着走：1px 细线边框、无阴影、圆角最大 10px、所有坐标和间距必须能被 4 整除。它自己说，就是这些规则让图"不像 AI 生成的"。

它内置 27 种视觉类型，从架构图、流程图、泳道图到甘特图、雷达图、数据流图都有，每种还有 minimal light、minimal dark、full-editorial 三个静态变体。60 秒读一遍你的网站，它就能抓出品牌色和字体，套到所有图上。 手里已有的 draw.io 或 Mermaid 旧图，也能用导入命令重绘成统一风格，不用从零画。

和同类比，它的位置很特别。Mermaid 是文本画图最主流的工具，GitHub 上 89717 个 Star。draw.io 是手动绘图的老牌工具，7464 个 Star，功能全但要人一张张拖。diagram-design 卡在中间：借 AI 的省事，产出接近人工排版的效果。 它甚至在项目简介里直说 no shadows, no Mermaid-slop，态度很鲜明。

安装是直接挂到 AI 工具上，不是独立软件。

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

上面是 Claude Code 的两条命令。Codex 用一行 npx skills add，Pi 用一行 pi install，都是指向同一个仓库。装完在对话里说一句"给我的应用画张架构图"，它就直接生成 HTML 文件。

有几个坑要提前知道。导出 PNG 需要装 Playwright，得先跑 pip install playwright 再装 chromium。 首次使用它有个门控：style-guide 没定制的话，会停下来问你要不要先做品牌匹配。动效变体会拒绝任意内联脚本、远程资源和 CSS 导入，这是安全设计，但也意味着别想往图里塞自定义 JS。

README 还明确列了几种别用它的情况：推文里的快速字符图、纯列表、前后对比、只有一个框的"图"。这些场景它直接建议你用表格，或者就写一句话。README 里没有正式 Release 版本号，许可信息也没提及，落地商用前最好去仓库确认清楚。 它目前靠提交持续迭代，README 里能看到 v2.0 的循环图、v2.3 的语义模式这些新特性描述。

它适合天天要给文档配图、又烦 Figma 的人。写架构文档、做技术方案、给产品讲流程，一句话一张能直接嵌进网页的图，很省事。不适合想在浏览器里精细调整每个坐标的人，它要的是交付，不是设计工作台。 也不适合不用 Claude Code、Codex 或 Pi 的人，它是个 Skill，离开了这几款工具没法跑。

整体看，这是个很聪明的定位：不重新造画图工具，只给 AI 补一层设计品位。把"删掉多余的东西"这套审美，翻译成一堆 AI 能照做的硬规则。读完之后我最大的印象是，它解决的问题很小，但天天都有人在踩。

项目地址：https://github.com/cathrynlavery/diagram-design
竞品地址：https://github.com/mermaid-js/mermaid
竞品地址：https://github.com/jgraph/drawio