UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。
ですので、最近使っているツールを紹介します。
世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。
パワポで描く
まずはPowerPointです。
エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。
パワポのメリット
パワポは、ビジネスユーザーならほぼ誰でも使える
システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。
パワポなら大抵の人は使っているので、導入コストゼロで使って貰うことができます。
プロなら、ツールのこだわりが必要な時もありますが、時に相手に合わせることも重要です。
パワポは、なんだかんだで操作が簡単
パワポは全世界の膨大なユーザーの為に、触りやすいUIになっています。
万人向けツールなので簡単な図であれば、すぐに作れます。
いま、2分30秒でパワポで作りました。
インフラ構成を考える時、初案ではこのレベルで十分なことも多いと思います。商談やプロジェクト初期の会議の場で相手から「AWSの構成を知りたい」と言われた場合に、持ち帰って1週間後にこの資料を出したら怒られる可能性が高いです。ですが、3分貰いその場で作ることができれば、そのまま議論を広げて相手との認識相違をなくすことが出来たり、イロイロなムダを大幅に削減出来ます。
客先でリアルタイムで作るのはハードルが高いかもしれませんが、社内ミーティングなら気軽にやれるのでおすすめです。
また、自分のワークで考えを整理したいときとかも、テンポラリーで図を描くのに使ったりしてます。
整理が出来たら別なツールで清書することもあるし、そのままブラッシュアップして使うこともあります。そのあたりは、ユーザーの要求や開発メンバーの要望やプロジェクトの規模とかヤバさ加減、あとは自分のモチベによって判断しています。
パワポには、AWS公式からアイコンが配布されている
AWSの構成図を描く時に上に貼ったような雑な図ではなく、AWSの公式に貼ってあるようなカッコいい図を書きたい時も当然あります。パワポであれば、AWS公式から素材が配布されていてそのまま使うことができます。
アイコンどうしようとかの本質的ではない部分で悩むことがないのもパワポのメリットです。
mermaidで描く
続いてmermaidです。
マークダウンでこう↓書くと、、、
```mermaid
graph TB
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
こう↓なります。
Zennのドキュメントからパクりました。
mermaidのメリット
mermaidはテキストから図を自動生成してくれる → Git管理できる
mermaidの記法に従ってテキストを書くと、それを図にしてくれます。
ですので、プログラムなどと同様にテキストエディタで書き、Gitで管理出来ます。
UML図や構成図はプログラムとセットで管理したいことが多いですので、まとめてGit管理できるメリットは大きいです。
作図自体は自動でしてくれますので、各パーツの細かい位置調整に神経を使う必要が無いのも助かります。
テキストでお絵かきするのは大変と思われる方も多いと思います。図によっては確かに大変ですが、シーケンス図のような処理順序がはっきりしている図を書く場合は、上から下に向かって順番に書けばよいだけなので、メンテナンス性含めてむしろ楽だったりします。
mermaidは、GitHubにpushすると自動で図を描画してくれる
前項で、テキストベースでGit管理できると書きましたが、GitHubにmermaidの記法に沿ったファイルをpushすると、webで閲覧した時にテキストではなく描画された図の形式で見ることが出来ます。
コンパイルする手間は不要ですし、見るだけの人は特別なツールは不要で記法も知らなくて大丈夫です。
テキストベースで書くというと一見敷居が高そうに見えますが、書くのに必要なツールはテキストエディタだけ、見るのに必要なツールはブラウザだけなので、実は非常に導入コストが低かったりします。
mermaidは、Zennで使えます
最初にドキュメント丸パクリのサンプルを書いたことからも分かるように、Zennで使えます。
miroで描く
miroは、オンラインホワイトボードで有名なサービスです。
リアルで人と打ち合わせをしていた時代は、複数の人が1つのホワイトボードに書いたり付箋を貼ったりしながら議論や認識合わせをすることが多かったと思います。しかし、令和の時代はそのようなオフラインのミーティングは絶滅しつつあり、みんなで作業的なのが難しくなっています。その難しいことを可能にしてくれるサービスがmiroです。
そんなmiroを使えば、複数人で1つのボード上でワイワイやりながらUMLや構成図を描くことが出来ます。
miroのメリット
miroは、複数人で同時に編集できる
miroを使えば複数人で同時に図を描くことが出来ます。
エンジニア複数人がコワークしてクラス図を書き上げる事もできますし、お客さんと一緒にユースケース図を作ることも出来ます。
特にアジャイル開発をする時は、作図に限らずあらゆる場面でmiroを活用出来ますので、かなりコスパよく使えると思います。
miroには、UMLやAWSのテンプレートがある
miroには、様々なテンプレートが用意されています。その中に各種UML図用のテンプレートもありますので、簡単に図を書き始めることが出来ます。 テンプレート検索したらAWSのテンプレートもありました。
miroは、直感的で分かりやすいUI
miroはとても分かりやすいUIですので、初めて使う人でもあまり戸惑うことなく使うことが出来ます。そういう意味でも導入は容易なのかなと思います。
draw.ioで描く
「draw.ioのページにアクセスしても英語でごちゃごちゃ書いてあってよく分からないぞ」と思われるかも知れませんが、このツールかなり便利です。
draw.ioのメリット
draw.ioは、VSCode上で動作する
こちらのプラグインを入れることで、VSCode上でdraw.ioが動きます。
.drawio.pngなどのdraw.io用の形式で保存したファイルをVSCode上で開くと、勝手にdraw.ioが動き、編集が出来ます。
設計も開発もVSCodeで実施できるので、ツールの切り替えが不要でかなり楽です。
draw.ioで作成した図はpngで保存しているのに、編集できる
前項ででてきた.drawio.pngという拡張子(?)のファイルは、draw.ioで作成したpngファイルです。
普通にpngとして閲覧できるのはもちろんですが、ただexportした画像ファイルではなくdraw.ioを使えば編集もできます。
保存したpngファイルをGitHubにPushすればブラウザで閲覧出来ますし、他の人がdraw.ioで編集することも出来ます。pngなのでGitHubがプルリク時にそれなりに見やすく比較表示してくれるので、レビューも結構やりやすいです。
pngの他に.drawio.svgもあるので、お好みで使いましょう。
UMLに必要な図形や、AWSのアイコンが用意されている
作図に必要な図形は一通り揃っている印象です。
AzureとかGCPとかもあるし、Kubernetesもいけるし、CisscoとかIBMもありました。
BPMN用のアイコンもあったので、業務プロセスの整理にも使えるのかも知れません。
個人的なユースケースのまとめ
- パワポ
- 打ち合わせ中の補助的な利用
- 考えを整理する時の補助的な利用
- 技術系ではない関係者と共有する資料
- mermaid
- GitHubでテキストベースで管理したい時
- 時間軸に沿って書きやすいドキュメント(シーケンス図など)を作る時
- 開発者向けの資料作成時
- miro
- みんなで議論しながら図を作る時
- draw.io
- 上記以外の時
- 迷ったら、とりあえずdraw.ioでいいと思っている
NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります
Discussion
drawio + LiveShare (w/ VSCode)でCo-workできることに、この間驚きました😊
情報ありがとうございます。
LiveShareもよく使ってますがdraw.ioで使ったことはなかったです。
動くんですね。かなり便利そうですね。今度やってみます！