D2 語法基礎

D2 是一款現代化的、基於文字的工具，用於創建清晰、易讀的圖表。它代表「宣告式圖表繪製」。在 VPasCode 中，D2 允許軟體開發人員和解決方案架構師將簡單的程式碼文字轉換為乾淨的視覺模型，無需手動繪製形狀。

提示： D2 語法設計為簡單且易於閱讀。形狀、連接、標籤和群組均可使用基本的文字行來撰寫，無需複雜的設定。

1. 基本形狀與連接

要建立形狀，只需輸入其名稱。要連結形狀，請使用箭頭（-> 表示單向，或 <-> 表示雙向）。

# 簡單連接
使用者 -> 網頁伺服器：HTTP 請求
網頁伺服器 -> 資料庫：取得資料
資料庫 -> 網頁伺服器：回傳結果
網頁伺服器 <-> 快取：讀寫同步

D2 simple connection diagram showing request and response flows between User, Web Server, Database, and Cache - Text to diagram editor - VPasCode

預設情況下，形狀會以標準方框顯示。您可以輕鬆地透過使用 shape 屬性來變更形狀的圖示類型或設定自訂標籤。

# 定義形狀類型
客戶端：{
  shape: person
}

雲端服務：{
  shape: cloud
}

主資料庫：{
  shape: cylinder
  label: "主要資料庫 (PostgreSQL)"
}

客戶端 -> 雲端服務 -> 主資料庫

D2 custom shapes showing person, cloud, and database cylinder icons linked in sequence - Text to diagram editor - VPasCode

D2 原生支援使用 class 形狀來進行物件導向結構設計。

客戶帳戶：{
  shape: class

  accountId: 字串
  emailAddress: 字串

  isActive(): 布林值
}

D2 class diagram displaying CustomerAccount properties and isActive method - Text to diagram editor - VPasCode

D2 可以使用標準的大括號（”）輕鬆地將項目分組到容器中{}。您也可以使用點表示法將不同組中的元素連結起來。

# 使用容器進行分組
前端應用程式：{
  React UI -> 狀態管理器
}

後端基礎設施：{
  API 網關 -> 認證微服務
  API 網關 -> 訂單微服務
}

# 跨組連結
前端應用程式.狀態管理器 -> 後端基礎設施.API 網關：REST 呼叫

D2 nested containers grouping Frontend Application and Backend Infrastructure modules - Text to diagram editor - VPasCode

自訂背景顏色、線條顏色和字型樣式可直接在區塊內使用 style 關鍵字進行自訂。

服務 A：{
  樣式：{
    填充："#e0e7ff"
    線條："#4338ca"
    邊框圓角：8
  }
}

服務 B：{
  樣式：{
    填充："#fef3c7"
    線條："#d97706"
  }
}

服務 A -> 服務 B：傳送訊息

D2 styled blocks showing custom background colors and border styles for Service A and Service B - Text to diagram editor - VPasCode