跳至內容
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-08-07

curl 選項速查｜-X、-H、-d 實際做了什麼與常見陷阱

整理實務上會遇到的 curl 選項：為什麼加了 -d 就已經是 POST、-d 與 --data-raw 的差別、開頭的 @ 會悄悄讀取檔案的陷阱、單引號與雙引號的取捨，以及為什麼 -k 和 -L 值得多想一下。

工具介紹
2026-08-06

JSON Schema 與 Zod 雙向轉換的原理｜required 與 .optional() 的對應

解析雙向轉換器的實作：把 JSON Schema 轉成 Zod 結構定義，也把 Zod 程式碼轉回 JSON Schema。內容涵蓋 required 與 .optional() 預設值相反的陷阱、限制條件對照表，以及不執行程式碼就完成剖析的做法。

使用案例
2026-08-06

SQL 子句執行順序參考｜為什麼 WHERE 看不到 SELECT 的別名

SQL 並不是照您撰寫的順序執行。以邏輯執行順序（FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT）為主軸，說明別名為何在 WHERE 無法使用、WHERE 與 HAVING 的分工、ONLY_FULL_GROUP_BY、COUNT(*) 與 COUNT(欄位) 的差異，以及 LEFT JOIN 搭配 WHERE 的陷阱。

使用案例
2026-08-06

unified diff 格式閱讀指南｜看懂 git diff 的 @@ 標頭

說明如何閱讀 git 產生的 unified diff 格式：@@ -12,7 +12,9 @@ 四個數字的意義、只改一個字元為何顯示成整行替換、空白與換行字元的陷阱、\ No newline at end of file、合併提交的 @@@ 組合式 diff，以及以 similarity index 推斷檔案更名。

使用案例
2026-08-06

UTC⇄JST 換算參考手冊｜9小時時差對照表與時區踩雷指南

以對照表整理 UTC 與日本時間（JST）的換算，並說明與台灣時間（UTC+8）相差 1 小時的關係。內容涵蓋 ISO 8601 的 Z 與 +09:00、JavaScript 日期解析悄悄位移 9 小時的條件、MySQL/PostgreSQL 的時區行為，以及 GitHub Actions cron 一律以 UTC 執行的陷阱。

使用案例
2026-08-04

CREATE TABLE 參考手冊｜MySQL、PostgreSQL、SQLite 的型別與約束差異

以跨資料庫對照表整理 CREATE TABLE（DDL）的寫法：型別對應表、自動編號（AUTO_INCREMENT / IDENTITY / rowid）的方言差異、外鍵的 ON DELETE 行為，以及 MySQL 會靜默忽略的 CHECK 約束。

廣告

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

文章
1
文章列表
AI・LLM
3
AI Rules 產生器 LLM Token 計算器 LLM API 費用計算機
開發與 DevOps
9
GitHub Actions 可視化 SQL 格式化 Visual SQL Builder DDL 產生器 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 產生器
文字與程式碼輔助
5
Markdown 表格產生器 文本＆程式碼工具 Regex 測試器 Diff 檢視器 大小寫命名轉換器
URL、QR 與網路
5
URL 編碼 / 解碼 IP / CIDR 計算機 URL 參數 → JSON QR 產生器 QR 讀取器
設計與 UI
2
顏色工具 Favicon 產生器
日期與時間
3
時區轉換工具 時間單位換算 UNIX 時間戳轉換

廣告