本文提到的工具
邊閱讀邊在瀏覽器中開啟工具，立即試試整個流程。
你的架構圖是不是還停留在「白板照片」？
設計會議後拍下的白板照片，就這樣成了「最新的架構圖」，這種情況其實不少。想整理成正式的圖，要在繪圖工具裡畫框、找圖示、一條條調整線的轉折，比想像中費工。
像 Mermaid 這種由文字自動排版的方式雖然方便，卻不擅長用框圈出邊界（「Cloudflare 之中」「自家伺服器之中」「外部服務」），也無法自己決定每個東西放在哪裡。
因此我們做了系統架構圖編輯器。自由擺放帶圖示的節點與群組框，連線會自動以直角相連，只靠瀏覽器就能畫出整齊的架構圖。
這個編輯器能做什麼
- 群組框：實線・虛線、7 種顏色，可巢狀。移動框時，裡面的節點會一起移動
- 圖示節點：20 種通用線稿圖示，名稱下方還能寫
Nitro、PostgreSQL等補充說明 - 直角自動連線：標籤、虛線、藍色，並可指定線進出的邊
- 自己的圖片：可將標誌等以圖片匯入（不內建品牌標誌）
- 匯出：PNG / SVG / JSON，並提供復原・重做與瀏覽器內自動儲存
輸入的內容與圖片都不會傳送到瀏覽器之外。
繪製步驟
以「使用者 → 邊緣 → 應用程式伺服器 → 外部服務」這個典型架構為例。
- 先放群組框：建立「邊緣」「應用程式伺服器」「外部服務」三個框並區分顏色。這是讓人一眼看出各部分在哪裡運作的基礎
- 把節點放進框裡：選取框後按「新增節點」，節點就會放在該框內。輸入名稱與補充說明（技術名稱），再選擇圖示
- 拉線：按「連線」，依序點擊起點與終點。在選取節點的狀態下按住 Shift 點擊另一個節點也可以
- 用標籤補充意義：把
HTTPS、/api等協定或路徑當作連線標籤 - 匯出：PNG 用於貼上，SVG 放大也不失真，JSON 用於之後繼續編輯
讓架構圖好讀的訣竅
- 流向統一為由左到右（由外到內）：使用者放最左邊，依序是邊緣、伺服器、外部服務，流量就能自然地讀下去
- 只改「主角」連線的顏色：只把使用者的主要流量設為藍色，整體骨架就會浮現出來
- 虛線用於「維運上的流程」：備份、部署等不屬於請求主流程的箭頭用虛線區分
- 群組框最多 3〜4 個：框太多反而看不出邊界。細部架構請另畫一張圖
- 連線沒有照你想的走時，指定進出的邊：連線會自動避開其他節點與群組名稱，想自己決定路徑時，可將「起點邊」「終點邊」指定為上・下・左・右
像程式碼一樣管理圖
把「儲存為 JSON」的檔案放進儲存庫，架構改變時載入修改，並在 PR 中確認差異。想用文字比對差異，或需要 Mermaid 時，基礎設施圖表產生器更合適；想講究配置與圖示時則使用這個編輯器。
常見問題
和 Mermaid 架構圖有什麼不同？
Mermaid 由自動排版，方便但無法細部指定節點位置、圖示與巢狀框。這個編輯器改由你自己決定位置，換來能用邊界框與圖示做出美觀的圖。
可以使用 AWS 或 Cloudflare 的圖示嗎？
品牌標誌有使用條件，因此未內建。除了通用圖示，也可以為每個節點匯入自己準備的圖片（512KB 以內）。使用標誌時請遵守各公司的指南。
做好的圖可以和別人分享嗎？
可以匯出 PNG / SVG 貼上，或儲存為 JSON 交給對方。對方用「載入 JSON」就能開啟同一張圖並繼續編輯。
輸入的內容會傳送到伺服器嗎？
不會。所有處理都在瀏覽器內完成，圖與匯入的圖片都不會外流。自動儲存也只使用此瀏覽器的本機儲存空間。
總結
畫圖如果太麻煩，就不會更新，最後沒人再相信它。用圖示與框畫出「什麼在哪裡運作」，線交給工具自動整理。有了這樣的輕鬆感，架構改變時修改圖也不再是負擔。請先打開工具，從修改範例開始試試。