d2-diagrams

D2 図表

D2 を使用して宣言的なテキスト定義から図表を生成するエキスパートです。D2 はモダンな図表スクリプト言語です。

このスキルを使用する場面

次の場合はこのスキルを使用してください…	次の場合は代わりに Mermaid を使用してください…
クラスやテーマを使った豊かなスタイル設定	GitHub Markdown に図表を埋め込む
複雑な入れ子のコンテナレイアウト	スタイル設定が最小限のシンプルなフローチャート
アイコンを使ったアーキテクチャ図	ドキュメントプラットフォームでネイティブにレンダリングされる図表
色付きのエッジを使った決定木	シーケンス図（Mermaid の方が構文が豊富です）
SQL テーブル／ERD 図	幅広いツール対応を優先する

機能の詳細な比較については、REFERENCE.md を参照してください。

主な専門知識

• 宣言的な構文：図表の内容を記述すれば、D2 がレイアウトを処理します
• 複数のレイアウトエンジン：dagre（デフォルト）、elk、tala（プレミアム）
• 豊富なテーマ：ダークモードに対応した100以上の組み込みテーマ
• 複数の出力形式：SVG、PNG、PDF、GIF（アニメーション）
• 監視モード：ファイルの変更時に自動で再生成します

インストール

# mise (preferred)
mise install d2 && mise use -g d2

# macOS
brew install d2

# Linux/Windows (via curl)
curl -fsSL https://d2lang.com/install.sh | sh -s --

# Go install
go install oss.terrastruct.com/d2@latest

基本的なコマンド

基本的なレンダリング

# Convert to SVG (default)
d2 diagram.d2 diagram.svg

# Convert to PNG
d2 diagram.d2 diagram.png

# Convert to PDF
d2 diagram.d2 diagram.pdf

# Output to stdout
d2 diagram.d2 -

PNG の前提条件：最初の PNG レンダリング時に、同梱の Chromium（約140 MB）がダウンロードされます。初回の実行には約1分かかりますが、以降のレンダリングは高速です。

監視モード

# Watch and auto-regenerate
d2 --watch diagram.d2 diagram.svg

# Watch with browser preview
d2 --watch --browser diagram.d2

テーマ設定

# List available themes
d2 themes

# Use specific theme (by ID)
d2 -t 101 diagram.d2 output.svg

# Dark theme (respects system preference)
d2 --dark-theme 200 diagram.d2 output.svg

# Combine light and dark themes
d2 -t 1 --dark-theme 200 diagram.d2 output.svg

レイアウトエンジン

# List available layouts
d2 layout

# Use specific layout
d2 -l elk diagram.d2 output.svg
d2 -l dagre diagram.d2 output.svg

スケッチモード

# Hand-drawn style
d2 --sketch diagram.d2 output.svg

D2 構文

基本的な図形と接続

# Shapes (auto-created)
server
database
client

# Connections
client -> server: request
server -> database: query
database -> server: result
server -> client: response

# Bidirectional
a <-> b

# Undirected
a -- b

図形の種類

# Explicit shapes
rect: {shape: rectangle}
oval: {shape: oval}
cyl: {shape: cylinder}
queue: {shape: queue}
pkg: {shape: package}
step: {shape: step}
page: {shape: page}
doc: {shape: document}
cloud: {shape: cloud}
diamond: {shape: diamond}
hex: {shape: hexagon}
para: {shape: parallelogram}
circle: {shape: circle}

コンテナ（ネスト）

server: {
  app: Application
  db: Database
  app -> db
}

client -> server.app

ラベルとアイコン

# Labels
a: "My Label"
a -> b: "connection label"

# Icons (from icon packs)
server: {
  icon: https://icons.terrastruct.com/essentials/004-server.svg
}

# Tooltip
node: {
  tooltip: Additional information shown on hover
}

# Links
github: {
  link: https://github.com
}

スタイル設定

# Inline styles
styled: {
  style: {
    fill: "#ff6b6b"
    stroke: "#c92a2a"
    stroke-width: 2
    border-radius: 8
    shadow: true
    opacity: 0.9
    font-color: white
  }
}

# Connection styles
a -> b: {
  style: {
    stroke: red
    stroke-width: 3
    stroke-dash: 5
    animated: true
  }
}

グロブパターン

# Style all shapes
*: {
  style.fill: lightblue
}

# Style all connections
* -> *: {
  style.stroke: gray
}

クラス（再利用可能なスタイル）

名前付きのスタイルセットを定義し、複数のノード／エッジに適用します。

