D2 圖表

以下是使用 VPasCode 中的 D2 創建的常見軟體圖表的即用範例。您可以直接將這些程式碼片段複製到 VPasCode 即時編輯器中，立即生成乾淨的視覺化圖表。

注意： 您可以使用以下方式設定佈局方向direction: right 或 direction: down 在您的 D2 程式碼區塊頂部。

1. 系統架構圖

一個具備巢狀伺服器與儲存元件的多層雲端網路架構。

D2


在 VPasCode 中編輯 D2
D2 Edit D2 in VPasCode 
direction: right

User: {
  shape: person
}

Web Application: {
  CDN: {
    shape: cloud
  }
  
  Load Balancer
  
  App Servers: {
    Server 1
    Server 2
  }
  
  Data Tier: {
    PostgreSQL Database: {
      shape: cylinder
    }
    Redis Cache: {
      shape: cylinder
    }
  }
}

User -> Web Application.CDN: 請求頁面
Web Application.CDN -> Web Application.Load Balancer: 路由流量
Web Application.Load Balancer -> Web Application.App Servers.Server 1
Web Application.Load Balancer -> Web Application.App Servers.Server 2

Web Application.App Servers.Server 1 -> Web Application.Data Tier.Redis Cache: 檢查快取
Web Application.App Servers.Server 1 -> Web Application.Data Tier.PostgreSQL Database: 查詢資料
Edit D2 in VPasCode



在 VPasCode 中編輯 D2

D2 multi-tier cloud web system architecture featuring CDN, Load Balancer, App Servers, PostgreSQL, and Redis - Text to diagram editor - VPasCode

 

2. 資料庫結構（SQL 表格圖）

D2 具備內建支援，可使用 sql_table 形狀，乾淨地呈現 SQL 表格與實體關係。

D2


在 VPasCode 中編輯 D2
D2 Edit D2 in VPasCode 
users: {
  shape: sql_table
  id: int {constraint: primary_key}
  username: varchar
  email: varchar
  created_at: timestamp
}

orders: {
  shape: sql_table
  id: int {constraint: primary_key}
  user_id: int {constraint: foreign_key}
  total_amount: decimal
  status: varchar
}

order_items: {
  shape: sql_table
  id: int {constraint: primary_key}
  order_id: int {constraint: foreign_key}
  product_name: varchar
  quantity: int
}

users.id -> orders.user_id: 一對多
orders.id -> order_items.order_id: 一對多
Edit D2 in VPasCode



在 VPasCode 中編輯 D2

D2 SQL table ERD diagram showing 1-to-Many entity relationships between users, orders, and order_items - Text to diagram editor - VPasCode

 

3. 自動化部署流程（CI/CD）

規劃從程式碼提交到實際生產環境發佈的軟體部署步驟。

D2


在 VPasCode 中編輯 D2
D2 Edit D2 in VPasCode 
direction: right

Developer -> GitHub: 1. 提交程式碼

GitHub Pipelines: {
  建置步驟 -> 測試步驟 -> Docker 映像檔
}

GitHub -> GitHub Pipelines: 2. 觸發動作
GitHub Pipelines.Docker Image -> Docker 資料庫: 3. 儲存建置

Docker 資料庫 -> 生產伺服器: 4. 部署容器
Edit D2 in VPasCode



在 VPasCode 中編輯 D2

D2 CI/CD automated deployment workflow diagram mapping code push from GitHub to Docker Registry and Production Server - Text to diagram editor - VPasCode

 

返回頂端