【第3回】D2の図をMarkdownに埋め込む方法と、差分を魅せる「アニメーション・レイヤー機能」を徹底解説！

テキストから美しい図を自動生成する次世代ツール「D2」。前回の第2回では、テーマの切り替えや手元のロゴ・画像の埋め込み、そしてVS Codeでのリアルタイムプレビュー環境の構築を解説しました。

自分好みの綺麗な図が描けるようになったら、次はその図を「実際の開発ドキュメントや仕様書（Markdown）に埋め込んで共有したい」ですよね。また、システムの「変更前・変更後の差分」や「処理のステップ」を分かりやすく伝えたい場面もあるはずです。

連載第3回となる今回は、D2で作成した図をMarkdownへスマートに埋め込む方法と、D2の真骨頂とも言える「アニメーション（複数レイヤー）機能」について詳しく解説します！

D2の図をMarkdown（マークダウン）に埋め込む方法
- 1. SVGやPNG画像としてエクスポートして埋め込む
- 2. VS Codeや各種プレビュー環境でのコード埋め込み
D2がPlantUMLやMermaidに対して圧倒的なアドバンテージを持っている機能の一つが、この「シナリオ（レイヤー）機能」です。
まとめ：連載全体の締めくくり

D2の図をMarkdown（マークダウン）に埋め込む方法

作成したD2の図をGitHubやNotion、社内のWikiなどのMarkdownドキュメントに掲載する場合、主に2つのアプローチがあります。

1. SVGやPNG画像としてエクスポートして埋め込む

最も確実で環境を選ばないのが、D2コマンドで画像ファイルとして出力し、それをMarkdownから読み込む方法です。

# テスト用のネットワーク構成図コード

# 外部ネットワーク
インターネット -> 社内ルーター: アクセス

# 社内ネットワークの階層構造（ネスト）
社内ルーター -> コアスイッチ

コアスイッチ: {
  
  # サブネット1（WEB層）
  WEBセグメント: {
    # ★ここを新しく作ったオシャレなSVGロゴに変更！
    icon: ./logo.svg
    公開サーバー1 -> DBサーバー: 内部通信
    公開サーバー2 -> DBサーバー: 内部通信
  }
  
  # サブネット2（開発層）
  開発セグメント: {
    開発PC1 -> 共有NAS
    開発PC2 -> 共有NAS
  }
  
  # セグメント間の接続
  WEBセグメント.DBサーバー -> 開発セグメント.共有NAS: バックアップ
}

D2ファイル（例: network.d2）をSVG形式で保存するには、以下のコマンドを実行します。オプションなしで実行するとデフォルトでSVGが出力されます。

d2 network.d2 network.svg

PNG形式で出力したい場合は、拡張子を .png に指定するだけです（※手元の環境によっては内部で自動ダウンロードが走る場合があります）。

d2 network.d2 network.png

出力された画像ファイルをMarkdownと同じフォルダに配置し、通常の画像埋め込み構文で記述します。

# システム構成図

現在のネットワーク構成は以下の通りです。

![ネットワーク構成図](./network.svg)

2. VS Codeや各種プレビュー環境でのコード埋め込み

VS Codeの拡張機能などを利用している場合、Markdown内に直接コードブロックとして記述してプレビューすることも可能です。

```d2
ユーザー -> サーバー: リクエスト
```

※現時点ではGitHubやNotionなどのWebサービス側での完全なネイティブ自動描画（Mermaidのような対応）は開発途上の部分もありますが、手元のドキュメント管理やビルド環境では画像エクスポート経由が最も安定した運用方法になります。

D2がPlantUMLやMermaidに対して圧倒的なアドバンテージを持っている機能の一つが、この「シナリオ（レイヤー）機能」です。

1つのD2ファイルの中に「ステップ1」「ステップ2」といった複数の時間軸や差分を定義することができ、システムの処理順序（シーケンス）を説明するときや、インフラ構成の「移行前・移行後」の差分を1つのファイルでスマートに見せたいときに強烈な威力を発揮します。

シナリオ機能の書き方

ファイル（例: steps.d2）を作成し、以下のように scenarios 構文を使ってみましょう。ベースとなる図を定義したあと、各シナリオで変更したいノードの色や、新しく追加したい接続（矢印）を記述します。

# ベースとなる初期状態の図
ユーザー -> フロントエンド: 1. アクセス

# アニメーション（シナリオ）の定義
scenarios: {
  ステップ2: {
    # フロントエンドの色を「いい感じのテック系の青」に変えて、次の接続を追加
    フロントエンド.style.fill: "#4FACFE"
    フロントエンド -> バックエンド: 2. APIリクエスト
  }
  ステップ3: {
    # バックエンドの色を「鮮やかな紫」に変え、さらに次の接続を追加
    バックエンド.style.fill: "#7F00FF"
    バックエンド -> データベース: 3. クエリ実行
  }
}

コマンド一発で「動くGIFアニメーション」に書き出す

このシナリオ機能をドキュメント上で最大限に活かす方法、それが「GIFアニメーション画像」としての書き出しです。

D2は、拡張子を .gif に指定してコマンドを実行するだけで、定義したステップが自動でパラパラと切り替わるアニメーション動画（画像）を自動生成してくれます。

GIFを出力する際は、コマ送りの間隔（ミリ秒）を指定する --animate-interval オプションをセットで付与するのがエラーを回避するポイントです。PowerShell（またはターミナル）で以下のコマンドを実行してみましょう。

# 1000ミリ秒（1秒）間隔でステップが自動切り替えされるGIFを出力
d2 --animate-interval=1000 steps.d2 animation.gif

コマンドを実行すると、フォルダ内に animation.gif が生成されます。これを開くだけで、特別なプレイヤーを使わなくても手元の環境でいつでもアニメーション図を確認することができます！

Markdownへの埋め込みもそのままOK！

こうして作成した animation.gif は、前述した通常の静的画像と全く同じ構文で、Markdownドキュメントにそのまま埋め込むことができます。

# 処理フローの解説

以下はシステムのデータ遷移を表したアニメーション図です。

![動くシーケンス図](./animation.gif)

これなら、NotionやGitHub、社内Wikiなどの静的なMarkdown環境であっても、ドキュメントを開いた瞬間に図が自動でサクサクと動き出します。「図を動かすための特殊なプラグイン」などを一切導入しなくても、読者に処理の流れを直感的に伝えられるため、ドキュメントの分かりやすさが劇的にアップします。