您的架構圖是否有持續維護？
「最新版的架構圖在哪裡？」
當團隊新成員這樣詢問時，有多少開發現場能自信地拿出檔案呢？在許多專案中，初期設計時用 draw.io 或 PowerPoint 畫的圖，往往在未經更新的情況下就被擱置一旁。
原因很簡單：「因為修正起來很麻煩」。
在瀏覽器上點選連線、調整配置、匯出成圖片。在基礎設施變動頻繁的現代開發中，這樣的成本實在太高了。
想要「像寫代碼一樣」畫圖
就像我們用 Git 管理代碼一樣，如果架構圖也能以文字為基礎進行管理，文件的即時性將會大幅改善。這正是 Mermaid.js 值得關注的地方。
只需用文字定義連線關係，瀏覽器就會自動以最合適的佈局繪製圖表。沒有理由不使用這種如同「魔法」般的機制。
graph TD
Internet["Internet"] --> LB["Load Balancer"]
LB --> WebServer["Web Server"]
WebServer --> DB[("Database")]為了不被工具所累的「視覺化編輯器」
話雖如此，要死記硬背所有 Mermaid 語法並手寫出來，也是一樁難事。我們希望專注於「思考基礎設施配置」，而非在「Mermaid 語法錯誤」上耗費心神。
本站的 基礎設施架構圖生成器 正是為了兼顧兩者優點而設計的。
直觀組裝，聰明匯出
- 放置節點：從 UI 加入伺服器、資料庫等組件。
- 連接路徑：只需選擇節點間的通訊路徑。
- 複製 Mermaid：完成的圖表可以直接作為代碼複製。
將產出的 Mermaid 代碼貼到 GitHub 的 README 或 Notion，該處便會成為「始終保持最新的架構圖」。一旦需要修正，只需改動一行代碼。這種輕快感，才是「文件化」應有的樣貌。
結語
基礎設施架構圖並非產出後就完工的「藝術品」，而是隨著系統成長不斷改變形狀的「生物」。
告別「點點點」的手動作業，追求更輕盈、更精確的方式。
利用文字的力量視覺化您的設計，並持續更新團隊的共同認知吧。
💡 小貼士：在 GitHub 發送 Pull Request 時，建議根據基礎設施的變動同步更新 Mermaid 代碼。這樣一來，便能與代碼審查一同進行架構變更的審閱，有效防止文件形式化。