告別手拉圖表地獄！新一代神器 D2 語言，讓純文字自動變身專業架構圖

你是不是也遇過這種崩潰瞬間？

為了畫一張架構圖、一張產品流程圖，你在 Visio 或 draw.io 的世界裡，無助地拖拽著一個個方塊，像在玩史上最無聊的拼圖。拉了老半天，線條永遠對不齊，顏色換來換去，好像都一樣醜。

最可怕的是，當需求方說：「嗯…我們把這個模組的功能改一下。」這意味著，你剛剛花掉的半個下午，直接歸零。改一個字，全圖重來。這不是惡夢，這是許多工程師與產品經理的日常。

但如果，我告訴你一個秘密呢？

想像一下，你像寫筆記一樣，隨意敲下幾行字。下一秒，一張精美、專業、邏輯清晰的架構圖就自動生成了。

這不是黑魔法，這是《圖表即程式碼 (Diagrams as Code)》的驚人魔力。而 D2, 正是這個新世界裡，一顆最亮眼的超新星。🚀 這篇文章，就是你的第一張單程票，我會帶你從零開始，無痛掌握這項足以改變你工作流程的神器。

D2 到底是何方神聖？為何你該現在就認識它？

D2，全名是【Declarative Diagramming】。我知道，聽到「宣告式」三個字，很多人的表情大概是 (´・ω・`)，別怕，我們來說人話。

所謂【宣告式】，就像你在點餐

你只需要告訴服務生：「我要一份牛排、一份沙拉、一杯紅茶。」你「宣告」了你最終想要的「結果」。你完全不需要教廚師怎麼切肉、怎麼燒水、怎麼擺盤。廚師（也就是 D2 的排版引擎）會用最專業的方式，把完美的成品送到你面前。

過去我們用軟體拉圖，更像是【指令式】。你得一步步「指揮」電腦：「方塊往左移 10 像素、對齊上方、箭頭拉到這個點…」累死人的，就是這些瑣碎的「過程」。

關鍵心法： D2 讓你專注在「WHAT」(圖裡有什麼、誰跟誰有關)，D2 的智慧引擎則完美搞定「HOW」(怎麼畫才專業又好看)。

D2 與 Mermaid 的關鍵差異是什麼？

問得好！這絕對是新手的核心問題。直接看這張對比，你就秒懂了：

我的比喻是： 如果 Mermaid 是你隨手記重點的【便利貼】，那 D2 就是一張能直接拿去施工的【專業工程藍圖】。兩者都很好，但如果你需要繪製更嚴謹、更複雜的系統架構，D2 絕對是你的首選。

D2 實戰教學：從零到一打造你的第一張架構圖 🚀

百聞不如一見，我們現在就來做第一張圖。你不需要安裝任何東西，只需要你的瀏覽器。

第一步：打開 D2 線上遊樂場 (Playground)

請點擊這個連結：https://play.d2lang.com/

你會看到一個很酷的介面。左邊是文字編輯區，右邊是即時預覽區。左邊下指令，右邊看結果，就是這麼簡單。我們的第一個目標：畫一張最基礎的「客戶端-伺服器-資料庫」架構圖。

第二步：定義所有物件 (Nodes)

在 D2 的世界裡，圖上的每個方塊、圓圈，都叫一個「物件」。我們就把需要的物件，一個個唱名出來就好。在左邊編輯區，打上這三行：

1
2
3

Client
Server
Database

神奇吧？右邊是不是瞬間冒出了三個方塊？你已經成功一半了！

第三步：建立流向 (Connections)

光有點名還不夠，我們要告訴 D2 誰跟誰是一對的。我們用一個很直觀的符號 -> 來表示箭頭方向。接著這樣寫：

1
2
3
4

# 井字號開頭的文字是註解，D2 會忽略它，是寫給人看的筆記
# 我們來描述一下流程：Client 連到 Server，Server 再連到 Database

Client -> Server -> Database

哇！你看右邊！D2 自動幫你拉好了箭頭，還聰明地幫你排好了版。一張最基礎的流程圖，完成了。

第四步：為關係加上說明 (Labels)

只有箭頭，別人可能看不懂。我們來加點說明文字，告訴大家這箭頭代表什麼意思。語法很簡單，在箭頭後面加上冒號 : 和用引號包起來的文字。

1
2

Client -> Server: "發送 HTTPS 請求"
Server -> Database: "讀寫資料"

是不是清楚多了？圖表的可讀性瞬間提升。

第五步：將物件分組 (Containers)

在真實世界，Server 和 Database 通常會被放在一個叫「後端」的系統裡。D2 當然也想得到！我們可以用大括號 {} 建立一個「容器」，把相關的東西打包在一起。

1
2
3
4

Backend: {
  Server
  Database
}

這個動作不只讓圖表結構更清晰，也讓後續的程式碼管理更方便。

整合演練：最終的 D2 程式碼成品 🌟

好了，暖身完畢。現在，讓我們把剛剛學會的所有招式組合起來。請清空左邊的程式碼，然後把下面這段完整的程式碼貼進去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 最終的 D2 程式碼

# 1. 直接定義關係，D2 會自動建立沒見過的物件
#    注意看，我們用 Backend.Server 來精準指向容器內的物件
Client -> Backend.Server: "發送 HTTPS 請求"

# 2. 定義一個名為 Backend 的容器，並放入它的成員
Backend: {
  # 容器內部的關係
  Server -> Database: "讀寫資料"

  # 3. (加分題) 幫物件換個造型 (shape)
  #    讓 Database 看起來更像個資料庫
  Database: {
    shape: cylinder
    # 可選美化
    style: {
      fill: "#F3F4F6"
      stroke: "#6B7280"
    }
  }
}

恭喜你！你已經完成了第一張專業的 D2 架構圖！是不是很有成就感？試著自己動手改改看裡面的文字，或者多加一個 API_Gateway 物件進去。你會愛上這種「心想事成」的即時反饋感。

聰明人的工作方式：如何讓 AI 成為你的 D2 製圖助理？🔑

熟悉 D2 之後，面對更複雜的需求，你甚至可以把 AI 當成你的專屬製圖助理。只要你給的指令夠清楚，AI 就能幫你寫好 D2 程式碼。

向 ChatGPT 下咒語的黃金公式：
「扮演角色」+「指定語言」+「窮舉物件」+「描述關係」+「定義結構」

實戰範例：給 ChatGPT 的黃金 Prompt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

你現在是一位專業的系統架構師。
請使用 D2 語言，產生一段程式碼，來描繪一個簡單的網站應用架構。

圖表物件包含：
 * 使用者 (User)
 * 負載均衡器 (Load Balancer)
 * 網站伺服器A (Web Server A)
 * 網站伺服器B (Web Server B)
 * 資料庫 (Database)

流程與關係：
 * 使用者發送 HTTPS 請求到負載均衡器。
 * 負載均衡器將流量轉發到網站伺服器A或B。
 * 網站伺服器A和B 都會讀寫資料庫。

結構與分組:
 * 請將網站伺服器A、B和資料庫，全部放在一個名為「後端系統 (Backend)」的容器裡。

把這段話丟給 ChatGPT 或任何你慣用的 AI，它就會給你一份高品質的 D2 程式碼。你只需要複製、貼上、微調。完美！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

direction: right

user: "User" {
  shape: circle
}

lb: "Load Balancer"

Backend: "後端系統 (Backend)" {
  webA: "Web Server A"
  webB: "Web Server B"

  db: "Database" {
    shape: cylinder
  }

  # 伺服器讀寫資料庫
  webA <-> db: "Read / Write"
  webB <-> db: "Read / Write"
}

# 流程與關係
user -> lb: "HTTPS"
lb -> webA: "Forward"
lb -> webB: "Forward"

結論：D2 不只是一個工具，更是一種新思維

從今天起，「畫圖」這件事，在你眼中應該不一樣了。它不再是那個耗時、繁瑣、充滿重複勞動的苦差事。

【圖表即程式碼】代表了一種更高效、更精準、更易於版本控制的工作方式。而 D2，憑藉它強大的排版能力與靈活的語法，正在重新定義「專業圖表」的製作標準。

你已經拿到了進入新世界的鑰匙。現在，就去打開那扇門吧。無論是寫技術文件、規劃系統設計，還是和同事進行一場邏輯清晰的架構討論，讓 D2 成為你最強大的視覺化武器。它會為你省下無數寶貴的時間，讓你專注在真正重要的思考與創造上。