你是不是也遇過這種崩潰瞬間？為了畫一張架構圖、一張產品流程圖，你在 Visio 或 draw.io 的世界裡，無助地拖拽著一個個方塊，像在玩史上最無聊的拼圖。拉了老半天，線條永遠對不齊，顏色換來換去，好像都一樣醜。 最可怕的是，當需求方說：「嗯…我們把這個模組的功能改一下。」這意味著，你剛剛花掉的半個下午，直接歸零。改一個字，全圖重來。這不是惡夢，這是許多工程師與產品經理的日常。 但如果，我告訴你一個秘密呢？想像一下，你像寫筆記一樣，隨意敲下幾行字。下一秒，一張精美、專業、邏輯清晰的架構圖就自動生成了。 這不是黑魔法，這是《圖表即程式碼 (Diagrams as Code)》的驚人魔力。而 D2, 正是這個新世界裡，一顆最亮眼的超新星。🚀 這篇文章，就是你的第一張單程票，我會帶你從零開始，無痛掌握這項足以改變你工作流程的神器。 D2 到底是何方神聖？為何你該現在就認識它？D2，全名是【Declarative Diagramming】。我知道，聽到「宣告式」三個字，很多人的表情大概是 (´・ω・`)，別怕，我們來說人話。 所謂【宣告式】，就像你在點餐你只需要告訴服務生：「我要一份牛排、一份沙拉、一杯紅茶。」你「宣告」了你最終想要的「結果」。你完全不需要教廚師怎麼切肉、怎麼燒水、怎麼擺盤。廚師（也就是 D2 的排版引擎）會用最專業的方式，把完美的成品送到你面前。 過去我們用軟體拉圖，更像是【指令式】。你得一步步「指揮」電腦：「方塊往左移 10 像素、對齊上方、箭頭拉到這個點…」累死人的，就是這些瑣碎的「過程」。 關鍵心法： D2 讓你專注在「WHAT」(圖裡有什麼、誰跟誰有關)，D2 的智慧引擎則完美搞定「HOW」(怎麼畫才專業又好看)。 D2 與 Mermaid 的關鍵差異是什麼？問得好！這絕對是新手的核心問題。直接看這張對比，你就秒懂了： 特性 D2 (強項) Mermaid 排版引擎 更強大智慧，適合複雜架構圖 簡單快速，整合性高 客製化 選項豐富，可精調細節 相對基本 語法 靈活，功能強大 極簡，上手快 使用場景 專業軟體架構圖、系統設計圖 筆記、文件中的簡易流程圖 我的比喻是： 如果 Mermaid 是你隨手記重點的【便利貼】，那 D2 就是一張能直接拿去施工的【專業工程藍圖】。兩者都很好，但如果你需要繪製更嚴謹、更複雜的系統架構，D2 絕對是你的首選。 D2 實戰教學：從零到一打造你的第一張架構圖 🚀百聞不如一見，我們現在就來做第一張圖。你不需要安裝任何東西，只需要你的瀏覽器。 第一步：打開 D2 線上遊樂場 (Playground)請點擊這個連結：https://play.d2lang.com/ 你會看到一個很酷的介面。左邊是文字編輯區，右邊是即時預覽區。左邊下指令，右邊看結果，就是這麼簡單。我們的第一個目標：畫一張最基礎的「客戶端-伺服器-資料庫」架構圖。 第二步：定義所有物件 (Nodes)在 D2 的世界裡，圖上的每個方塊、圓圈，都叫一個「物件」。我們就把需要的物件，一個個唱名出來就好。在左邊編輯區，打上這三行： 123ClientServerDatabase 神奇吧？右邊是不是瞬間冒出了三個方塊？你已經成功一半了！ 第三步：建立流向 (Connections)光有點名還不夠，我們要告訴 D2 誰跟誰是一對的。我們用一個很直觀的符號 -> 來表示箭頭方向。接著這樣寫： 1234# 井字號開頭的文字是註解，D2 會忽略它，是寫給人看的筆記# 我們來描述一下流程：Client 連到 Server，Server 再連到 DatabaseClient -> Server -> Database 哇！你看右邊！D2 自動幫你拉好了箭頭，還聰明地幫你排好了版。一張最基礎的流程圖，完成了。 第四步：為關係加上說明 (Labels)只有箭頭，別人可能看不懂。我們來加點說明文字，告訴大家這箭頭代表什麼意思。語法很簡單，在箭頭後面加上冒號 : 和用引號包起來的文字。 12Client -> Server: "發送 HTTPS 請求"Server -> Database: "讀寫資料" 是不是清楚多了？圖表的可讀性瞬間提升。 第五步：將物件分組 (Containers)在真實世界，Server 和 Database 通常會被放在一個叫「後端」的系統裡。D2 當然也想得到！我們可以用大括號 {} 建立一個「容器」，把相關的東西打包在一起。 1234Backend: { Server Database} 這個動作不只讓圖表結構更清晰，也讓後續的程式碼管理更方便。 整合演練：最終的 D2 程式碼成品 🌟好了，暖身完畢。現在，讓我們把剛剛學會的所有招式組合起來。請清空左邊的程式碼，然後把下面這段完整的程式碼貼進去： 12345678910111213141516171819202122# 最終的 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 的黃金 Prompt1234567891011121314151617你現在是一位專業的系統架構師。請使用 D2 語言，產生一段程式碼，來描繪一個簡單的網站應用架構。圖表物件包含： * 使用者 (User) * 負載均衡器 (Load Balancer) * 網站伺服器A (Web Server A) * 網站伺服器B (Web Server B) * 資料庫 (Database)流程與關係： * 使用者發送 HTTPS 請求到負載均衡器。 * 負載均衡器將流量轉發到網站伺服器A或B。 * 網站伺服器A和B 都會讀寫資料庫。結構與分組: * 請將網站伺服器A、B和資料庫，全部放在一個名為「後端系統 (Backend)」的容器裡。 把這段話丟給 ChatGPT 或任何你慣用的 AI，它就會給你一份高品質的 D2 程式碼。你只需要複製、貼上、微調。完美！ 12345678910111213141516171819202122232425direction: rightuser: "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 成為你最強大的視覺化武器。它會為你省下無數寶貴的時間，讓你專注在真正重要的思考與創造上。