diagram-design：把官网吗输进去，图表就先像你自己家的了

不是“支持多少种图表”，也不是“生成多快”，而是它让你先给一个网站地址。

比如，把自己的官网丢给它。

它会去抓首页，读背景色、正文色、强调色、字体栈，然后把这些东西映射成一套图表用的 token。纸张色、文字色、弱化色、accent、标题字体、节点字体，后面新生成的图表都跟着这套走。仓库里写得很直接：Your brand in 60 seconds。

这一下就和很多 AI 画图工具拉开了。

以前让模型画架构图，最常见的结果是什么？

一堆圆角矩形。

颜色有点像模板站随机抽的，线条也没什么脾气。你拿去放在官网、博客、融资 deck 里，总觉得它是从另一个世界截过来的。

diagram-design 想解决的不是“能不能画图”。

它盯的是另一件事：图画完之后，能不能直接放进你的内容里。

我挺喜欢它的 onboarding 流程。

你对 Claude Code 说一句：把 diagram-design onboard 到某个网址。它会抓 homepage，提取主色和字体，再给你一个 proposed diff。你确认之后，它把这些值写进 references/style-guide.md。后面不管是架构图、流程图，还是四象限，都从这里读样式。

这里有个小细节。

它不是把某个颜色值粗暴塞进所有地方，而是先变成语义角色。

比如网站 CTA 颜色会变成 accent，body 背景会变成 paper，正文色会变成 ink。

这事听起来像设计系统里的老生常谈，但放到 AI 生成图表里，挺管用。因为模型最容易乱的地方，恰恰是“每次都觉得自己可以重新设计一次”。

diagram-design 把这部分收住了。

仓库页面现在写的是 14 种图表，不只是常见的 architecture、flowchart、sequence、state machine，也有 ER/data model、timeline、swimlane、quadrant、venn、pyramid / funnel 这类更偏内容表达的图。每种还有 minimal light、minimal dark 和 full-editorial 三个变体。

我会把它放在“写技术文章的人会经常用到”的那一类工具里。

比如你写一篇 OAuth 流程，不想截图一张 Mermaid 图糊弄过去；写一篇系统架构拆解，又不想打开 Figma 调半小时线距和配色；或者做产品说明页，需要一个四象限把几个方案摆清楚。

这时候你要的不是花哨。

你要的是干净、统一、能读。

diagram-design 生成的是自包含的 HTML + SVG。README 里说不需要 build step，不需要 JS，也没有外部图片，直接用浏览器打开就能预览。

这点对内容工作流很友好。

生成一个 HTML，打开看看，不顺眼就改。能截图，能放进页面，也能继续让 Claude Code 调节点、删线、换布局。

它还有一个挺克制的审美判断：强调色只留给一两个最需要读者先看的地方，目标密度写成 4/10。

这个项目最有意思的地方，不在于它能画多少图。

而是它默认认为：图表不是一次性的 AI 输出物，它应该属于你的站点、你的文章、你的品牌。