週榜 #12026-08-17

cathrynlavery/diagram-design

29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

★ 19.5k stars · ▲ +15,600 本週 · 🔶 HTML · 📜 MIT在 GitHub 開啟 ↗

這是什麼

Diagram Design 是一套給 AI coding agent 使用的 圖表設計技能／外掛，目標是產生「設計師不會討厭」的 editorial diagrams。README 說它支援 Claude Code、Codex 與 Pi，核心產物是自包含的 HTML + SVG：27 種視覺類型，每種都有 minimal light、minimal dark、full-editorial 三個靜態版本，可直接用瀏覽器打開，沒有 build step、JavaScript 或外部圖片依賴。它處理的不是單一流程圖，而是一整套視覺語彙：架構圖、流程圖、序列圖、狀態機、ER／data model、時間線、swimlane、quadrant、tree、org chart、Venn、layers、pyramid、radar、loop、Gantt、data flow、security matrix 等。README 也強調 2.3 版加入 semantic system patterns 與可選的 accessible motion；也就是先描述系統行為，再映射到合適版型，而不是無止境增加圖表種類。

為什麼上榜

這個週榜 pick 是 cathrynlavery/diagram-design，metadata 顯示約 19,502 stars，本期新增 15,600 stars，熱度非常集中。它爆紅的原因很容易理解：現在越來越多人要求 Claude Code、Codex 這類 agent 直接產出規格、設計文件與說明圖，但預設結果常常是 generic rounded boxes，或落回 Mermaid 的工程式圖感。Diagram Design 的差異在於它把「圖要好看」拆成可執行規則：每個節點都要有存在理由、重點色只保留給讀者應該先看的 1–2 件事，目標密度是 4/10。這不是單純多幾個 SVG template，而是把品牌色、字體、對比、版型密度、可及性與 agent 呼叫方式整合起來。對內容網站、產品文件、技術部落格與內部簡報來說，這正好命中「不用開 Figma，也不要醜圖」的痛點。

適合誰，可以拿來做什麼

它最適合已經在使用 Claude Code、Codex 或 Pi 的開發者、技術寫作者、產品團隊與顧問。README 的使用情境包括：請 agent 產生 app 架構圖、用 impact vs effort 做 quadrant、畫 bearer token refresh on 401 的 sequence，或把 draw.io／Mermaid 來源重畫成指定格式、尺寸與細節層級。若你的工作需要把系統設計、資料流、授權流程、專案優先級或多角色工作流轉成可發佈的圖，它可以直接變成文件管線的一部分。另一個重要特點是 品牌 onboarding：它可以讀取網站，萃取色彩、字體與語意角色，之後新圖就使用你的背景色、CTA 色與字體堆疊；也支援手動覆寫 style guide、為多個 client 保存 profile。這讓它不只適合個人玩具專案，也適合多品牌、多客戶的內容工作。

上手

README 提供了不同宿主的安裝方式。Claude Code 可透過 marketplace 安裝，Codex 也有對應 plugin marketplace 指令；Pi 則可直接安裝 GitHub repo。若只是想看範例圖，也可以從 cloned checkout 開啟 gallery。

# 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

# 從本機 checkout 瀏覽 27 種圖表
open skills/diagram-design/assets/index.html       # macOS
xdg-open skills/diagram-design/assets/index.html  # Linux

README 也提醒，Claude Code 的第三方 marketplace 預設不會自動更新，需要在 /plugin 裡啟用 auto-update；Codex 若要立即更新 marketplace，可執行 codex plugin marketplace upgrade diagram-design 後重開 session。

README 重點摘要

提供 27 種 editorial diagram types，每種有 light、dark、full-editorial 靜態版本，輸出是可直接開啟的 HTML + SVG。
支援 Claude Code、Codex、Pi，並可重畫 draw.io 或 Mermaid 來源。
內建品牌 onboarding：讀網站後映射 paper、ink、accent、font 等語意 token，也可手動編輯 style guide。
可及性不是事後補丁：模板包含 role="img"、aria-labelledby、title／desc，並會檢查 WCAG AA 對比。
motion 是可選項，靜態輸出仍是預設；semantic patterns 用來描述 queue、policy trace、trust boundary 等行為，再選擇最接近的視覺版型。