アーキテクチャや構成図を書くのに便利なツール

背景

アーキテクチャ構成図やシーケンス図を書きたい時のおすすめツールや手法でよく使う（使っていた）ものをまとめてみた。

（最近draw.ioという単語がほんとに出てこないので忘れないうちに。。。）

これさえ知っていればいいのではという程便利なツール。

特に優れていると思うところ。

様々なプラットフォームに対応している（Webアプリ、Desktop版(Windows, Mac)、Chome拡張機能版）。
ブラウザ上でも使えるの嬉しい。2021年12月12日時点でサポートしているブラウザはこちら（draw.io(Github)）。さすがにIEはもうサポート対象外のよう。
```
diagrams.net supports Chrome 70+, Firefox 70+, Safari 11+, Opera 50+, Native Android browser 7x+, the default browser in the current and previous major iOS versions (e.g. 11.2.x and 10.3.x) and Edge 79+.
```
データをXML形式でエクスポート/インポートすることができる。
無料で利用できる。

使い方も簡単。

draw.io にアクセスして、作成していけばいい。
ローカルにデータを作成したいときは、保存場所をdeviceにする。

drawio-diagrams/examplesにいくつかサンプルがあり、簡単にデータをインポートすることができる。

ローカルに保存したファイルを選択すると...

importできる！

Layerを追加したり、オブジェクトにTagをつけてグルーピングすることもできる。

7,8年くらい前にVisioの存在を知った私は何て便利なツールがあるんだと感動したが、drawi.ioを知ったときはこれが無料で使えるとはなかなか衝撃だった。

私がVisioを使っていたのが随分前なので今は他のことができるかもしれないが、大体Visioと同じことができると思う。
ぱっと見背景として作成したページを他のページで利用する方法がわからなかったが、この動画（youtube(drawio)）に説明があった。

ツールというのか手法というのかよくわからんと思って公式を見てみたら、
PlantUML は、以下のようなダイアグラムを素早く作成するためのコンポーネントです。
とのこと。よくわからないけど便利なコンポーネントらしい。

PlantUMLを使うことの最大のメリットは、シーケンス図などの図をコードベースで書くことができる ことにあると思う。

種類や書き方は公式HPを確認するのが個人的にはおすすめ（plantuml）。

@startuml
!theme aws-orange
Bob -> Alice : hello
@enduml

公式HPにあるOnlineServerからお試しで作成するのが一番手っ取り早いと思う。

VSCodeにもPlantUMLの拡張機能があったりするが、レンダリングに時間がかかるのでMarkDownを整形表示してくれる拡張機能をインストールして利用するのがいいと思う。

ちなみに自分のブログはHUGO製なのだが、HUGOでPlantUMLをレンダリングするのは若干面倒なので、marmaid.jsを利用すると良さそう。

(なぜか今のままではうまいことレンダリングされなかった。。。そのうち使いたくなったときに調査する)