【第2回】D2を実務で使いこなす！テーマ変更・アイコン埋め込み・VS Code環境構築まで徹底解説

テキストから美しい図を生成する次世代ツール「D2」。前回の第1回では、概要やPlantUML/Mermaidとの比較、インストールから基本の図解までをご紹介しました。

初期状態でも十分に綺麗な図が描けるD2ですが、実務のドキュメントやプレゼン資料で使うなら、プロジェクトに合わせた色合い（テーマ）に変更したり、AWSやDockerなどのアイコンを表示させたりしたいですよね。

連載第2回となる今回は、D2の見た目を劇的に変える「テーマ機能」、図の説得力を高める「アイコン・画像の埋め込み」、そしてエディタ上で爆速開発を可能にする「VS Codeの環境構築」について詳しく解説します！

D2のテーマ（色合い）を切り替えてみよう

D2には、最初からスタイリッシュなカラーパレット（テーマ）が多数用意されています。コードを1行も書き換えることなく、コマンドのオプション一つで全体の見た目をガラッと変えることができます。

例えば、標準のテーマ（ID: 0）から、ダークモードや別の配色に切り替えたい場合は、--theme オプション（または -t）を使用します。

# テーマID「3（ダーク系のモノトーン）」でプレビュー
d2 --theme 3 hello.d2

# 別のテーマ「100（グラファイト）」でプレビュー
d2 --theme 100 hello.d2

システム構成図を描くとき、ただの四角い箱に「AWS」や「Docker」と書くよりも、公式のロゴマークが表示されていた方が圧倒的に直感的で分かりやすいですよね。 D2は、外部の画像（PNG, JPEG, SVG）をノードのアイコンとして簡単に埋め込むことができます。

構文は非常にシンプルで、ノードの属性として icon を指定するだけです。

# ローカルにあるロゴ（myserver.svg）を指定！
オリジナルサーバー: {
  icon: ./myserver.svg
}

ユーザー -> オリジナルサーバー: リクエスト送信

PlantUMLのように複雑なスプライト定義をする必要がなく、画像のパスをポンと書くだけで自動でリサイズして配置してくれる手軽さは、D2ならではの大きなメリットです。

第1回ではターミナルから d2 --watch コマンドを使ってブラウザでプレビューしましたが、普段使っているVS Code（Visual Studio Code）の中でコーディングからプレビューまで完結させると、開発効率が何倍にも跳ね上がります。

必須級の拡張機能を導入して、快適なD2開発環境を整えましょう。

VS Codeの拡張機能マーケットプレイスを開き、「D2」（開発元: Terrastruct）を検索してインストールします。

これにより、以下の機能が有効になります。

拡張機能を導入すると、D2ファイル（.d2）を開いているときに、「Ctrl＋Shift＋D」を入力すると表示されるようになります。

これをクリックすると、VS Codeのエディタが左右に分割され、右側にリアルタイムで図が表示されます。

これで、ファイルを書き換えて保存（Ctrl+S / Cmd+S）するたびに右側の図がシュッと更新される、最高の開発環境が整いました。

今回はD2をさらに実践的に使うための「テーマの切り替え」「アイコンの埋め込み」、そして「VS Codeでの快適なプレビュー環境」について解説しました。

ここまで出来れば、実務のドキュメントやシステムの簡易構成図をテキストベースでガシガシ量産できるようになっているはずです。

次回（第3回）は、さらに一歩踏み込んで、D2ならではの「アニメーション（複数レイヤー）機能」や、Markdownへの埋め込み方法、CI/CDで図を自動エクスポートする運用方法について解説します！ぜひお楽しみに！