让 AI 画架构图，先别急着打开 Figma

在 Figma 里拖一张架构图，时间通常花在两件事上：对齐，和改样式。

最近一个开源 Skill 把这两步交给 AI 工具。项目叫 Diagram Design，作者是 Cathryn Lavery。装好后，Claude Code、Codex、Cursor 这类支持 Agent Skills 的工具可以按自然语言直接出图，输出一个自包含的 HTML 文件，里面是内联 SVG。浏览器双击打开，也能导出 SVG 或 PNG。

Agent Skill 可以理解成给 AI 工具装的一份工作手册，包含规则、模板和脚本。它要回答的问题很具体：AI 画出来的图能不能看。多数 AI 生成的图，问题不在结构，在品味。圆角框、阴影、彩虹色，一眼就是模板。

Diagram Design 的做法是把品味写成约束：一个强调色，一到两个焦点，1px 细线，无阴影，最大圆角 10px，所有坐标和间距落在 4px 网格上。字体只用三套：Instrument Serif 做标题和斜体批注，Geist 做节点名，Geist Mono 做端口、URL、字段类型这类技术子标签。作者在 README 里写了一句挺狠的话：“最高质量的移动通常是删除。”每个节点都要挣到自己的位置。

它内置 45 种图表类型，时序图、流程图、架构图、甘特图、象限图、ER 图、泳道图、组织结构图都在里面。每种类型有三种静态变体：浅色极简、深色极简、完整编辑风格。没有构建步骤，没有 JavaScript，不依赖外部图片。默认会从 Google Fonts 拉三套字体，这是唯一的网络请求；切到系统字体后可以完全离线。

品牌适配是另一个省事的地方。对 AI 说一句“onboard diagram-design to https://yoursite.com”，它会抓主页，提取主色、正文色、辅助色、强调色和字体栈，映射成 paper、ink、muted、accent、link 这些语义 token，先给一份 diff，确认后写进 style-guide.md。它还会检查 WCAG AA 对比度，并给出一份 fidelity receipt，列出采样 URL、颜色角色、字体家族和来源。多客户可以存成命名 profile，项目里放一个 .diagram-design 标记就能切换。

导入也做了。draw.io、Mermaid、Excalidraw、PlantUML 的文件可以丢给它重画。这里的关键是“重画”，保留组件、关系、分组和方向；源坐标、源配色、源字体、手拖出来的对角线不保留。它给了四个旋钮：format 选 html、svg、png；size 选文档内嵌、16:9 幻灯片、社交图、A4 打印；detail 选 faithful、balanced、simplified；audience 选 engineer、mixed、executive。每次导入结束会有一份 fidelity ledger，告诉你哪些节点被合并、折叠或丢掉了。

缺点也写得很直白。输出质量依赖你用的模型，同一个 prompt 两次布局可能不一样。产物不是可编辑源格式，没有文本可以进 pull request 做 diff，也没有画布让你拖框。仓库原话是：如果文档放在 Git 里、每个 sprint 都改，Mermaid 仍然更合适；Diagram Design 适合你准备发布出去的那张图。

有网友在回复里提醒，导出前检查中文字体，不然容易显示成方块。这个提醒很实际。它省掉的是对齐和配色，不替代 Figma 的协作源文件。要多人批注、组件库、设计系统流转，还得另走一趟。

安装命令：

npx skills add cathrynlavery/diagram-design

仓库：https://github.com/cathrynlavery/diagram-design

在线画廊：https://cathrynlavery.github.io/diagram-design/

复杂图表，你会先拿它画哪类？架构图、时序图，还是那张每次汇报都要重排的路线图。