系統架構示意圖 — 內嵌 SVG 圖示集

六張 720×320 的手繪風 SVG 圖，用於後端服務文件章首插畫。 平塗、1.5–2px 線條、固定色盤；每張圖底下可單獨匯出獨立檔案。

720 × 320 · 內嵌 SVG · 無外部資源
前端請求 web mobile cli gateway 驗證 + 限流 user-service :8081 order-service :8082 billing-service :8083 單一入口 所有外部流量先經 gateway 完成驗證、限流，再依路徑分派到下游服務。
API 閘道路由
用於「對外入口設計」章首插畫。
讀取路徑 request GET /sku L1 in-process ~100µs L2 redis ~2ms postgres 主資料源 ~25ms 回寫填快取 命中即返回 跨節點共享 最終後盾 逐層往下找；任何一層命中就回填上層，下次同 key 直接從 L1 拿。
多層快取
用於「讀取效能與快取策略」章首插畫。
producer 下單服務 broker topic: orders partition 0 partition 1 partition 2 寄送通知 group=notify 寫入倉儲系統 group=warehouse 分析事件流 group=bi 寫一次 各自消費 · 互不影響 同一筆訂單事件，三組消費者各拿一份；發布端不需要知道誰在收。
訊息佇列 / 發布訂閱
用於「事件驅動架構」章首插畫。
應用層 write API POST / PUT read API GET (只讀) write primary 唯一寫入點 非同步複寫 replica A lag ~80ms replica B lag ~120ms read 寫只進 primary，讀分散到多個 replica；接受短暫不一致換取讀取吞吐量。
資料庫讀寫分離
用於「資料庫水平擴展」章首插畫。
資料來源 app logs metrics traces collector otel agent sample 10% rule engine p95 > 800ms ? err_rate > 2% ? dashboard 綠燈 → 持續觀察 on-call 紅燈 → 立刻派 PagerDuty 三類訊號統一收集 → 規則引擎判斷 → 沒事看板呈現、出事直接 page 值班人員。
監控與告警鏈
用於「可觀測性建置」章首插畫。
t = 0 時間 → 第 1 次 第 2 次 第 3 次 第 4 次 +1s +2s +4s 失敗後等待時間倍增，避免暴衝重試把下游打爆（圖中未畫 jitter 抖動）。
指數退避重試
用於「呼叫外部 API 的失敗處理」章首插畫。

色盤與繪圖規則

米白
#FAF9F5
墨黑
#141413
磚紅
#D97757
橄欖綠
#788C5D
燕麥
#E3DACC
灰 150
#F0EEE6
灰 300
#D1CFC5
灰 500
#87867F