Diagram Design（编辑级图表生成技能）
为 Claude Code、Codex、Pi 等 Agent 生成编辑级品质的自包含 HTML+SVG 图表——告别阴影堆砌和 Mermaid 式的模板味。
源码显示导出/导入均为手动触发、不自动安装依赖、doctor 只读、导入器明确将源文件视为不可信数据且不执行/不抓取；权限面很小。扣分：导出的 SVG 注入对 fonts.googleapis.com 的远程引用（外部数据流），发布者未经验证，且部分脚本（如 verify-geometry.py）未在本次评审中核验其行为。
文档高度自洽，触发条件、边界情况、失败反馈（如 extractor 退出码逐字报告）写得非常细，并给出 doctor 自诊断路径。扣分：纯静态评审，无法确认脚本可运行、验证器覆盖真实关键路径，也未执行任何关键路径复现，未达 10 以上。
40 种图形类型的适用/不适用边界、语义模式触发、四档输出拨盘、CJK 字体回退均有明确说明，语义触发设计精细。扣分：字体完全依赖 Google Fonts CDN，在中国大陆网络不可达，会破坏排版还原与导出一致性（在 SVG 中还注入远程 @import），未提供本地字体降级方案；中文支持仅提及繁体标签。
MIT 许可、版本号（2.6）、分层渐进披露（references 按需加载）、已知限制与反模式清单完善。扣分：未见 changelog 或维护者责任/更新路径的具体证据，部分关键约定散落在未附上的文件中。
设计系统具体可执行（连接线规则、节点处理、预算控制），含 worked example 与 fidelity ledger 机制，声称产出可直接使用。扣分：静态评审无法验证代表性输出，未附实际渲染样例文件内容；自绘 SVG 的边际价值相对 Mermaid 等替代方案有声称但缺独立证据。
引用了可审计的原始材料（fixtures、验证脚本、测试如 test-verify-motion.py、CI 提及）但均未执行，覆盖率与第三方佐证无法确认。低于 5，因关键路径复现证据在本次静态读中不可用。
- 字体与 SVG 导出均依赖 Google Fonts CDN；在无外网/中国大陆网络环境中排版与导出将回退失真，建议离线场景预先本地化字体。
- 验证脚本（verify-motion.py、lint-skin.py 等）仅被引用、未经执行验证，使用时应先运行 doctor 与自带测试确认环境。
- 发布者未经验证，本评分不含任何品牌背书；导入器虽声明不执行源内容，仍建议对待导入文件保持 prompt-injection 警惕。
这个 Skill 能做什么，适合哪些场景？
Diagram Design 是一个遵循编辑设计系统的 Agent Skill，用于生成架构图、流程图、时序图、桑基图、Wardley 地图、数据库模式图等几十种图表类型，输出为单个可直接在浏览器打开的 HTML 文件（内联 SVG + CSS）。它内置可换肤的设计令牌系统，能从你的网站自动提取品牌色与字体；还能重绘 draw.io、Mermaid、Excalidraw 源文件，按格式、尺寸、细节级别四档旋钮重新排版。核心设计哲学是"删减"：目标信息密度 4/10，每图最多 9 个节点、12 条连线，强调色只用于 1–2 个焦点元素。注意：仓库描述中图表类型数量在不同版本间表述不一（描述页写 38，README 写 39，SKILL.md 写 40），应以实际安装版本为准。
接收自然语言图表请求（如"给我的应用画一张架构图"）或导入的 .drawio/.mmd/.excalidraw 源文件；先选择语义模式（当行为承载含义时）再选择视觉类型；按单一来源 style-guide.md 中的设计令牌，在 4px 网格上排版节点与连接线；执行六条强制连接线规则、复杂度预算和出图前清单；输出单个自包含 .html 文件，符合可访问 SVG 契约（role="img"、title/desc、reduced-motion 静态帧）。导入时运行 Python 提取脚本解析源文件，生成结构化摘要，随后"重绘而非转换"——丢弃源坐标与配色，保留内容，并输出保真度账单说明合并、折叠或丢弃了什么。可通过斜杠命令或自然语言将图表导出为 SVG/PNG。
- 技术写作者：为博客文章生成与站点配色一致、可直接截图的架构图或流程图
- 工程师：把现有 .drawio 或 Mermaid 文件重绘为 16:9 幻灯片尺寸的精简版给高管看
- 独立开发者/内容创作者：60 秒内把自己的网站品牌色与字体套用到所有图表上，无需 Figma
- 咨询顾问：绘制 BCG/McKinsey 风格的 2×2 象限矩阵（内置 consultant special 变体）
- 数据团队：生成数据平台集成拓扑、medallion 架构、角色权限矩阵等数据工程专用图表
- 多客户代理商：为每个客户保存命名品牌档案，通过 .diagram-design 标记在不同项目间切换品牌
这个 Skill 有哪些优点和局限？
- 输出是零依赖的自包含 HTML，双击即可离线打开，无构建步骤
- 强约束的设计系统（4px 网格、6 条连接线规则、出图前清单）有效压制了 AI 生成图表的常见粗糙感
- 品牌导入流程自动提取站点色板与字体，并做 WCAG AA 对比度校验，输出保真度回执
- 可访问性默认内建：role="img"、title/desc、prefers-reduced-motion 静态降级
- 重绘而非转换导入的图表，丢弃源坐标杂乱但保留内容，并如实报告保真度账单
- 仓库自带大量验证门禁：几何标签校验、瀑布/矩形树图/Sankey 数值一致性检查、无头 Chromium 渲染检查、三平台 CI
- 图表类型数量在 38/39/40 之间随版本变动，文档间不一致
- 严格复杂度预算（每图最多 9 节点、12 箭头）意味着超大型图必须手工拆分为概览+细节两图
- PNG 导出依赖 Playwright + Chromium 一次性安装（pip install playwright && playwright install chromium）
- 设计风格高度主观（Instrument Serif + Geist 字体、拒绝阴影），不符合该审美或需要其他字体的团队需要自定义皮肤
- repository: 品牌导入依赖你网站的公开字体与颜色，若站点无清晰品牌体系效果会打折扣
- skill 描述同时面向多个宿主（Claude Code/Codex/Pi/Copilot 等），但除安装命令外，各宿主上的实际运行效果是否有对等测试未在源中说明
如何安装这个 Skill？
支持多个宿主。Claude Code：/plugin marketplace add cathrynlavery/diagram-design，然后 /plugin install diagram-design@diagram-design。Codex：codex plugin marketplace add cathrynlavery/diagram-design && codex plugin add diagram-design@diagram-design。Pi：pi install https://github.com/cathrynlavery/diagram-design。README 还给出 GitHub Copilot、Factory Droid、Kiro、OpenCode、Claude Cowork 的安装方式。也可克隆仓库后将 skills/diagram-design/ 软链到各宿主的全局 skills 目录（~/.claude/skills/ 等）。注意：旧的 npx skills add 独立安装不会自动跟随新的 Codex marketplace，需先卸载再用 marketplace 命令重装。
如何使用这个 Skill？
安装后在 Agent 中直接用自然语言请求，例如："给我画一张架构图：frontend、backend、database、Redis 缓存""画一个 Q2 项目按影响力 vs 工作量分布的象限图"。首次在新项目中使用时会触发风格指南门禁，询问是运行品牌导入（如 "onboard diagram-design to https://yoursite.com"）、手动粘贴令牌还是使用默认皮肤。导入已有图表：/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive。导出：/diagram-design:export-diagram my-diagram.html --png-only --scale=3。首次运行前请核对 source: 仓库已确认。
这个 Skill 与同类方案有什么区别？
与直接用 Mermaid 或 draw.io 相比，本技能明确以"无 Mermaid 糟粕"为卖点：不是转换渲染器输出，而是丢弃源坐标与配色、按编辑设计系统重新排版。它也不能替代 Figma——README 自我定位为"不用再花 30 分钟在 Figma 里调色"的替代路线。