跳至內容
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 團隊對齊。

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

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

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