# 系統架構圖產生器

URL: https://discuvr.org/system-diagram/?hl=zh-hant
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

輸入 A -> B 即可畫出架構圖與流程圖。自動排版、可摺疊群組、步驟編號，支援匯出 PNG 與 SVG。

在白板工具裡，每個方塊、每條箭頭都要自己畫、自己對齊。這裡只需寫下誰呼叫誰，一行一條箭頭，排版自動完成。把相關服務放進群組，需要看全局時摺疊成一個方塊，看細節時再展開。

## 功能作用

- 自動排版，由左至右或由上至下，邊輸入邊更新。
- 依名稱選擇形狀：DB 是資料庫，Kafka 是佇列，User 是人員，以 ? 結尾的是判斷。
- 群組可摺疊成一個方塊，一張圖同時滿足高層視圖與細節視圖。
- 也可以在畫布上拖動、連線、重新命名與新增方塊，每次修改都會寫回文字。
- 步驟編號、手繪風格、匯出 PNG 與 SVG、分享連結。不會上傳任何內容。

## 運作方式

1. 輸入類似 User -> Web App -> Orders DB 的行，或從範本開始。
2. 用 名稱 { ... } 新增群組，冒號後寫標籤，非同步呼叫用 -->。
3. 在概覽與詳細之間切換，拖動整理方塊，然後匯出或複製連結。

## 問題

**和 Excalidraw 有什麼不同？**

Excalidraw 是自由白板，每個形狀和箭頭都要自己擺放。這裡文字就是圖，排版自動完成，新增一個服務只需一行，不用畫方塊再重新對齊。如果只是隨手草圖，Excalidraw 仍然更合適。

**怎樣同時呈現高層與細節視圖？**

用 名稱 { ... } 把相關方塊放進群組。「概覽」會把每個群組摺疊成一個方塊並合併箭頭，「詳細」再展開。也可以在群組標題處單獨摺疊某個群組。

**我的圖會被儲存到哪裡嗎？**

不會。圖在您的瀏覽器中繪製，並存在瀏覽器的本機儲存空間。分享連結把圖放在連結本身的 # 號之後，瀏覽器從不會把這部分傳送給伺服器。

**可以直接貼上 Mermaid 流程圖嗎？**

不能直接貼上，本工具沒有 Mermaid 匯入。A -> B 這樣的一般行可以沿用，但有三處不同。刪掉 graph TD 這一行表頭，否則它會變成一個方框，改寫為 direction: down。拿掉 Mermaid 方括號裡的標籤，因為這裡 [ ] 中的文字會被當作形狀與顏色標籤。另外，這裡的 --> 畫的是表示非同步呼叫的虛線箭頭，而在 Mermaid 中它是一般箭頭；實線箭頭請用 ->。

**除了 A -> B 還能寫什麼？**

A -> B: 文字 為箭頭加上標籤，A --> B 畫虛線箭頭，A <-> B 畫雙向箭頭，A <- B 指向反方向。名稱 [db, blue] 設定形狀與顏色；形狀有 service、db、cache、queue、actor、client、storage、external、decision、terminal 和 note。title: 為圖命名，direction: down 改為由上到下排列，以 # 或 // 開頭的行是註解。一張圖最多容納 300 個方框、600 條箭頭和 20,000 個字元的文字。

**摺疊一個群組後，箭頭會怎樣？**

摺疊群組內部各方框之間的箭頭會隱藏，跨越群組邊界的箭頭則改為從群組方框出發或指向它。同一對方框之間的多條箭頭會合併成一條更粗的箭頭，保留第一個標籤並加上計數。例如，Payments API 和 Ledger 都在 Payments { ... } 中時，Checkout -> Payments API 和 Checkout -> Ledger 兩行在概覽中會變成一條箭頭 Checkout -> Payments x2。已摺疊群組裡的子群組會一起摺疊；開啟步驟時，編號依書寫順序跟隨仍然可見的箭頭。

## 更多開發者工具

- [JSON 格式化工具](https://discuvr.org/json-formatter/?hl=zh-hant)
- [Python 格式化工具](https://discuvr.org/python-formatter/?hl=zh-hant)
- [HTML 檢視器](https://discuvr.org/html-viewer/?hl=zh-hant)
- [IP 子網路計算機](https://discuvr.org/ip-subnet-calculator/?hl=zh-hant)

## 常一起使用

- [文字比較](https://discuvr.org/text-diff/?hl=zh-hant)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.