cathrynlavery/diagram-design

Diagram Design – AI 代理驱动的编辑图表

是什么 – Diagram Design 是一个可重复使用的 Agent Skill（兼容于 Claude Code、Codex、GitHub Copilot、Factory Droid、Pi、Kiro、OpenCode 等），能将自然语言请求转换为一组 独立的 HTML + SVG 图表。此技能内置超过 30 种编辑风格的图表类型（架构图、流程图、Sankey 图、Wardley 地图、看板等），并提供三种视觉变体（极简亮色、极简深色、完整编辑风格）。图表渲染时不需要任何 JavaScript、外部图片或阴影，可直接在浏览器中查看或嵌入 Markdown 文档。

---

主要功能（如 README 所述）

• 广泛的图表目录 – 30 种静态图表语法，涵盖架构、流程、数据、图表及项目管理视图。2.5.10 版本新增类型包括 Sankey 图、鱼骨图、Wardley 地图、看板、用户旅程图、部署图、依赖关系图、UML 类图、故事地图及数据库架构。
• 三种视觉变体 – 每个图表皆可渲染为极简亮色、极简深色或完整编辑风格。所有变体皆为纯 SVG/HTML 文件，可直接在浏览器中打开。
• 品牌导入 – 一键式“onboard diagram-design to ”流程会抓取首页，提取主色调与字体堆叠，将其映射至语义标记（纸张、墨水、强调色等），并写入 references/style-guide.md。此后该技能会针对每个后续图表使用这些标记，确保品牌色彩与排版的一致性。
• 内置无障碍功能 – 每个 SVG 皆包含正确的 role=