diagram-stylelisted

# Diagram Style — 架構圖重繪 **這是重繪工具，不是製圖工具。** 節點、連線、群組都由素材決定； 本 skill 只決定它們長什麼樣子。 樣式掛在**角色**上，不掛在圖元上。「主標題」「註解卡片」「控制流虛線」是角色， 具體的字級與色值是筆調與顏色對它的實作。這一層讓同一套樣式能同時落到 SVG 與 PPTX——角色是契約，媒材是實作。 **先讀 `references/roles.md`。** 沒有角色詞彙，下面三層無從掛載。 | 層 | 決定 | 預設 | 定義在 | |---|---|---|---| | 筆調 | 每個角色的幾何：圓角、線寬、線型、密度 | `pens/` 三選一 | `references/layer-pen.md` | | 顏色 | 每個角色的墨色：填色、邊框、文字 | `themes/` 六選一 | `themes/` | | 結構 | 怎麼排 | **沿用素材** | `references/layer-structure.md` | 媒材對映：SVG 見 `references/render-svg.md`，PPTX 見 `references/render-pptx.md`。 **字級是硬底線。** 最小字級以畫布寬度的百分比定義（內文 2.0%、標題 3.5%）， 因為 SVG 會縮放，絕對 px 沒有意義。預設畫出來的字通常太小，就是因為 畫布給得大方而字級照抄螢幕習慣。完整表與版面最佳化定義在 `references/typography.md`。 **一次只換一層。** 使用者說「換個配色」就只動顏色；說「改成分層的」就只動結構。 同時動兩層會讓他無法判斷是哪一項造成差異——想連換就分兩次做。 ## 選筆調與顏色 **先問這張圖給誰看。** 不確定就用下面兩個起手式，多數情況夠了。 | 起手式 | 給誰看 | |---|---| | `console` + `muted-ledger` | 內部文件、簽呈、評估報告，之後會印出來 | | `console` + `solarized-light` | 技術文件、規格書，在螢幕上讀 | 要別的組合再往下看。**筆調與顏色各選一個，兩者獨立。** **筆調**（`pens/`） | 給誰看 | 用哪個 | 特徵 | |---|---|---| | 技術文件、螢幕、節點多 | `console` | 方正緊湊、細框 | | 投影、會議、非技術聽眾 | `briefing` | 柔和寬鬆、粗框 | | 附錄線稿、黑白影印 | `blueprint` | 純框線、無填色 | **顏色**（`themes/`） | 給誰看 | 用哪個 | 類別數 | |---|---|---| | 技術讀者、長時間螢幕閱讀 | `solarized-light` | 3 | | 會被印出來或影印 | `muted-ledger` | 3 | | 要跟既有前端介面一致 | `tailwind-default` | 3 | | 四階流程，起點深、暖冷有方向、會印出來 | `dusk-ramp` | 4 | | 四階流程，螢幕、要色相跨得遠 | `spectral-ramp` | 4 | | 附錄線稿（僅配 `blueprint`） | `blueprint-mono` | 3 | **唯一的搭配限制**：`blueprint` 筆調必須配 `blueprint-mono` 主題，反之亦然。 其餘 2 筆調 × 3 主題自由組合。