視覺圖譜¶
這一頁是整個 repo 的圖像索引。Mermaid 用來描述會隨程式演進的關係;SVG 用來建立穩定的心智模型與簡報級總覽。每張圖都連回對應的 Wiki 主題。
系統一覽¶
產品與使用情境¶
系統與 DDD 邊界¶
研究管線¶
證據迴圈¶
正式產出地圖¶
品質演進層¶
何時用 Mermaid,何時用 SVG¶
flowchart TD
Need{要表達什麼?}
Need -->|phase / state / dependency| Mermaid[Mermaid]
Need -->|品牌總覽 / 固定心智模型| SVG[Hand-authored SVG]
Mermaid --> Diff[文字可 diff<br/>容易隨程式更新]
SVG --> Polish[精確版面<br/>可重用於 README / release]
Diff --> Docs[嵌入主題頁]
Polish --> Docs
Docs --> Check{內容仍符合實作?}
Check -->|yes| Publish[Strict build + Pages]
Check -->|no| Update[更新圖與相鄰說明]
Update --> Check
圖不是裝飾,而是架構文件。任何工具數、phase、依賴方向或品質 gate 改動,都要同步檢查對應 Mermaid、SVG、caption 與文字敘述。
可存取性規則
SVG 必須有 <title> 與 <desc>;Markdown 圖片必須有具體 alt text;顏色不能是唯一訊息載體;動畫要尊重 prefers-reduced-motion。