近年、テキストでコードを書くだけで綺麗な図（構成図やフローチャートなど）を自動生成してくれる「Text-to-Diagram」ツールが開発者の間で必須の存在となっています。
その代表格といえばPlantUMLやMermaidですが、今、それらの弱点を克服した次世代ツール「D2（Declarative Diagramming）」が、情報感度の高いエンジニアの間で「これこそ決定版では？」と大きな注目を集めているのをご存知でしょうか？
本連載では、数回にわけてD2の魅力や実践的な使い方を解説していきます。今回は、PlantUMLやMermaidとの違い、インストール方法、探り探りでもすぐに書ける簡単な図の描き方までを分かりやすくご紹介します！
D2とは？PlantUML、Mermaidとの違いを徹底比較！
D2は、Terrastruct社によって開発されたオープンソースの宣言的図解言語（Declarative Diagramming）です。
「テキストから図を作る」という目的は同じですが、先行するツールと何が違うのでしょうか？3つのツールの特徴を分かりやすく表にまとめました。
3大Text-to-Diagramツールの比較
| 特徴・機能 | D2 (ディーツー) | Mermaid (マーメイド) | PlantUML (プラントユーエムエル) |
| 構文の分かりやすさ | 非常にシンプル・直感的 | シンプル | やや独特・複雑 |
| デフォルトのデザイン | モダンで美しい | すっきりしているがシンプル | ややクラシック（レトロ） |
| レイアウトの自由度 | 自動配置＋細かい調整が可能 | 自動配置（微調整が難しい） | 配置の制御にコツが必要 |
| 主な用途 | ソフトウェア構成図、フローなど万能 | マークダウン内での簡易図解 | シーケンス図、クラス図など詳細設計 |
| アイコン・画像埋め込み | 標準で強力に対応 | 限定的 | 対応しているが設定が煩雑 |
既存ツールの不満を解消するD2のメリット
- デザインが最初からモダンで綺麗
PlantUMLで綺麗な図を作るにはスタイル定義（スキン）を細かく書く必要がありましたが、D2はデフォルトの状態でそのままドキュメントに使える美しさを持っています。 - ネスト（階層構造）の表現が圧倒的にラク
コンテナの中にサーバーを入れる、といった「枠の中に枠を入れる」記述が、波括弧{}を使うだけで直感的に書けます。MermaidやPlantUMLで階層構造が複雑になったときの可読性の悪さに悩まされていた人には、これだけで乗り換える価値があります。 - 自動レイアウトが賢い
独自のレイアウトエンジンを採用しており、要素が増えたときに線が交差しまくって見づらくなる現象（Mermaidでよく起こる「図の崩れ」）が起きにくいのが特徴です。
D2のインストール方法
D2は主要なOS（macOS, Linux, Windows）に対応しており、コマンド一発で簡単にインストールできます。ご自身の環境に合わせて実行してみてください。
macOS / Linux の場合
Homebrewを使用するのが最も簡単です。
brew install d2または、公式のインストールスクリプトも利用できます。
curl -fsSL https://d2lang.com/install.sh | shWindows の場合
Windows環境の場合、公式サイトに記載されているインストールスクリプト（DownloadStringやcurlを使う方法）を実行すると、サーバー側から 「(403) 使用不可能（Access Denied）」のエラーを返されて失敗するケースが多発しています。 そのため、Windowsユーザーはエラーを回避できるMicrosoft標準のパッケージマネージャー **`winget` を使ったインストールが最も確実でおすすめ**です。 PowerShellを開き、以下のコマンドを実行します。
winget install Terrastruct.D2
インストールの確認
インストール完了後、ターミナル（またはPowerShell）で以下のコマンドを実行し、バージョンが表示されれば準備完了です！
d2 --version
D2で簡単な図を描いてみよう！
それでは、実際にD2を使って図を出力してみましょう。お好みのテキストエディタを開いてください。
基本のフロー（ノードと矢印）
まずは、テキストファイルを作成し、名前を hello.d2 として保存します。中身には以下のコードを記述してください。
# 登場人物（ノード）と関係性を定義
ユーザー -> Webサーバー: リクエスト送信
Webサーバー -> データベース: クエリ実行
データベース -> Webサーバー: データを返却
Webサーバー -> ユーザー: レスポンス返却これをブラウザでプレビューしながら編集するために、ターミナルで以下のコマンドを実行します。
d2 --watch hello.d2コマンドを実行すると、自動的にWebブラウザが立ち上がり、ローカルホスト（http://localhost:XXXX）で以下のようなモダンな図がリアルタイムで描画されます！
この --watch モードの凄いところは、エディタ側でテキストを書き換えて保存すると、ブラウザ側の図もリアルタイムに自動更新（リロード）される点です。サクサク描けて開発効率がグッと上がります。
D2の真骨頂！「ネスト（階層構造）」を表現する
次に、D2が最も得意とする、システム構成図などでよく使う「グループ化（ネスト）」を試してみましょう。先ほどの hello.d2 を以下のように書き換えて保存してみてください。
# クラウド環境の表現
AWS Cloud: {
# グループの中のノードを定義
VPC: {
Webサーバー -> DBサーバー: 接続
}
}
ユーザー -> AWS Cloud.VPC.Webサーバー: アクセス
波括弧{}で囲むだけで、簡単に枠の中にサーバーを配置できました。ドット.（例: AWS Cloud.VPC.Webサーバー）で繋ぐことで、外部から内部の特定のノードへピンポイントで線を引くことも可能です。PlantUMLやMermaidに比べて、圧倒的にコードの可読性が高いのが分かります。
まとめ：次回予告
今回はText-to-Diagramの期待の新星「D2」の概要と、PlantUML/Mermaidとの比較、インストール方法から基本の描き方までを解説しました。
現時点ではGitHubやNotionなどの標準ネイティブ対応がないといった発展途上の面もありますが、記述のシンプルさと自動レイアウトの賢さは一歩抜きん出ています。
次回は、D2をさらに実践的に使いこなすために、テーマ（色合い）の変更方法や、アイコン・画像の埋め込み方法、解像度を高めるカスタマイズ方法について解説します！ お楽しみに！
コメント