概要
作図ツールの選択肢はいくつかありますが、下記の点に魅力を感じ、PlantUML（ http://plantuml.com/ja/ ）を選択しました。
- ソースコードから画像を出力できる
- バージョン管理できる（差分を見られる！）
- レイアウトの微調整を自動でやってくれる
機能
- シーケンス図、ユースケース図、クラス図、アクティビティ図、状態遷移図（ステートマシン図）などのUMLの作成だけでなく、ガントチャートやER図も作成できるようです。（私はUML以外では使用したことはありません）
- 画像の出力形式は、png, svg, eps, pdf, vdx, xmi, scxml, htmlに対応しています。
- オンラインジェネレータ（ http://plantuml.com/ja/ ）もあるので、試用の上、検討すると良いかもしれませんね！
準備
Visual Studio Code（VSCode）＋ PlantUMLのプラグインを使いました。
VSCodeをインストール
https://code.visualstudio.com/ からダウンロードしてインストールします。
Javaをインストール
PlantUMLを実行するためにはJavaが必要です。
https://java.com/ja/ からダウンロードしてインストールします。
Graphvizをインストール
GraphvizはPlantUMLのソースファイルからUMLの画像ファイルを生成する際に必要となります。
http://www.graphviz.org/ からダウンロードしてインストールします。
VSCodeにPlantUMLをインストール
- VSCodeを起動
- ウィンドウの左下にある歯車アイコンをクリックして
EXTENSIONSを開く。 - 検索窓に
PlantUMLと入力すると、PlantUML Rich PlantUML support for Visual Studio Code.が現れるので、Install
（`Ctrl + P`→`ext install plantuml`だと早いみたい）
- VSCodeを再起動
以上で、準備は完了！
使い方
1.ファイルを新規作成し、***.puで保存
2.試しにユースケース図を書いてみます。
詳細な説明は割愛しますが、図とサンプルコードを交互に眺めると書き方が掴めてくると思います。
.pu
@startuml
:管理者: as admin
:一般ユーザ: as user
(ユースケース) as use
admin -> use
user ..> use
note bottom of admin : 図中にコメントを書けます
note right of use
このユースケースは、
サンプルです。
end note
@enduml
3.Alt + Dでプレビューを見ることができます。
4.画像を出力する
Ctrl + Shift + Pでコマンドパレットを開き、plantと入力すると、PlantUML: Export Current Diagramが表示されるので選択します。画像形式を選択すると、ファイルがエクスポートされます。
こんな感じで簡単に図を作ることができます！
感想
- 最初はレイアウトが思ったように整わずもどかしいですが、慣れてくると綺麗にレイアウトできるようになると思います。（
->を-->にしてみたり、-left->とかにしてみたり） - gitでバージョン管理できるのは素晴らしい。切り戻しが楽！
バージョン情報
- VSCode：1.36.1
- PlantUML：2.11.2
- Graphviz：2.38