基礎結構視覺化生產器的圖片

那種似曾相識的恐懼感

「嘿，我們是不是在 API 伺服器前面又加了一台 RabbitMQ 啊？」

當團隊裡比較資淺的成員在會議上不經意地指出這點時，我整個人背脊都涼了。貼在我們內部 Wiki 上的架構圖正冷冷地看著我，上面那鮮明的「最後更新時間」竟然停留在半年前。

老實說，基礎架構是每天都在變動的東西。今天在這邊加一個 Redis 快取，明天在那邊多個反向代理。但是，要打開笨重的圖形軟體，拖曳小方塊圖示，痛苦地對齊箭頭，匯出成 PNG 檔，再上傳到 Wiki… 這整個過程的阻力實在太大了。每個人都想著「我待會一定會把這張圖更新」，但結果當然是誰也沒去做。

渴望「架構圖即程式碼 (Diagram as Code)」

為了解決這個「永遠都會過期」的系統架構圖問題，我把目光轉向了 Mermaid.js。「架構圖即程式碼」的概念簡直是開發者的夢想：你只要打幾行字，將它提交到 git，一張漂亮的架構圖就會像施了魔法般自動產生。

但要在本地環境做到這點還是有些脾氣要克服。試圖撰寫複雜的巢狀結構（像是將 EC2 畫在 VPC 裡面，而 VPC 又包在 AWS Cloud 區域之類的）需要去學一套不是那麼直覺的語法。以前我寫好程式碼後，還得等 PR 預覽部署完畢，才發現我畫的箭頭全指向了反方向。

看著架構圖在敲鍵盤間自動成形

「我只是想要打字，並且看著螢幕另一邊的系統圖能夠即時、滑順地建立起來而已。」

這個完全出於私心的願望，催生出了這款「基礎設施架構圖產生器」。

在打造這項工具時，我最大的鐵律就是：零伺服器傳輸。基礎架構配置說穿了就是公司的金庫設計圖，我絕對不可能讓你把這份機密貼到一個會把資料送到某台隨機伺服器（即使那是「我自己」的隨機伺服器）的工具上。因此，我強制將整個圖形渲染引擎全部塞進瀏覽器端本地的 JavaScript 裡。

如果你現在對更新基礎設施文件感到恐懼，試試看在這個工具裡寫一點程式碼吧。看著架構圖瞬間就定位，會帶給你一種詭異卻非常滿足的「終極架構師力量」的錯覺。