42 种图型一个技能包，agent 出图不再丑

agent 画的图，功能对但总差点意思：默认配色辣眼、间距随机、布局像草稿。GitHub 日榜的 cathrynlavery/diagram-design（43.9k stars，MIT）就是冲这个来的，一个给 coding agent 的编辑部级图表设计技能包，自述口号很直白：不要 Mermaid 垃圾图。

项目简介

它生成完全自包含的静态 HTML 加 SVG：没有构建步骤、没有 JavaScript、没有外部图片依赖。设计系统收得很紧：一种强调色、三套字体（Instrument Serif 衬线、Geist 无衬线、Geist Mono 等宽）、一像素细线、禁用阴影，每个坐标宽度和间距都被 4 整除。这套约束出来的图带明显的杂志编辑气质，42 种图型覆盖架构、流程、时序、状态机、ER、泳道、象限、甘特、桑基、鱼骨、沃德利地图直至爆炸轴测图。

实用功能不少。旧图迁移：draw.io、Mermaid、Excalidraw 三种来源都有提取脚本，导入后按新设计系统重绘。四个旋钮控制输出：格式（HTML、SVG、PNG）、尺寸、详略（忠实二十四节点、平衡十二节点、极简七节点三档）、受众。品牌引导可以抓取你网站的配色与字体生成风格指南，并自动做 WCAG AA 对比度检查。

快速上手

npx skills add cathrynlavery/diagram-design

Claude Code 用户走插件市场一条命令，Codex、Copilot、Factory Droid、Pi 都有对应装法。PNG 导出走 Playwright，SVG 版内嵌字体可直接归档。仓库的 CI 值得一提：皮肤检查、渲染后的 Chromium 校验、几何验证、导入路径测试覆盖三大系统，一个图表技能包把工程化做到了这个程度，作者显然是当产品在维护。

适合谁用

写技术文档、方案汇报、产品页的开发者与团队是第一受众：把架构图从丑到不能见人变成能直接进文档，一次安装的事。做技能包开发的同学，它是设计约束如何转化为可执行规则的范本，比多数提示词教程高一个维度。要挑刺也有：强编辑风格不适合需要花哨视觉的场景；Playwright 导 PNG 对环境有额外要求。与站内写过的 impeccable（AI harness 设计语言）对照，agent 产出的视觉质量正在从碰运气变成有系统可依。