信息卡

一句话定位

这是一个面向 AI 编程代理的图表设计技能包，口号是"Editorial diagrams your designer won't hate"。作者 Cathryn Lavery（BestSelf.co 创始人）因每次让 AI 画架构图都得到千篇一律的圆角框而亲手打造：它内置数十种经过排版设计的图表模板，让 Claude Code、Codex 等代理输出杂志编辑风格的示意图，无需 Figma。

趋势解读：为什么火

代理生成的架构图、流程图一直是职场文档的痛点，通用模型默认审美几乎不可用。该技能把设计系统（字体、配色 token、密度控制）预先编码进提示词资产，等于把设计师的手感封装成可复用插件；再加上本月增速全榜第一（L3 #1）的黑马走势，说明它切中了一个此前无人认真解决的高频小需求。

核心功能拆解

• 39 种图表类型，每类均有 minimal light、minimal dark、full-editorial 三种变体，覆盖架构/系统（Architecture、Deployment、Dependency graph）、流程（Flowchart、Sequence、Swimlane、Data flow）、数据模型（ER、UML class）、时间线（Timeline、Gantt）、分析比较（Quadrant、Radar、Sankey、Wardley map、Fishbone 等）以及组织/产品类（Org chart、User journey、Story map）。
• 三个原语：annotation callout 斜体引注、sketchy filter 手绘滤镜效果、55 个单色 IT/云图标。
• 品牌导入流程：说出 onboard 指令附网址即可提取目标品牌配色与字体，映射到 paper/ink/muted/accent 设计 token 后写入 style-guide.md。
• draw.io 与 Mermaid 导入：可调 format/size/detail/audience 四个参数重绘旧图。
• 导出能力：HTML 转 PNG/SVG，支持 `--scale=3` 高分辨率出图。
• 自检工具链：`self_check.py` 可对生成结果做几何与渲染自校验。

架构与技术栈浅析

所有输出是自包含的 HTML + SVG 单文件，双击即可离线打开，动画受 pin 控制器约束以保证无障碍。字体来自 Google Fonts 的 Instrument Serif、Geist 与 Geist Mono 三件套。质量保障靠 Python 验证脚本体系（lint-skin、基于 Playwright 无头 Chromium 的 lint-render、verify-geometry/treemap/sankey 并带对抗测试），CI 在 GitHub Actions 上跨三平台运行。

安装与环境要求

按所用 AI 工具选择对应安装命令；PNG 导出需额外 `pip install playwright && playwright install chromium`。Claude Code 用插件市场两步安装，Codex/Droid/Pi 各有原生命令，可编辑安装则克隆后软链到 `~/.claude/skills/`。

# Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
# Pi / Codex 亦可：pi install https://github.com/cathrynlavery/diagram-design

快速上手示例

用自然语言直接提需求，或从模板复制起步：

Make me an architecture diagram of my app: frontend, backend, database, Redis cache.

cp skills/diagram-design/assets/template.html my-diagram.html   # 模板手动起步
/export-diagram path/to/diagram.html --png-only --scale=3       # 导出高清 PNG

进阶使用要点

• 先跑一次品牌 onboard，之后所有图表自动沿用团队视觉规范。
• 旧 draw.io 文件可用 `/diagram-design:import-drawio xx.drawio --audience=executive` 重绘成高管汇报版。
• 追求论文级严谨时用 verify-geometry 校验后再导出 SVG 矢量稿。
• 设计原则：强调色只留给一到两个焦点，整体信息密度控制在 4/10 左右。

典型应用场景

• 技术方案评审：一句话生成部署图与依赖图，直接贴进 PR 描述。
• 季度汇报：Quadrant 或 Treemap 类型排出高密度优先级矩阵。
• 旧图翻新：Mermaid 源码一键转成 dark 编辑风演示页。

同类生态位对比

相比 Mermaid、PlantUML 这类文本建图的程序员向工具，它牺牲部分可版本化性换来质的排版水准；与在线白板类产品相比优势在于零登录、纯本地文件产出且深度绑定编程代理工作流。

资源导航

• 仓库：https://github.com/cathrynlavery/diagram-design
• 图标素材：Tabler Icons（MIT）、Simple Icons（CC0）