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=