D2: ダイアグラムスクリプト言語

2025年10月26日原文(d2lang.com)

概要

D2 はテキストからダイアグラムを生成する 宣言型スクリプト言語 CLIを使って 簡単に画像化 ファイル作成からコマンド実行まで の流れ ウォッチモード や チートシート の活用 Playground でスニペットを直接編集可能

D2とは何か

D2 は Declarative Diagramming の略称
テキストで 図を宣言的に記述、自動でダイアグラム画像を生成
「何を描きたいか」を 記述するだけ でOK

基本的な使い方

CLI（コマンドラインインターフェース） をダウンロード
任意の名前（例： input.d2）で ファイルを作成

ダイアグラム記述例を コピーペースト

例:

NETWORKUSERAPI SERVERLOGSCELL TOWERONLINE PORTALDATA PROCESSORSATELLITESTRANSMITTERUISTORAGE
SENDSENDSENDPHONE LOGSMAKE CALL ACCESSDISPLAYPERSIST

コマンドを実行して 画像を生成
ウォッチモード でリアルタイムプレビューが可能

学習サポート

5-10分 のツアーで基本機能を体験
2分で完了するGetting Startedガイド
チートシート をダウンロードして参照

Playgroundの活用

各D2スニペットに マウスオーバー でPlaygroundを開くリンク
Playgroundで 直接編集・確認 が可能
- 一部例外（importを使うスニペットなど）

まとめ

D2 は宣言的な記述のみで 即座にダイアグラム生成
CLIとPlayground で初心者にも扱いやすい設計
学習コストが低く、短時間で基本操作をマスター可能

Hackerたちの意見

D2は結構前からあって（ここにも前に投稿されたことあるけど）、それでも意外と知られてないよね。マーメイドより全然いいから、この投稿でみんなに知ってもらいたいな！

└

D2の方がマーメイドより好きだけど、マーメイドは色んなところでネイティブにサポートされてるから、実用的な選択肢になってるよね。

└

D2については知らなかったな。mermaidより優れた機能があれば教えてくれない？

D2に関する最近の投稿（73コメント）： [1] D2（テキストから図を作るツール）がASCIIレンダリングをサポートしたよ！ https://news.ycombinator.com/item?id=44954524

D2やペンローズみたいなものを見て、Pythonでラップしてデータに基づいた図を作るのをもうちょっと楽にしようと考えてるんだ。問題を解決していくうちに、Haskellみたいなものでやった方が良さそうだなって思うけど、これらのツールで図を描くのが簡単になればなるほど、プログラム的な図作成を使ってデバッグや説明を手助けする人が増えると思う。D2やdot、マーメイドみたいな宣言型ツールの最大の問題は、「宣言してから調整する」ワークフローをあまり提供してないことだよね。もちろんSVGを生成してからInkscapeで調整することはできるけど、時にはレイアウト後にちょっとだけ動かしたいだけの時もあるんだよね。ペンローズはそれを簡単にしてくれるけど、代わりに…他の部分が変わっててランダムになるって感じかな。

└

D2は独自のレイアウトエンジンでカスタムレイアウトの調整を許可してるよ。残念ながら、オープンソースのものではできないけどね。 https://docs.d2studio.ai/tour/freehand

スケッチモードも入ってるよ！ https://d2lang.com/tour/sketch/ ツールチップやリンクもあるしね： https://d2lang.com/tour/interactive/ この2つは私にとって大きな違いをもたらしてる。

D2の共同著者だよ。最近、アニメーション機能を拡張するアイデアを考えてるんだ。ここでちょっと考えをつぶやいてみるけど、もし意見があったら聞かせてほしいな： https://github.com/terrastruct/d2/discussions/2677

└

あのアニメーションの目的って何なの？プレゼンで図をクリックしながら追加していって、その接続がアニメーションで強調されるならいいけど、リンク先の例みたいにテキストが変わるたびに図全体が飛び跳ねるのはちょっとイライラしそう。だから、すべてをレンダリングして、アクティベートされるまで隠しておく必要があるのかな？それと、ちゃんとしたスイムレーン図が欲しいな。フローチャートでネストできる能力はあるから、スイムレーンのボックスを強制的に整列させたり、レーン自体を整列させたりするだけでいいと思う（多分、裏でやることはもっとあるだろうけど）。

└

レベル4 - ドラマティックモード ;) https://blog.viraptor.info/dramatic-svg/index.html

└

最初の「クールなスロップ」の例にはちょっと驚いた。もっと具体的な（アニメーションを使った）データフローの可視化の方が役立つと思ってたんだけど。動的じゃないから（ライブデータとかに基づいてないから）、余計なものになっちゃうのかな？

└

こんにちは、アリクサンダー！D2を使い始めたのは数ヶ月前で、仕事で初めてシステムを設計することになったんだ。すごく満足してるよ。簡単に使えるのに驚いた。正直、こういう派手なアニメーションは必要ないと思う。図の中で特定のボックスや矢印に注目させたいなら、動かすより赤くする方がいいな。

Hacker Newsで議論の続きを見る

ハクソク