您的架構圖是否有持續維護？

「最新版的架構圖在哪裡？」

僅需瀏覽器即可製作基礎設施架構圖：從代碼自動生成圖表

當團隊新成員這樣詢問時，有多少開發現場能自信地拿出檔案呢？在許多專案中，初期設計時用 draw.io 或 PowerPoint 畫的圖，往往在未經更新的情況下就被擱置一旁。

原因很簡單：「因為修正起來很麻煩」。
在瀏覽器上點選連線、調整配置、匯出成圖片。在基礎設施變動頻繁的現代開發中，這樣的成本實在太高了。

想要「像寫代碼一樣」畫圖

就像我們用 Git 管理代碼一樣，如果架構圖也能以文字為基礎進行管理，文件的即時性將會大幅改善。這正是 Mermaid.js 值得關注的地方。

只需用文字定義連線關係，瀏覽器就會自動以最合適的佈局繪製圖表。沒有理由不使用這種如同「魔法」般的機制。

graph TD
    Internet["Internet"] --> LB["Load Balancer"]
    LB --> WebServer["Web Server"]
    WebServer --> DB[("Database")]

為了不被工具所累的「視覺化編輯器」

話雖如此，要死記硬背所有 Mermaid 語法並手寫出來，也是一樁難事。我們希望專注於「思考基礎設施配置」，而非在「Mermaid 語法錯誤」上耗費心神。

本站的 基礎設施架構圖生成器 正是為了兼顧兩者優點而設計的。

直觀組裝，聰明匯出

  1. 放置節點：從 UI 加入伺服器、資料庫等組件。
  2. 連接路徑：只需選擇節點間的通訊路徑。
  3. 複製 Mermaid：完成的圖表可以直接作為代碼複製。

將產出的 Mermaid 代碼貼到 GitHub 的 README 或 Notion，該處便會成為「始終保持最新的架構圖」。一旦需要修正，只需改動一行代碼。這種輕快感，才是「文件化」應有的樣貌。

結語

基礎設施架構圖並非產出後就完工的「藝術品」，而是隨著系統成長不斷改變形狀的「生物」。

告別「點點點」的手動作業，追求更輕盈、更精確的方式。
利用文字的力量視覺化您的設計，並持續更新團隊的共同認知吧。

💡 小貼士：在 GitHub 發送 Pull Request 時，建議根據基礎設施的變動同步更新 Mermaid 代碼。這樣一來，便能與代碼審查一同進行架構變更的審閱，有效防止文件形式化。

常見問題

Mermaid 架構圖可以貼到哪裡使用？

許多支援 Mermaid 的服務——GitHub README 與 Issue/PR、GitLab、Notion 等——只要以程式碼區塊貼上就會渲染成圖表。與圖片不同，它是可用 Git 管理的文字，因此會留在你的 diff 中並保有變更歷史。

與 draw.io 或 PowerPoint 相比有什麼優勢？

GUI 工具能細緻調整外觀，但編輯與重新匯出很繁瑣，圖表容易過時。Mermaid 只要改一行文字就能更新圖表，並可用 Git 版本控制，因此容易隨配置變更同步、保持「始終最新」。

我輸入的配置會被傳送到外部嗎？

基礎設施架構圖生成器 在你的瀏覽器內完成處理，不會將你的配置或 Mermaid 代碼傳送到伺服器，因此可安全地將內部系統架構等敏感資訊繪製成圖。