やりたいこと
いろいろ構成図をつくる際に、Excel だったり PowerPoint だったりを使うことが多いが、箱を配置して位置を調整してなど、正直めんどくさい。また、その構成図の変更管理も大変なのでコードで管理したい。
そこで、そういったツール類を調べてみたので、ここにまとめてみる。
作図ツール
ざっと調べた限りだと以下が広く使われているっぽい。
- Draw.io (Diagrams.net)
- PlantUML
- Mermaid
- Diagram as Code
Draw.io (Diagrams.net)
有名な作図ツール。ブラウザ上で作図でき操作も GUI で行え、シンプルで直感的なので、使いやすい。
作成した図は XML で定義されているので、コード管理もできる。
GitHub ではその XML の差分が図として表示される。いろんなアイコンセット (AWS, Azure, GCP など) も用意されているのも良い。Visual Studio Code にもプラグインが用意されているのも便利。
しかし、個人的には配置したオブジェクトの位置の調整だったり整形などがめんどくさい。適当に良い感じに自動で配置してくれるツールが無いかなーと思っていろいろと調べてみた。
参考
PlantUML
いろんな UML を作成できるツール。UML 以外の図もサポートされていてその1つにアーキテクチャ図がある。Draw.io とは異なり、コードを書くとコードから図を生成できる。GitHub 上で図を表示させるには、Chrome 拡張 (Pegmatite など) を使って、Markdown ファイルに記述する必要があるが、図に出力してリンク貼って、というようにしなくて済むのは良い。
しかし、あくまでも UML を作成するツールで、構成図向けではないので見栄えは微妙。アイコンセットも用意はされていないので AWS などでのアーキテクチャ図を作成するのには向かない。
あと、Java が必要なので環境構築が少し面倒かもしれない。
参考
Mermaid
※後述しますが、#Mermaid と見出しに使えないそうなので絵文字をつけてます
https://mermaid-js.github.io/mermaid/#/
Markdown 内で、フローチャートやシーケンス図、クラス図などを生成できる。Markdown のコードブロック内に書けばそれで作図できるのは便利。PlantUML と似ているが、拡張が不要だったり環境構築がいらなかったりというのは利点。Visual Studio Code にプラグインもある。
それ以外は PlantUML とほぼ同じ機能なので割愛。
参考
Diagram as Code
Python で構成図を作成できるツール (go 版もあり)。PlantUML や Mermaid と異なりアイコンセットが用意されているのが良い！ (元々、Azure 上の構成を図にしたかった) Python で書けるので文法をそのまま利用できるのも良い。
また、graphviz をラップしているようで、graphviz でできることは理論上なんでもできる (らしい)。
しかし、Web 上に情報が少ないので詳細な方法などを調べるのに時間がかかる (graphviz が分かる人はすんなり書けるんだろうか？)。
参考
ということで
作図ツールについて調べた結果、Diagram as Code がやりたいことを実現するのに一番適切だったが、細かい設定などが分からず、結局 Draw.io に落ち着いた。やはり思ったとおりに描けるのは良い (めんどうではあるけども)。
Diagram as Code の情報がもう少し増えるか、使ってみて使い方が分かれば Diagram as Code に移行するかもしれない。
余談
PlantUML と Mermaid は Qiita が対応しているみたい。
PlantUML
Mermaid
※本文中に「#mermaid」という文字列があると正しく表示されないそうで、表示されていません。
（@kyonc5 さん ありがとうございます！）。
追記
Qiitaさんがちゃんと説明されていました。
Markdown記法 チートシート 「mermaid」を見出しに使用できない
以上です。