DevToolKits.app
架構圖視覺化

基礎架構架構圖生成器

透過 GUI 操作即可建立系統架構圖或網路圖。即時生成 Mermaid 程式碼與圖片。

指南: 使用方法與特色

  • 點擊「新增節點」建立元素，並設定其標籤與形狀（矩形、圓角、圓柱等）。
  • 使用「新增連線」從下拉選單選擇起始/終止節點來定義元素間的關係。
  • 在「版面方向」區段切換圖表流向（由上至下、由左至右等）。
  • 使用「下載 PNG」按鈕將生成的圖表下載為 PNG 圖片。
  • 使用「複製 Mermaid」將 Mermaid 語法複製到剪貼板，以便在 README 或文件工具中使用。

範例: 範例

標準 Web 三層架構

輸入範例

節點：Internet、負載平衡器、應用伺服器、資料庫
連線：Internet -> LB -> App -> DB

輸出範例

graph TB
    n1["Internet"]
    n2(["Load Balancer"])
    n3["App Server"]
    n4[("Database")]
    n1 --> n2
    n2 --> n3
    n3 --> n4

FAQ: 常見問題

  • 我可以儲存圖表嗎？

    可以從「下載 PNG」按鈕以 PNG 格式下載。也可以複製 Mermaid 代碼儲存，以便日後重新編輯。

  • 可以使用雲端專屬圖示（AWS/Azure）嗎？

    目前僅支援通用形狀。圖示支援功能正在考慮於未來更新中加入。

  • 可以拖曳節點來改變位置嗎？

    版面配置由 Mermaid 引擎自動處理，不支援手動拖曳。請使用版面方向設定來調整流向。

使用情境: 常見使用情境

  • 快速建立架構圖

    快速可視化並分享任何規模專案的架構概覽。

  • 文件圖解

    在幾分鐘內為 GitHub README 或內部 wiki 生成圖表代碼。

  • 網路設計腦力激盪

    可視化子網路或閘道器之間的依賴關係，與團隊達成共識。

注意: 注意事項與限制

  • 資料持久性

    重新整理頁面後內容將會消失。如需保留變更，請複製並儲存 Mermaid 代碼。

  • 版面限制

    元素由 Mermaid 自動排列，不支援手動拖曳放置。

  • 瀏覽器效能

    若節點數量極多，可能影響瀏覽器的渲染效能。

節點設定

連接設定

graph TB Users["Users"] LB["Load Balancer"] App1["App Server 1"] App2["App Server 2"] DB[("Database")] Users --> LB LB --> App1 LB --> App2 App1 --> DB App2 --> DB

基礎架構圖建構器

建立服務、網路、資料庫與元件流向的基礎架構或系統架構圖。適合技術文件、設計 review 與跨團隊溝通。

常見用途

  • 文件化架構：呈現主要系統與依賴。
  • 規劃變更：在 migration 或配置調整前檢視結構。
  • 共享背景資訊：讓 backend、DevOps 與 product 團隊對齊。

如果圖變得太複雜，請拆成多個較小的視圖。

這個工具的相關文章

工具介紹
2026-02-25

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

「利用基於 Mermaid.js 的架構圖生成器，只需定義節點與連線，即可將雲端或網路配置視覺化。」

開發故事
2026-04-06

「誰也沒有更新架構圖」的問題

當有人問「等等，中間不是還有另一台伺服器嗎？」時，你是否曾感到背脊發涼？這就是打造即時 Mermaid 基礎設施視覺化工具的故事。

Recent Articles

工具介紹
2026-05-02

CSV 與 JSON 轉換：API 串接與資料移轉的格式選擇

了解如何安全地在 CSV 與 JSON 之間轉換，包含標題列、分隔符號、值的型別、巢狀資料與實務工作流程。

工具介紹
2026-05-02

JSON 格式化與驗證：安全檢查 API 回應的方法

了解如何格式化 JSON、找出語法錯誤、確認值的型別，並將 API 回應延伸成 TypeScript 型別、Zod Schema 或 OpenAPI 文件。

開發故事
2026-04-06

「誰也沒有更新架構圖」的問題

當有人問「等等，中間不是還有另一台伺服器嗎？」時，你是否曾感到背脊發涼？這就是打造即時 Mermaid 基礎設施視覺化工具的故事。

開發故事
2026-04-05

在 YAML 地獄中崩潰：為什麼我寫了一個 CI/CD 視覺化工具

當 GitHub Actions 中的 'needs' 依賴關係變得混亂到人類無法看清時，我決定將 YAML 迷宮變成一張俐落的流程圖。

開發故事
2026-04-04

別再為了 JOIN 哭泣：視覺化 SQL 產生器背後的故事

「等等，LEFT JOIN 是怎麼運作的？」我建立了這個無程式碼 SQL 工具，讓我們不用再浪費時間去除錯漏寫的逗號和語法錯誤。

開發故事
2026-03-09

用遞迴解決 JSON 轉 TypeScript：不依賴第三方庫的強大之處

「從 API 回應中瞬間生成型別定義。介紹不使用外部解析器、僅憑遞迴演算法實現輕量且高速轉換的幕後故事。」

透過站內捷徑快速切換常用工具。

文章
1
文章列表
開發與 DevOps
8
GitHub Actions 可視化 SQL 格式化 視覺化 SQL 構建器 SQL → ER 圖轉換 Curl 轉換器 Chmod 計算機 Cron 編輯器與解析器 基礎架構架構圖生成器
資料轉換與 Schema
6
JSON 格式化 JSON → TypeScript JSON → Zod JSON → OpenAPI JSON ⇔ YAML 轉換 CSV ⇔ JSON 轉換
安全與加密
5
Base64 / 58 / 32 JWT 工具 雜湊與 HMAC 產生器 JWKS 產生器 UUID 產生器
文字與程式碼輔助
4
Markdown 表格產生器 文本＆程式碼工具 正則表達式測試器 Diff 檢視器
URL、QR 與網路
4
URL 編碼 / 解碼 URL 參數 → JSON QR 生成器 QR 讀取器
設計與 UI
2
顏色工具 Favicon 產生器
日期與時間
3
時區轉換工具 時間單位換算 UNIX 時間戳轉換