我打造了一個視覺化系統設計參考工具——可在 AWS、Azure、GCP 與開源之間切換任一架構
🔗 正式網站： system-design-explainer.vercel.app
⭐ GitHub： amananandrai/system-design-explainer
🧠 我為什麼要做這個
像很多工程師一樣，我花了不少時間讀系統設計文章、看面試準備影片，盯著靜態架構圖，想搞懂 YouTube 到底怎麼處理上傳，或 Uber 如何即時把乘客配對給司機。
我一直遇到的問題是：
- 圖表都是靜態的——你看得到方塊，卻看不出請求實際是怎麼流過去的。
- 每張圖都綁定某一家雲端廠商的術語。AWS 圖會寫「S3、SQS、DynamoDB」，GCP 圖會寫「Cloud Storage、Pub/Sub、Bigtable」——要在腦中互相翻譯很累。
- 我的筆記散落在書籤、Notion 頁面和截圖裡。
所以我決定做出我一直希望自己擁有的參考工具。
這一開始是個幫助自己學習與成長的個人專案。 為了把它做出來，我被迫真正理解每個架構，理解到足以把它畫出來、拆成步驟，並把不同雲端上的元件一一對應起來。做著做著，我意識到它也同樣能幫助其他人：準備面試、設計真實系統，或只是單純好奇自己每天使用的應用程式底層到底怎麼運作。
🚀 什麼是 System Design Explainer？
System Design Explainer 是一個互動式系統設計參考網站，你可以視覺化真實世界系統的架構，並且用不同工具視角檢視同一個架構——通用視角、AWS、Google Cloud、Azure，或開源工具。
每個系統頁面都涵蓋需求、API、容量估算、資料模型、請求流程解析、瓶頸、擴充與延伸——全部都放在自動排版的架構圖旁邊。
撰寫本文時，它已經包含：
- 📦 36 個系統
- 🧩 36 個元件
- 📚 27 個概念
✨ 主要功能
☁️ 1. 一鍵切換雲端
這是我最興奮的功能。每個架構都可以重新標示為：
- Generic（廠商中立的基礎元件）
- AWS
- Google Cloud
- Azure
- Open source
所以同一條「物件儲存 → 佇列 → Worker → CDN」流程，會立即變成你所使用技術堆疊對應的服務名稱。以下是 YouTube 設計在五種視角之間切換的樣子：
物件儲存會變成 Amazon S3、Cloud Storage、Azure Blob Storage 或 MinIO；事件串流會變成 Amazon MSK、Pub/Sub、Azure Event Hubs 或 Apache Kafka——方塊一樣、箭頭一樣，但名稱不同。這對面試很有幫助（因為通常希望你保持通用），對實務工作也很有用（因為通常得受限於某個特定雲端平台）。
▶️ 2. 逐步播放請求流程
你不只是看圖而已，還可以一步一步跟著請求走——上傳影片、預訂座位、支付商家、建立短網址。每一步都會高亮顯示正在發生的事情，以及由哪個元件負責，讓你建立的是對流程的直覺，而不只是佈局。
以下是上傳影片到 YouTube 的樣子：
以及在 BookMyShow 預訂電影座位的流程（看看座位保留與冪等金鑰如何發揮作用）：
這些逐步解析也支援所有雲端平台，所以你可以用 AWS、GCP 或 Azure 的服務，追蹤同一個請求流程。
{% details 🎬 更多逐步解析（點擊展開）
建立短網址（URL shortener）：
扣款（支付閘道）：
叫車（Uber，部署於 AWS）：
傳訊息給線上好友（WhatsApp，部署於 GCP）：
付款失敗 → saga 補償（Amazon，部署於 Azure）：
{% enddetails
🔍 3. 檢視元件
每個基礎元件（負載平衡器、快取、佇列、資料庫、CDN 等）都有自己的頁面，內容涵蓋：
- 各供應商可用的選項
- 常見陷阱
- 站內哪些系統有使用它
📖 4. 學習常見模式
像是 快取、分片、fan-out、saga、冪等性、一致性雜湊、速率限制、地理空間索引、WebSocket、變更資料擷取 等核心概念，都有獨立解說，並且連回實際採用這些概念的設計。很多概念頁面甚至還附有一個可逐步檢視的小圖。
🔎 額外功能：搜尋與深色模式
按下 Ctrl K 就能跳到任何系統、元件或概念，並在熬夜準備面試時切換到深色模式。
🗺️ 學習路徑
如果你不確定從哪裡開始，網站提供了引導式學習路徑，每一條都建立在前一條的模式之上。你的進度會儲存在瀏覽器中。
| 等級 | 路徑 | 系統 |
|---|---|---|
| 🟢 從這裡開始 | 基礎 | 短網址 → Pastebin → API 速率限制器 → 搜尋自動完成 |
| 🟡 中階 | 即時系統 | WhatsApp → 大規模 WebSocket → 即時體育比分 → Uber |
| 🔴 進階 | 大規模媒體 | Instagram → Twitter / X → YouTube → Netflix |
| 🔴 進階 | 金流與預訂 | BookMyShow → Amazon → 支付閘道 → Buy now, pay later |
🏗️ 收錄的系統
系統目錄可以依分類、難度與概念篩選。以下是概覽：
- 媒體與社群： YouTube、Netflix、Instagram、Twitter / X、WhatsApp、Quora、LinkedIn、即時體育比分
- 移動與物流： Uber、Google 地圖、Zomato / 食物外送、Porter、租車、司機預訂與車隊管理
- 電商與金融科技： Amazon、支付閘道、先買後付、股票經紀
- 預訂與平台市集： BookMyShow、MakeMyTrip、Airbnb、航空訂位、NoBroker、Urban Company、Practo、AstroTalk、會議排程器
- 基礎元件： 短網址、Pastebin、API 速率限制器、搜尋自動完成、網路爬蟲、Dropbox、大規模 WebSocket、視訊通話（WebRTC）、Redis Cluster
我刻意納入了全球巨頭，以及在印度很熱門的系統（BookMyShow、Zomato、NoBroker、Practo、Urban Company…），因為這些在當地面試很常出現，但在其他地方卻很少被提到。
🎯 這個工具適合誰？
- 👩💻 面試準備者——練習從頭到尾解釋設計，並觀察模式如何在不同系統中重複出現。
- 🏢 在職工程師——把你在某個雲端熟悉的設計，對應到另一個雲端的服務。
- 🎓 學生與初學者——從 Foundations 路徑開始，循序漸進建立理解。
- 🤔 好奇的人——你有沒有想過，按下電影座位上的「預訂」後到底發生什麼事？現在你可以直接看它如何運作。
🛠️ 技術實作方式
- Next.js（靜態匯出）——整個網站都是純靜態檔案，部署在 Vercel 上
- React Flow + ELK——自動排版、可縮放的架構圖
- Tailwind CSS——樣式設計，包含深色模式
- Zod——每個系統都是一個有型別的內容檔，並以 schema 驗證，因此新增一個新設計主要是在寫資料，而不是寫 UI 程式碼
📈 我在製作過程中學到的事
做這個專案教會我的，比單純閱讀多得多：
- 只有當你必須畫出每一個跳點時，你才算真正理解一個系統。 當我開始寫逐步解析時，知識上的缺口立刻就暴露出來。
- 雲端平台比看起來更相似。 一旦你把 AWS、GCP、Azure 與開源元件對應起來，底層模式就會變得很明顯——只是名稱不同而已。
- 模式會在各處重複出現。 冪等性會出現在支付、預訂與叫車配對中。fan-out 會出現在 Twitter、Instagram 與 LinkedIn 中。用視覺化方式看見這些，真的會突然恍然大悟。
這個專案還在持續成長——我也一樣。
🤝 歡迎一起參與
這是一個學習型專案，我很希望它能成為社群資源。如果你覺得有幫助：
- ⭐ 到 GitHub 幫專案加星——這真的能幫助更多人發現它： github.com/amananandrai/system-design-explainer
- 💡 分享建議——下一個我該加入哪個系統？歡迎在留言區告訴我！
- 🐛 回報問題——發現不準確的圖、錯誤的雲端對應，或 bug 嗎？請 開啟 issue。
- 🔧 提交 PR——無論是新增系統、更好的逐步解析、元件修正，或 UI 改進，都非常歡迎貢獻。
想要新增系統嗎？在 src/content/systems/ 建立一個檔案，將它註冊到 systems/index.ts，依照 src/types/schema.ts 的 schema，然後執行 npm run validate 檢查。要在本機執行：
git clone https://github.com/amananandrai/system-design-explainer.git
cd system-design-explainer
npm install
npm run dev # http://localhost:3000🙌 結語
👉 在這裡試用： system-design-explainer.vercel.app
⭐ 在這裡加星： github.com/amananandrai/system-design-explainer
我真的很想聽聽你的回饋。歡迎在留言中告訴我你先探索了哪個架構——以及你接下來最想看到哪一個！
祝你設計愉快！🚀
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
