D2を試す
shimarisu_121D2とは
D2は比較的新興のダイアグラム作成ツール兼DSL。
Terrastruct社が開発元。開発言語はGoベース。GitHubスター数が2024年現在16kとそこそこ大きな盛り上がりで、企業ベースの為そこそこアクティブに開発が行われている。
クロスプラットフォームで利用可能になっている。この手ので有名なのはPlantUMLやMermaid、Pythonを使ったDiagramsなどがある。
端的に言うと、専用のDSLを作って以下のようなものが作れる。
- アーキテクチャ
- クラス図
- ER図
- シーケンスダイアグラム
ざっと見るには公式が宣伝用として作成したtext-to-diagramというデモサイトがあります。これで大凡どんなことが出来るか、他ツールとの比較が分かります。
なお、現状公式のPlaygroundがそうであるように、Wasm化することでアプリへの組み込みは可能になる（はず）なのだが、その辺りのドキュメントなどは出来ておらず、現状はバックエンドなり、自分のローカル環境なりで使用するのが主な想定ということでしょう。
個人的な印象としては
アーキテクチャ図がメジャーな幾つかのその手のツールよりそこそこ綺麗に描画される傾向にあり（見た目は好みもあると思いますが）、DSLは補完みたいな何かがないとはいえ、難解な構文ではない方だと思います。
レイアウトエンジンを複数選べるという作りなのだが、デフォルトよりelkの方が仕上がりはいい気がする。
私はお絵描きツールを使うのが苦手なので、D2はその辺りを表現したい場合には良いツールになりそう。
ということで適当になんか書いてみた
のが以下（図に特に深い意味はありません）。
スクリプト
vars: {
d2-config: {
layout-engine: elk
}
}
direction: right
users: Users {
shape: image
icon: https://icons.terrastruct.com/essentials%2F359-users.svg
}
loadblancing: {
shape: image
icon: https://icons.terrastruct.com/gcp/Products and services/Networking/Cloud Load Balancing.svg
}
service1: App {
cloudrun: cloudrun {
shape: image
icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FCompute%2FCloud%20Run.svg
}
appengine: {
shape: image
icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FCompute%2FApp%20Engine.svg
}
cloudrun -> appengine
}
users -> loadblancing -> service1.cloudrun
db: Database {
style.fill: "#fffff0"
cloudsql: {
shape: image
icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FDatabases%2FCloud%20SQL.svg
}
}
storage: Storage {
direction: up
storage: {
shape: image
icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FStorage%2FCloud%20Storage.svg
}
}
db.cloudsql -> storage.storage
service1.cloudrun -> db.cloudsql
loadblancing -> storage.storage
net: External Service {
shape: image
icon: https://icons.terrastruct.com/essentials%2F092-network.svg
}
external: External {
pubsub: {
shape: image
icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FData%20Analytics%2FCloud%20PubSub.svg
}
cloudrun: cloudrun {
shape: image
icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FCompute%2FCloud%20Run.svg
}
pubsub -> cloudrun
}
net -> external.pubsub
external.cloudrun -> db.cloudsql
使うには
基本公式の推奨の通りにすれば良いと思うが、普通にバイナリ落として試せば良いのだと思う。Windowsだとscoopのmainバケットでインストールできる。
使い方
.d2ファイルを作成し、以下のようにすればウォッチモードでブラウザが立ち上がりつつ、.svgファイルを吐く。
d2 ./test.d2 -w
コマンドの第2引数は指定すれば出力ファイル名になる。デフォルトはSVGで、PDFやGIFも可能。
ただし、PNGも対応するがNode環境導入済みでPlaywrightインストール済みである必要がある。面倒なのでPNGを作りたい時は他のツール（ImageMagickとか）を経由してSVGを変換しても良いだろうと思う。
VSCode
公式拡張機能がある。
LSPのようなものは現状存在しないが、シンタックスハイライトとVSCode上での図のプレビューができる。
shimarisu_121ざっとした最も基本的な文法について。
変数
varsが特殊キーワード。
vars: {
server-name: Cat
}
server1: ${server-name}-1
オブジェクト
a.b: ...
# or
a {
b: ...
}
みたいな感じで記述し、アクセスはa.bみたいな感じのドットで行える。
ノードつなぐ
main.hello
world: world!
main.hello -> world: there
shape
割と重要になってくると思われるのがshapeプロパティ。
例えば、以下のようにする。
shape: image
これによって、そのオブジェクトの形や示したい図のスタイルそのものが変化する。
設定する値は大まかには、特殊な図を示すものと、特殊なやつがある。
前者はdiamondなどがあり、例えばER図とかで矢印の形を変えたいなんて場合でも使う(source-arrowheadとtarget-arrowheadというキーワードがある）。
後者については例えば、以下のようなものがある
imagesequence_diagramclasssql_table
アイコン
以下のような感じでアイコンを設定する。D2 Iconsというアイコン集が提供されており、基本的にこれを使うのが良いんじゃないかと思われる。
github: {
shape: image
icon: https://icons.terrastruct.com/dev/github.svg
}
クラス図
プライベートフィールドには-を接頭辞でつけると-になってくれます。()をつけるか否かでフィールド・メソッドの切り分けをする感じそう。
例えば、以下のようなものができます（内容は適当）。
スクリプト
direction: right
Base: {
shape: class
name
hello(string name): string
-hello(string name): string
}
Child: {
shape: class
hello(string name): string
}
Base <- Child
…と、基礎的なところだけなのですが、大凡メモったところでクローズします。
使い方の一助になれば幸いです。