宣布 VPasCode 支援 D2 圖表：終極免費 D2 編輯器與線上 D2 工具

我們非常高興宣布一項重大更新VPasCode：全面支援D2圖表程式碼語言！透過此更新，架構師、開發人員與技術撰寫者可立即將宣告式 D2 文字腳本轉換為乾淨、專業的視覺化圖表，無需任何摩擦。

無論您是規劃複雜的雲端架構、微服務拓撲，還是組織工作流程，VPasCode 都是您首選的免費 D2 編輯器與功能豐富的線上 D2 工具。立即在瀏覽器內體驗無縫、即時的視覺化效果。

欲了解更多關於我們平台功能與更新資訊，請造訪官方VPasCode 頁面.

VPasCode 中 D2 整合功能的運作方式

在 VPasCode 中使用 D2 快速、直覺，並專為提升您的生產力而設計。工作區採用方便的並排佈局：

• 左側面板（程式碼編輯器）：只需貼上、輸入或編輯您的 D2 腳本。VPasCode 的自動格式偵測功能會立即識別您的程式碼，無需手動切換語言。
• 右側面板（即時視覺化器）：當您輸入或修改程式碼區塊時，即可即時動態觀看您的圖表渲染效果。

下方影片示範如何在 Visual Paradigm VPasCode 圖表程式碼編輯器中建立 D2 圖表。

準備好親自試試看嗎？立即使用我們的VPasCode 編輯器.

D2 支援所包含的關鍵功能

除了即時渲染外，我們新的 D2 整合功能還內建多樣化的協作與輸出選項，以符合您的工作流程：

1. 彈性匯出選項：可立即將完成的圖表匯出為可縮放的 SVG 向量圖形或高解析度 PNG 圖像，適用於報告、簡報與文件。

   

2. 剪貼簿整合：只需點擊一下，即可快速將渲染完成的圖示圖片複製到剪貼簿，直接貼上至 Slack、電子郵件或文字處理軟體中。
3. 即時網址分享：透過直接的超連結，輕鬆與同事或客戶分享您的作品。更棒的是，觀看者無需登入即可檢視您分享的圖示。

示範：使用 D2 建立基本網路圖示

要了解使用此免費 D2 編輯器，只需考慮以下基本多層級網路架構的範例即可。

D2 原始碼

方向：右
client -> load_balancer：HTTPS
load_balancer -> app1：HTTP
load_balancer -> app2：HTTP
app1 -> redis：GET
app2 -> redis：GET
app1 -> postgres：SQL
app2 -> postgres：SQL
client.shape：person
load_balancer.shape：rectangle
app1.shape：hexagon
app2.shape：hexagon
redis.shape：cylinder
postgres.shape：cylinder
redis.style.fill："#fee2e2"
postgres.style.fill："#dcfce7"

在我們的線上 D2 工具中如何呈現

當您將上方的程式碼貼入 VPasCode 時，引擎會自動處理關係、方向性與自訂圖形樣式：

• 其中client被設計為獨特的人物圖示，發起 HTTPS 請求至一個矩形load_balancer.
• 流量會乾淨地分散至兩個六邊形應用節點（app1與app2).
• 兩個應用節點皆安全地查詢後端快取層（redis，以柔和的紅色呈現）與關聯式資料儲存（postgres，以柔和的綠色呈現）。

更多 D2 圖示範例

基本形狀

server -> client: HTTP
server -> db: 查詢
client: {
  shape: person
  style.fill: "#cfe2ff"
}
db: {
  shape: cylinder
  style.fill: "#d1e7dd"
}
server.style.fill: "#fff3cd"

容器

network: {
  web: {
    shape: hexagon
    style.fill: "#e7f1ff"
  }
  api: {
    shape: rectangle
    style.fill: "#fff3cd"
  }
  db.primary: {
    shape: cylinder
    style.fill: "#d1e7dd"
  }
  db.cache: {
    shape: cylinder
    style.fill: "#f8d7da"
  }
  web -> api: REST
  api -> db.primary: SQL
  api -> db.cache: 查詢
}

樣式

vars: {
  d2-config: {
    sketch: true
    layout-engine: elk
  }
}
aws: {
  vpc: {
    web: {
      shape: rectangle
      style: {
        fill: "#fef3c7"
        stroke: "#d97706"
        stroke-width: 2
        font: mono
      }
    }
    api: {
      shape: rectangle
      style.fill: "#dbeafe"
    }
    db: {
      shape: cylinder
      style.fill: "#dcfce7"
    }
  }
}
user -> aws.vpc.web: HTTPS {
  style.animated: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.db: SQL {
  style.stroke-dash: 5
}

序列

shape: sequence_diagram
user -> api: GET /users
api -> db: SELECT *
db -> api: 資料列
api -> user: 200 OK
user -> api: POST /users
api -> db: INSERT
db -> api: 資料列
api -> user: 201 已建立

注意：您可能想要使用 PlantUML 建立序列圖。請查看如何操作：

PlantUML 序列圖完整指南：語法、範例與最佳實務

什麼是 VPasCode？

如果您是我們平台的新使用者，Visual Paradigm VPasCode是一個整合性的、基於瀏覽器的「程式碼繪圖」解決方案，專為現代技術團隊設計。它讓您完全透過程式碼定義架構與資料模型，從而消除手動拖曳繪圖工具的麻煩。

除了 D2 之外，VPasCode 還支援大量流行的圖示格式與結構化語言，包括 PlantUML、Mermaid、Graphviz，ECharts, SQL, YAML, JSON，以及像這樣的主流程式語言Java, Python, Rust，以及TypeScript。核心程式碼編輯、即時預覽和影像匯出完全免費。

立即開始創作

立即提升您的技術文件與架構建模。立即啟動應用程式，體驗我們全新 D2 功能的快速與便利。VPasCode 編輯器.