SkillMap

Sep 17, 2026

用 diagram-design 产出贴合品牌的编辑级图表

自包含的 HTML 和 SVG 图表会先读取你网站的配色与字体，还能把现有 draw.io、Mermaid、Excalidraw 文件重绘成幻灯片或文档尺寸。

#tutorial#agent-tools#presentation

让编码智能体画一张架构图，你得到的是千篇一律的圆角方块。diagram-design 是 BestSelf.co 创始人 Cathryn Lavery 出品的 40k 星技能，交付的是编辑级图表——单一强调色、衬线标题、一切对齐 4px 网格——而且用你自己品牌的配色。

为什么这个 Skill 重要

每张图都是单个自包含的 HTML 文件加内联 SVG：双击就能在浏览器打开，没有构建步骤，静态默认输出不含 JavaScript，也不依赖外部图片。每种类型提供三个变体——极简亮色、极简暗色、完整编辑版——一套设计系统守住底线：强调色只留给一两个视觉焦点，三种字体（Instrument Serif、Geist、Geist Mono），1px 细边框，无阴影，圆角上限 10px。

有一个数量需要说明：README 正文写的是 39 种图表类型，但截至 2026 年 9 月 17 日，仓库的 references/ 目录里实际有 40 个类型定义——瀑布图和极坐标图都在其中。以目录为准；挑图时去看画廊，别按 README 的数字数。

安装

在 Claude Code 上：

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

出现提示时运行 /reload-plugins，或让下一个会话加载它。README 为 Codex、GitHub Copilot、Factory Droid、Pi、Kiro 和 OpenCode 给出了对应的安装路线——共享技能位于 skills/diagram-design/，在任何兼容 Agent Skills 标准的宿主里都能用。

实战流程：先接入品牌，再画图

从一次性的品牌接入开始，这正是这个技能的核心价值：

onboard diagram-design to https://yoursite.com

它会抓取你的主页，提取主配色和字体栈，映射成语义令牌（paper、ink、muted、accent、link），展示一份差异预览，在你确认后把令牌写进 references/style-guide.md。写入前会在图表尺寸（9–12px）下按 WCAG AA 标准检查对比度，技能还会出具一份 fidelity receipt，列明采样的 URL、颜色和字体。在新项目画第一张图时，首跑门控会问你是要接入品牌、手动粘贴令牌，还是沿用默认的墨黑加原子橙（jet-black + atomic-tangerine）配色。

然后直接说：Make me an architecture diagram of my app: frontend, backend, database, Redis cache. 智能体会选类型、构建 HTML 并保存文件。

实战流程：把 Mermaid 乱线重绘成幻灯片

已有图表会被重绘，而不是转换：

/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified --audience=executive

四个旋钮控制输出：格式（HTML、SVG、PNG 或 HTML 加 PNG）、尺寸（从 doc-inline 到 slide-16x9 再到 print-a4-landscape）、细节（faithful 最多 24 个节点、balanced 12 个、simplified 7 个）、受众——受众只改措辞，不改数量。每次导入都以一份 fidelity ledger 收尾——合并了什么、折叠了什么、丢弃了什么——不会有内容悄悄消失。

技巧

  • 用 /diagram-design:export-diagram 导出 SVG 给 Figma 或 PNG 给幻灯片；PNG 通过 Playwright 光栅化，需要一次性执行 pip install playwright && playwright install chromium。
  • 离线浏览所有类型：打开 skills/diagram-design/assets/index.html，每张图都有亮色、暗色和完整编辑版三个标签页。
  • 多客户场景下，把接入结果存成 ~/.diagram-design/profiles/ 下的命名配置，再在每个项目里放一个 .diagram-design 标记文件指明所用配置。
  • 无障碍是默认行为：每个 SVG 都带 role="img" 和可解析的可访问名称，屏幕阅读器会播报图表的标题和描述。

什么时候不该用它

README 自己划定了边界：推特用的快速 unicode 图归 wiretext 类技能管，列表就该用表格，前后对比就该用表格，只有单个形状的「图」就是一句话。动手画之前先问一句：读者从图里学到的东西，会比一段写好的文字更多吗？

查看排行榜了解更多 skill。