Mermaidのシーケンス図は「Mermaid Graphical Editor」を使うと楽だよ！

チェンジビジョン藤元です。
今回は、僕が作成したVSCodeとChrome拡張「Mermaid Graphical Editor」にて新たに対応したシーケンス図について、メリットと簡単な描き方をお伝えします。
(※ Mermaidの記法に関する記事ではありません)

「Mermaid Graphical Editor」でシーケンス図を描くメリット

メリット①「 直感的に描ける」

当たり前といえば当たり前なのですが、シーケンス図上で編集したい位置をクリックするだけで作成できるため、図の作成に集中できます。

コードで編集する場合は対象とする行がどこにあるのか探す必要があるのですが、この手間がないためストレスなく作成することができます。

メリット②「 シーケンスの表現に集中できる」

Mermaidのシーケンス図はUMLで定義されている”すべての表記に対応しているわけではない”です。

しかしながら、多くのシーケンスを表すのに十分な表現力を持っています。逆に詳細／複雑な表現ができない分、
処理の流れ（シーケンス）の表現に集中できると思います。

「Mermaid Graphical Editor」でシーケンス図を気持よく描く！

手順０：シーケンス図を描き始める準備

まずはインストール。

（VSCode版の場合)

• Markdownファイル(.md)にMermaidコードブロックを作成します（①）
• 作成したコードブロック上部に「MermaidEditor」と表示されるので、これをクリックします（②）
• エディタビューより「SEQUENCE」をクリックします（③）

（Chrome版の場合 )

• 拡張機能を呼び出します（①）
• エディタビューより「SEQUENCE」をクリックします（②）

手順１：ライフラインを作成する

• メインメニューより「ライフライン」ボタンをクリックします（①）
• 作成したいライフラインの形を選択します（②）
• ライフラインを追加したい場所をクリックします（③）
  作成後、続けてラベル編集モードになるので、入力後、Enterキーで決定します
  ※Shift＋Enterキーで改行します

また、作成したライフラインは選択状態すると以下のような関連する操作を行うことができます。

• ライフラインの位置移動（①）
• ラベルの変更（②）
• ライフラインの削除（③）
• メッセージの作成（④）

手順２：メッセージを追加する

• メインメニューより「メッセージ」ボタンをクリックします（①）
• 作成したいメッセージの形を選択します（②）
• メッセージの元（from）となるライフラインより作成したい位置をクリックします（③）
• メッセージの先（to）となるライフラインをクリックします（④）
  ラベル編集モードになるので、入力後、Enterキーで決定します
  ※Shift＋Enterキーで改行します

また、作成したメッセージは選択状態にすると以下のような関連する操作を行うことができます。

• メッセージの形の変更（①）
• ラベルの変更（②）
• メッセージの削除（③）

メッセージはライフラインを選択することでも作成できるので、ちょい変更したい場合などはメインメニューでの操作をしなくても編集できるので便利です。

手順３：フラグメントを追加する

• メインメニューより「フラグメント」ボタンをクリックします（①）
• 作成したいフラグメントの種類を選択します（②）
• フラグメントの開始位置をクリックします（③）
• フラグメントの終了位置をクリックします（④）

altの分岐表現など区切る点線を追加する場合は、対応しているフラグメントの作成可能な位置のみ指定可能です。

手順４：ノートを追加する

• メインメニューより「ノート」ボタンをクリックします（①）
• ノートを作成したい位置のエディットポイントをクリックします（②）
  ラベル編集モードになるので、入力後、Enterキーで決定します
  ※Shift＋Enterキーで改行します

また、作成したノートは選択状態にすると以下のような関連する操作を行うことができます。

• ラベルの変更（①）
• ノートの削除（②）

手順５：ラベルを変更する

• メインメニューより「ラベル」ボタンをクリックします（①）
• ラベルを編集したいライフライン、メッセージ、フラグメント、およびノートのエディットポイントをクリックします（②）
  ラベル編集モードになるので、入力後、Enterキーで決定します
  ※Shift＋Enterキーで改行します

手順６：削除する

• メインメニューより「削除」ボタンをクリックします（①）
• 削除したいライフライン、メッセージ、フラグメント、およびノートのエディットポイントをクリックします（②）

手順７：ライフライン、メッセージ、フラグメントの形（種類）を変更する

• メインメニューより「ライフライン」ボタン、「メッセージ」ボタン、または「フラグメント」ボタンをクリックします（①）
• 「置き換えモード」ボタンをクリックします（②）
• 形（種類）の変更を反映するライフライン、メッセージ、またはフラグメントのエディットポイントをクリックします（③）

その他の操作（編集終了、ビューの縮小表示、イメージコピー）はフローチャートと同じです。

• 編集終了する場合はエディタビューを閉じます（①）
• 右下のスライドバーでエディタビューの縮尺を変更できます（②）
• 「図のコピー」ボタン（③）をクリックするとPNGイメージがクリップボードにコピーされるので、任意の場所にペーストして使用してください
  ※macの場合は動作しないので注意（Safariでの方法をよくわかっていない…）

シーケンス図で”より詳細な表現”をしたいなら [モデリングツール] が便利

単純なシーケンスを手軽に”サッ”と書きたい場合はMermaidは非常に便利だと思うのですが、「活性区間が描き辛い」「未対応の表現がある」など、より詳細でリッチな表現をしたい場合はモデリングツールを使用した方が楽しく作業できます。

弊社製品の astah* professional では、シーケンス図を直感的な操作でUMLで定義された表現を描くための便利な機能が備わっています。また、モデルとしてデータ管理されているため、クラス図などと連動した作成が可能になっています。ご活用いただければ幸いです。