ブラウザでシーケンス図が簡単に書ける「SequenceDiagram」を使ってみる

#はじめに

　Excelでシーケンス図書きたくないなーと思って探してたら
　sequencediagram.orgを見つけたので使ってみた

##SequenceDiagramとは

　・登録不要で使えるシーケンス図作成WEBサービス
　・シェルっぽい？記法でシーケンス図を簡単に書ける
　・色付けとかグルーピングとか、結構いろいろできる
　・画像/SVGで保存できる　

※記法の詳細は左のメニューにある[？]を押す表示されるヘルプを参照

##簡単なシーケンス図を描いてみる
こんな記法で簡単に作れる
[オブジェクト] <-方向-> [オブジェクト] ： [メッセージ]

サンプル

title シーケンスサンプル

Main->Sub(日本語も使える):呼び出し
Main<-Sub(日本語も使える):呼び出され

新しいオブジェクトへのメッセージを追加すると勝手に反映される
(長くなると見づらい)

title シーケンスサンプル

Main->Sub(日本語も使える):呼び出し
Main<-Sub(日本語も使える):呼び出され

Main->Sub(日本語も使える):また呼び出し

Sub(日本語も使える)-->Sub2(new!):点線も書ける(ハイフンを二つ)
Sub2(new!)->Sub2(new!):自分へのメッセージも
Sub(日本語も使える)<-Sub2(new!):かける！

Main<-Sub(日本語も使える):すごいね。

##グループ分けや色分けもできる

色々と頑張ればいい感じに書けそう

title シーケンスサンプル
participantgroup #lightgreen **フロント**
  participant Main
  participantgroup #pink サブモジュール
    participant Sub1
    participant Sub2
  end
  participantgroup #lightblue **外部ライブラリ**
    participant Library
  end
end

participantgroup #orange **バックエンド**
  participant ServerModule
end

Main->Sub1:Sub1が
Sub1->Library:外部ライブラリを使って
Library-->ServerModule:サーバへ通信
ServerModule->ServerModule:バックエンド処理して
Library<--ServerModule:結果を返す
Sub1<-Library:Sub1が結果をもらって
loop i < x
  Sub1->Sub2:Sub2を繰り返し呼ぶ
  activate Sub1
  Sub2->Sub2:ごにょごにょして
  Sub1<-Sub2:返す
  deactivate Sub1
end
  Main<-Sub1:ただいま

Main<<->>ServerModule:相互の矢印も書ける

#さいごに

Excelより全然書きやすくて感動した。
ほかにもJavaScriptのmermaid.jsというライブラリもあるらしい。
クラス図も書けるとか。。。

今度触ってみよう