ちょー手軽にシーケンス図を描こう！

VELTRAは前職のSIerと比較するとドキュメントがとても少ないです。SIer時代は「無駄なドキュメントが多すぎる！」と喚いていたこともありますが、必要なドキュメントってありますよね。ということで、今回は手軽にシーケンス図を描けるツールと、その描き方のご紹介です。

Mac専用のQuiver

こちらはMac専用のアプリ（有料）です。シーケンス図を描くためのアプリ、というわけではなく、 コードやMarkdownなども書ける高機能エディタなのですが、シーケンス図も手軽に書けるのでご紹介。

HappenApps

ブラウザで描けるWebSequenceDiagrams

こちらはブラウザ上でシーケンス図が描けるサービスです。無料でもイメージの出力（PNGだけ、PDFは有料）ができるのでとても便利です。スタイルも色々選べて、手書き風のシーケンス図にすることもできます。

WebSequenceDiagrams - Draw sequence diagrams online in seconds

シーケンス図の書き方

どちらも基本的にはテキストで書きます。ルールに従って書けば、いい感じにシーケンス図を描いてくれます。ここでは簡単な記述ルールについて紹介します。

1. まずは矢印でつなぐだけ
   矢印 -> でAとBをつなぐだけで図が描けます。矢印を点線にしたければ --> 、また ->> とすれば矢印の先っちょが変わります。
2. タイトルやコメント、メモも書ける
   頭に Title と書くと、タイトルになります。矢印でつないだ右側に書いたコメントは、シーケンス図にした時は矢印の上に描かれます。矢印のコメントとは別に Note を使って、メモを残すこともできます。
3. オブジェクトの順番を入れ替える
   どちらツールも基本的に、テキストを上から読んでいって、登場した順に左からオブジェクトを並べることになります。この順番を入れ替えたい場合は participant を使います。
4. 実行ライン（？）を書こう
   シーケンス図って、対象のオブジェクトが実行中かどうかを表すラインがありますよね（正式名がわからない）。これは矢印の右側に + または- を記載して表現します。（本稿執筆時点でQuiverでは不可）

上のルールで描いたシーケンス図のサンプルはこちら。

Title Sequence sample
participant E
A->B: Normal arrow
B-->C: Dashed line
C->>D: Open arrow
D->A: Return
note over E: Activate sample
E->+A: Activate A
A->+B: Activate B
B->-A: Destruct B
A->-E: Destruct A

今回はQuiverとWebSequenceDiagramsについてだけ触れましたが、他にもいろいろツールがあるようで、ものによっては書き方も違っていたりします。ただ、基本的な考え方はどれも同じ。テキストで簡単にビジュアル的なドキュメントが書けるのはうれしいですね！