Architecture Flowchart 範本
用途:系統架構、分層結構、模組關係、部署拓撲
適用場景:
- 「這個系統由哪些模組組成」
- 「這幾個服務怎麼連接」
- 「部署的拓撲長怎樣」
範本 1:分層架構(最常用)
選 flowchart TB(由上至下),符合「上層→下層」閱讀習慣。
使用時機:描述你系統的前後端分層、服務相依。
範本 2:流程架構(橫向)
選 flowchart LR(由左至右),符合時間感。
使用時機:單一流程走向,帶決策分支。
範本 3:微服務 / 多系統
使用時機:內外部系統整合概觀。
範本 4:決策樹
使用時機:路由邏輯、分流策略、SOP。
客製化指南
要改什麼
| 項目 | 怎麼改 |
|---|---|
| 節點文字 | 必改 — 換成你實際的模組名稱 |
| subgraph 分組 | 必改 — 依你的系統邏輯分 |
| 節點間的連接線 | 必改 — 反映真實資料流 |
| 顏色 | 少改 — 只標重點節點 |
| 方向(TB/LR) | 依內容邏輯選 |
不要改什麼
- 不要為了「看起來豐富」亂加節點
- 不要每個節點都加 style
- 不要 emoji 滿天飛
顏色建議
Mermaid 有默認主題(自動 light/dark 切換)。重點標示可用:
style Error fill:#ffcdd2 (紅 - 錯誤/警告)
style Success fill:#c8e6c9 (綠 - 成功/正常)
style Highlight fill:#fff9c4 (黃 - 強調/注意)
style External fill:#e3f2fd (藍 - 外部/次要)
Real-world 範例
你可以參考既有的好範例:
internal/workflow/pipeline-overview.md— Pipeline 三 Agent 架構圖internal/workflow/pipeline-state-machine.md— Error Escalation 決策樹
Anti-patterns(別這樣畫)
❌ 用代號
看不懂在幹嘛。
❌ 太多節點一坨
單張圖 > 30 節點 → 拆成多張。
❌ 沒 label 的分支
看不出 A 為什麼分三個方向。