Diagram Design：39 種 editorial diagram types，給 Claude Code / Codex 的圖表設計技能包
Diagram Design 提供 39 種 editorial diagram types、自包含 HTML + SVG、網站品牌 palette／font onboarding、fidelity receipt 與選用式 motion；GitHub repo description 尚停在 38 類，本文按版本化 README 校正。
Threads 知識整理 · Design / AI Diagrams
Diagram Design 是 cathrynlavery/diagram-design 這個 GitHub repo：一組為 Claude Code、Codex、Factory Droid、Pi 等 coding-agent / assistant 工作流準備的 editorial diagram skill / plugin 資源。它不是「GPT 插件」，而是 coding-agent skill；目前 README 明列 onboarding 會讀取網站首頁的 palette 與 font stack，再把品牌 tokens 寫入 style guide。核心仍是用自包含 HTML + SVG 產出比較像編輯設計稿的 39 種圖表類型。
官方專案是 cathrynlavery/diagram-design
主來源應鎖定在 GitHub repo，而不是泛稱「Diagram Design GPT/Claude 插件」。GitHub metadata 的 repo 描述仍寫「38 editorial diagram types for Claude Code, Codex, and Pi」，但目前 README 正文已更新為 39 類。README 進一步寫到 Claude Code、Codex、Factory Droid、Pi，並提供對應的 plugin / skill 安裝方式。
因此正確分類比較像「AI coding agent 的圖表設計技能包」或「diagram-generation prompt / assets / templates repository」，不是 OpenAI GPT Store 的 GPT，也不是 ChatGPT plugin 生態的外掛。若要提到 Claude Code 的 plugin marketplace，可以明確限定為 Claude Code 安裝指令；若要提到 Codex，則是 repo 提供的 Codex plugin / skills 路徑，而不是宣稱所有 GPT 都原生支援。
39 種 editorial diagram types 的價值
Diagram Design 的強項不是單一圖表，而是把常見技術與產品溝通情境整理成 39 種 editorial diagram types。README 提到新版加入 Sankey、fishbone、Wardley map、kanban、user journey、deployment、dependency graph、UML class、story map、database schema 等 layout grammars；也強調 semantic patterns 把「行為語意」與「版面配置」分開，讓 queue、policy trace、trust boundary 之類概念能使用最接近的既有類型，而不是無限制新增類型。
對 Allen KB 讀者來說，這個 repo 的實用性在於：當 Claude Code / Codex 要替文章、簡報、系統設計文件畫圖時，可以要求 agent 選擇明確 diagram type，再輸出可檢查的 HTML + SVG。這比直接要求「畫漂亮一點的 Mermaid」更可控，因為設計語言、spacing、typography、顏色、annotation 會被限制在一套 editorial grammar 裡。
Mermaid / draw.io 的正確說法
原 KB 文章說它能把 Mermaid / DrawIO 變漂亮，方向接近但需要收斂。官方 repo 內容包含 scripts，例如 mermaid_extract.py 與 drawio_extract.py，README 也提到 skill 可以 redraw draw.io or Mermaid sources at a chosen quality tier。這不是單純「美化器」；比較準確的說法是：它能把既有 Mermaid 或 draw.io source 轉成結構化中介表示，再依據 Diagram Design 的模板與品質層級重畫成靜態 HTML + SVG。
所以導入時不要只期待一鍵套皮，而要把它當成 agent 生成圖的規格庫：先讓 agent 判斷圖表語意與 layout grammar，再產生圖；如果已有 Mermaid / draw.io，則把原圖視為 source，要求重繪時保留節點語意、關係、順序與圖例。
授權與商用評估
GitHub API 與 LICENSE 檔顯示 Diagram Design 採 MIT License，copyright 為 2025 Cathryn Lavery。MIT 允許使用、複製、修改、合併、發布、散布、再授權與銷售軟體副本，但需保留 copyright notice 與 permission notice。若要放進公司簡報產線或 Hermes skill library，仍應保留 LICENSE，並檢查 THIRD_PARTY_LICENSES.md 以及產出圖中是否混入使用者自有品牌素材。