跳至主要内容

純文字繪圖工具 D2

· 閱讀時間約 2 分鐘
Ckai

聲明式圖表繪製​

D2 名稱取自 Declarative Diagramming，是一種圖表腳本語言，可將文字轉換為圖形。

D2 官方連結

D2 Docs
D2 Playground

安裝 D2​

macOS 可使用 Homebrew 安裝

 $ brew install d2

D2 指令​

監看編輯成果
$ d2 -l elk --watch route/fileName.d2
輸出 svg
$ d2 route/fileName.d2 out.svg

D2 範例代碼及輸出結果​

D2 範例代碼
title: Flowchart {
    shape: text
    near: top-center
    style: {
      font-size: 55
      # 粗體、斜體似乎只能擇一
      bold: true
      italic: true
    }
  }

# 以鍵值對宣告色塊
start: 行經行人穿越道
# 利用色碼設定 style.fill 屬性
start.style.fill: "#ACE1AF"

# 宣告色塊時，若鍵值相同可使用縮寫語法。
行人要過馬路嗎
# 利用顏色名稱設定 style.fill 屬性
行人要過馬路嗎.style.fill: yellow
# 利用形狀名稱設定 shape 屬性
行人要過馬路嗎.shape: diamond

hasPedestrian: 等待行人通過
noPedestrian: 駛過行人穿越道
# 色塊間可加入連接符號（ ->  <-  <-> -- ）
start -> 行人要過馬路嗎
# 利用冒號與字串在連接符號中插入文字
行人要過馬路嗎 -> hasPedestrian: YES
行人要過馬路嗎 -> noPedestrian: NO

# 索引值及 style.sttoke 屬性可設定連接符號顏色
(行人要過馬路嗎 -> hasPedestrian)[0].style.stroke: red
(行人要過馬路嗎 -> noPedestrian)[0].style.stroke: green

上述範例輸出結果

延伸學習​

備註

D2 教學影片
其他繪圖工具教學影片