classes: {
  error: {
    style: {
      fill: "#ffebee"
      stroke: "#c62828"
      font-color: "#c62828"
      border-radius: 8
    }
  }
  success: {
    style: {
      fill: "#e8f5e9"
      stroke: "#2e7d32"
      font-color: "#2e7d32"
      border-radius: 8
    }
  }
  decision: {
    shape: diamond
    style: {
      fill: "#fff3e0"
      stroke: "#e65100"
      font-color: "#e65100"
    }
  }
}

# Apply a class
start: Start {class: success}
check: Valid? {class: decision}
fail: Error {class: error}

start -> check
check -> fail: No

変数

vars: {
  primary-color: "#4a90d9"
}

box: {
  style.fill: ${primary-color}
}

ファイル内の設定

vars: {
  d2-config: {
    layout: elk
    theme: 4
    dark-theme: 200
    pad: 20
    sketch: true
  }
}

# Diagram content
a -> b -> c

よく使われる図表パターン

システムアーキテクチャ

direction: right

client: Client {
  icon: https://icons.terrastruct.com/essentials/user.svg
}

lb: Load Balancer {
  icon: https://icons.terrastruct.com/aws/Networking%20&%20Content%20Delivery/Elastic%20Load%20Balancing.svg
}

services: Services {
  api: API Server
  auth: Auth Service
  api -> auth: validate
}

data: Data Layer {
  db: PostgreSQL {
    shape: cylinder
  }
  cache: Redis {
    shape: cylinder
  }
}

client -> lb -> services.api
services.api -> data.db
services.api -> data.cache

シーケンス風のフロー

direction: right

user: User
frontend: Frontend
api: API
db: Database

user -> frontend: 1. Click button
frontend -> api: 2. POST /action
api -> db: 3. INSERT
db -> api: 4. OK
api -> frontend: 5. 200 OK
frontend -> user: 6. Show success

決定木／フローチャート

クラスを使って一貫したスタイルを適用し、判断にはひし形を、Yes／No の経路には色付きのエッジを使用します。

classes: {
  decision: {
    shape: diamond
    style: {
      fill: "#fff3e0"
      stroke: "#e65100"
      font-color: "#e65100"
    }
  }
  action: {
    shape: rectangle
    style: {
      fill: "#e3f2fd"
      stroke: "#1565c0"
      font-color: "#1565c0"
      border-radius: 8
    }
  }
  terminal: {
    shape: oval
    style: {
      fill: "#e8f5e9"
      stroke: "#2e7d32"
      font-color: "#2e7d32"
    }
  }
  warn: {
    shape: hexagon
    style: {
      fill: "#ffebee"
      stroke: "#c62828"
      font-color: "#c62828"
    }
  }
}

start: Start {class: terminal}
staged: Staged changes? {class: decision}
lint: Run linter {class: action}
pass: Lint pass? {class: decision}
commit: Create commit {class: action}
done: Done {class: terminal}
fix: Fix issues {class: warn}

start -> staged
staged -> lint: Yes {style.stroke: green}
staged -> done: No {style.stroke: red}
lint -> pass
pass -> commit: Yes {style.stroke: green}
pass -> fix: No {style.stroke: red}
fix -> lint
commit -> done

その他のパターン（データベース ERD、Kubernetes デプロイメント）、特殊な図形（sql_table、class、コードブロック）、レイヤー、テーマカテゴリ、D2 と Mermaid の完全な比較については、REFERENCE.md を参照してください。

エージェント向けの最適化

用途	コマンド
SVG をすばやく生成	d2 diagram.d2 diagram.svg
ライブプレビュー	d2 --watch --browser diagram.d2
ダークテーマ	d2 --dark-theme 200 diagram.d2 output.svg
スケッチスタイル	d2 --sketch diagram.d2 output.svg
ELK レイアウト	d2 -l elk diagram.d2 output.svg
テーマ一覧	d2 themes
PNG にエクスポート	d2 --scale 2 diagram.d2 output.png

クイックリファレンス

フラグ	説明
-w, --watch	変更を監視して再生成します
--browser	ブラウザーのプレビューを開きます（--watch と併用）
-t, --theme	テーマ ID（一覧は d2 themes を実行）
--dark-theme	ダークモードのテーマ ID
-l, --layout	レイアウトエンジン：dagre、elk、tala
--sketch	手描き風のスタイル
--scale	出力の拡大率（例：解像度を2倍にする場合は 2）
--pad	図表の余白（ピクセル単位）
--center	図表を中央に配置します
--animate-interval	アニメーションのフレーム間隔（ms）
-h, --help	ヘルプを表示します