• Home
• コーポレートブログ
• テキストでダイアグラム･チャートを書く D2を試してみる

本日のブログ担当は石川です。 4月とはいえまだまだ朝と夜は肌寒いですね。気温の高低差が激しいため服装を決めるのも難しく、最近は毎日「OK Google, 今日の気温は？」と聞いています。

さて、今回はテキストでダイアグラムやチャートを書くことができるスクリプト言語、D2について書きます。私は普段自分用の情報整理や更新が必要なシンプルな図にはMermaidをつかっていて、人に見せることを考えたときや情報量が多いときはdraw.ioを使うことが多いです。D2というツールが良いよという話を聞いたので試してみます！

D2とは?

D2とは、テキストを図に変換する言語の一つで、オープンソースソフトウェアです。ライセンスはMPL-2.0。公開されたのは2022年と新しめで、現在も開発がアクティブに続いています。主にCLIをダウンロードして利用したり、Playgraund として用意されているWebアプリケーションで利用することができます。
https://d2lang.com/

D2の設計

https://d2lang.com/tour/design/ というページには設計思想のようなものが書かれていて、次の3点が紹介されています。

1. Readability > prototyping speed
   読みやすさとプロトタイピングの速度がトレードオフなら読みやすさを重視する。多少コンパクトで無くても読みやすくする。
2. Warnings > errors
   無視できるエラーならそのままコンパイルし、警告を出す程度にする。
3. Good defaults
   カスタマイズしない標準のD2でもGoodな図を生成する。（テキストを図に変換するツールにはテーマが使えることが多く、標準が良いデザインで無くてもテーマを使うことができますが、カスタマイズなしでも綺麗な図を生成できるように意識されているようです）

なんだか設計思想を見るだけでも好きになっちゃうような雰囲気がありますね。

対応している図の形式

シーケンス図やUMLクラス図、SQLテーブルをはじめとして様々な形式の図を描画することができます。

D2でできることのなかで特に嬉しいポイント

URLを記載することでアイコンや画像の埋め込みが可能

https://d2lang.com/tour/icons/ から引用

vpc: VPC 1 10.1.0.0./16 {
  icon: https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg
  style: {
    stroke: green
    font-color: green
    fill: white
  }
  az: Availability Zone A {
    style: {
      stroke: blue
      font-color: blue
      stroke-dash: 3
      fill: white
    }
    firewall: Firewall Subnet A {
      icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg
      style: {
        stroke: purple
        font-color: purple
        fill: "#e1d5e7"
      }
      ec2: EC2 Instance {
        icon: https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg
      }
    }
  }
}

ツールチップ

わたしは図にするときに情報を最低限に絞り込むのが苦手で、説明をたくさん含んだ大きな図を作ってしまいがちです。ツールチップを活用することでホバー時にのみ詳細を表示するシンプルな図を作れそうです。

しかもツールチップを表示できないPNG形式で出力したら補足として図の下部に書かれる形で変換されるのが最高です。

SVG版	PNG版

リンク埋め込みが可能

クリックすれば外部リンクに移動するリンクを埋め込むこともできます。

https://d2lang.com/tour/interactive/#links

redmine_jp: Redmine.JP {
  link: https://redmine.jp/
}
redmine_jp_blog: Redmine.JP Blog {
  link: https://blog.redmine.jp/
}

SVG版	PNG版

#でコメントを書ける

#でコメントを書けるのもRubyやPython、シェルスクリプトなどで使い慣れているので嬉しいです。

図のスタイル変更がしやすい。クラス指定によってスタイルの再利用も可能

図の中の要素のスタイルを変更することができ、複数の要素に適用するときにはCSSのようにクラスを利用して再利用することもできます。

https://d2lang.com/tour/classes/

classes: {
  Foo style: {
    width: 100
    height: 200
    style: {
      stroke-width: 0
      fill: "#44C7B1"
      shadow: true
      border-radius: 5
    }
  }
  Bar style: {
    style: {
      fill: "#FE7070"
      stroke: "#F69E03"
    }
  }
}

Foo1: Foo1
Bar1: Bar1
Foo2: Foo2
Baz: Baz
Foo1 -> Bar1

# クラスを使用
Foo1.class: Foo style
Foo2.class: Foo style
Bar1.class: Bar style

普段使っているMermaidと比較してみる

機能的な面での比較は、D2をPlantUMLやMermaidと比較するサイトがあり、そこにまとまっています。
https://text-to-diagram.com/

記法編

わたしがD2で図を書いた感想としては、トータルの行数で言えばD2の方が長いことが多いのですがその分私が普段使っているプログラミング言語のインデントや要素の書き方に近いこともあってD2の方が書きやすく感じました。

ブラウザ上での変換編

Mermaidの強みと言えば、JavaScriptでできていてブラウザ上で動かしやすいことですよね。HTML内に <pre class="mermaid">~</pre> 要素を置けばpreタグ内の構文をmermaid.jsによってブラウザ上で図に変換できます。実際にGitHubでもMarkdown内に書いたmermaid記法が図に変換されるなど、様々なアプリケーションで導入されやすくなっている気がします。

このブログを書いた時点では、D2をブラウザ上で利用するにはWebAssemblyを使うとされていますが https://github.com/terrastruct/d2-playground#whats-this-api を見る限りレイアウトエンジンをWASMで動かす手順は準備中に見えます。https://github.com/terrastruct/d2/pull/436 も3日前にコミットされていたりとアクティブに活動されている様子が見て取れるので、今後状況は変わると思います。また、CLIは用意されているので、APIをアプリケーション側で実行することによる変換は可能だと思います。(Playground等も恐らくその形)

感想

図を生成する前の構文がコンパクトすぎず読みやすい/書きやすいのが良いなと思いました。GitHubなどWebアプリケーションで標準で使える強みからMermaidを使わなくなるわけではありませんが、デザインも好みなので今後簡単な図を書くところから使ってみようと思います。

【スタッフ募集中】
弊社ではAWSを活用したソリューションの企画・設計・構築・運用や、Ruby on Rails・JavaScriptフレームワークなどを使用したアプリケーション開発を行うスタッフを募集しています。採用情報の詳細
弊社での勤務に関心をお持ちの方は、知り合いの弊社社員・関係者を通じてご連絡ください。

---