跳至內容
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 的架構圖生成器，只需定義節點與連線，即可將雲端或網路配置視覺化。」

Recent Articles

使用案例
2026-08-04

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

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

工具介紹
2026-08-03

從資料表設計自動產生 CREATE TABLE 語句的原理｜DDL 產生器

解析 DDL 產生器的實作：以視覺化方式設計資料表並產生 CREATE TABLE 語句與 ER 圖。內容涵蓋 MySQL/PostgreSQL/SQLite 的型別轉換規則，以及從 JSON 範例推論欄位的演算法。

使用案例
2026-07-21

GitHub Actions needs 設計模式集｜加速 CI 的依賴關係組織法與反模式

以模式與反模式對照表整理 GitHub Actions 中 needs 所建立的 job 依賴關係。涵蓋 concurrency 取消重複執行、fail-fast 取捨、matrix 與 needs 組合的陷阱，以及可重複使用工作流程，並附上可直接複製的 YAML 範例。

使用案例
2026-07-21

Mermaid ER 圖語法完全參考｜關聯符號與實戰範例

完整整理 Mermaid erDiagram 語法：烏鴉腳表示法的基數對照表、一對多與多對多的差異、含 PK/FK 的屬性定義，以及一個完整的電商範例。

工具介紹
2026-07-21

如何用 SQL 建構器以視覺化方式組出 SELECT、JOIN 查詢

說明如何在瀏覽器中用視覺化 SQL 建構器組合 SELECT、WHERE、JOIN。涵蓋數值自動加引號的判斷原理、JOIN 使用時機對照表，以及多資料表 JOIN 的寫法。

使用案例
2026-07-21

SQL JOIN 完全參考｜INNER、LEFT、RIGHT、FULL 的差異與結果列數觀念

以對照表與結果列數範例，完整整理 SQL 的 JOIN 種類（INNER/LEFT/RIGHT/FULL/CROSS/SELF）。說明一對多 JOIN 為何會使列數增加、WHERE 子句與 ON 子句在 NULL 判斷上的陷阱，以及多資料表 JOIN 的寫法。

廣告

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

文章
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 時間戳轉換

廣告