Markdown（Typora）でシーケンス図を描く！

TyporaでMarkdownを始めよう！ | 象と散歩 でTyporaでのMarkdownの書き方、そして、TyporaでMarkdown第２弾として、Markdown（Typora）でフローチャートを描く | 象と散歩 で、flowchart.js を使ったフロチャートの書き方を紹介しましたが、今回は、第３弾、Markdown でのシーケンス図の書き方です。

Typora では、js-sequence-diagrams か mermaid を使ってシーケンス図が描けます。

文法サポートでダイアグラムをチェック

フローチャートを描くときにも説明しましたが、最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

これで、Markdownとしてシーケンス図が記述できるようになります。

Markdownでシーケンス図を描く（js-sequence-diragrams）

初めに js-sequence-diagrams を使ってシーケンス図を描写する方法です。Markdownでは、```sequence から ``` の間に記述しますが、Typoraでは、

```seguence

と書いてEnterすると、シーケンスダイアグラムが開きます。

ここにコマンドを記載していきます。

js-sequence-diagrams のコマンド一覧

js-sequence-diagrams は、基本的にメッセージしかサポートしていませんので、複合フラグメントなど複雑なシーケンス図は記載できません。

下記がコマンド一覧になります。

コマンド	説明
Title: hogehoge	タイトルをhogehogeにする
A->B: message text	AからBへの矢印線
A-->B: message text	AからBへの破線矢印
A->>B: message text	AからＢへのオープン矢印線
A-->>B: message text	AからＢへの破線オープン矢印
participant hoge (as A)	ライフライン名 hoge（を A とする）
Note right/left of A: hoge	Aの右or左にhogeと記載
Note over A: hoge	Aの上にhogeと記載
Note over A,B: hoge	AとBの上にhogeと記載

ライフライン名は、コマンドを書いた順番になるので最初に participant で定義するとわかりやすいです。またエイリアス名を付けられるので、コマンドの中ではシンプルにA,B,Cなどが使えます。

では、さっそく シーケンス図を描いてみましょう。

``` sequence
Title: サンプルシーケンス図（js-sequence-diagrams）
participant 処理1 as A
participant 処理2 as B
participant 処理3 as C
A->B: 同期メッセージ
B-->A: 応答メッセージ
B->>C: 非同期メッセージ
C-->A: 応答メッセージ
B->B: 閉じる
```

下記は、ノートの記載方法ですが、participant でA, Bの順番を定義しておかないと 、最初にBの右側にノートを描くコマンドがあるので、順番が逆転してしまいます。ノートの中を改行するときには、\n を使います。

``` sequence
participant A
participant B
Note right of B: Bの右側に\nノート
Note over A: Aの上にノート
Note left of A: Aの左側に\nノート
Note over A,B: AとBの上にノート
```

Markdownでシーケンス図を描く（js-sequence-diragrams）

js-sequence-diagrams で描いたシーケンス図を memaid で書くと下記のようになります。 ```mermaid で Enter して、エディタを開きます。

先頭行に sequenceDiagram と書くと mermaid でシーケンス図が書けます。

mermaid には、非同期メッセージを表すオープン矢印線はありませんが、ライフライン上でイベントの実行範囲を + と - を使って表記できます。

下記の例では、処理2（B）の +Bから-Aまで（処理2が同期メッセージを受けてから処理1に応答メッセージを返すまで）と 処理3（C）の +C から -A まで（処理3が同期メッセージを受けてから処理1に応答メッセージを返すまで）がインベント実行中となります。

``` mermaid
sequenceDiagram
Title: シーケンス図（mermaid）
participant A as 処理1
participant B as 処理2
participant C as 処理3
A->>+B: 同期メッセージ
B-->>-A: 応答メッセージ
B->>+C: 同期メッセージ
C-->>-A: 応答メッセージ
B->>B: 閉じる 
```

sequenceDiagram(mermaid) のコマンド一覧

下記が mermaid でシーケンス図を書くときのコマンド一覧になります。js-sequence-diagramsと大体同じですが、先に記したように mermaid ではオープン矢印はありません。その代わりに 矢印なしの線と破線、があります。participant の使い方も少し異なります。

またアクターの前に + と - 記号を付けることによって、A->>+B から B-->>-A のように 同一ライフライン上の + から - までがイベント実行中の表記となります。

コマンド	説明
Title: hogehoge	タイトルをhogehogeにする
A->B: message text	AからBへの線（矢印なし）
A-->B: message text	AからBへの破線（矢印なし）
A->>B: message text	AからＢへの矢印線
A-->>B: message text	AからＢへの破線矢印
A-xB: message text	AからＢへの矢印 and x(async)
A--xB: message text	AからＢへの破線矢印 and x(async)
participant A as hoge	ライフライン名 hoge を A とする
Note right/left of A: hoge	Aの右or左にhogeと記載
Note over A: hoge	Aの上にhogeと記載
Note over A,B: hoge	AとBの上にhogeと記載

ノートの書き方は、js-sequence-diagrams と同じですが、改行が使えません。

``` mermaid
sequenceDiagram
participant A
participant B
Note right of B: Bの右側に\nノート
Note over A: Aの上にノート
Note left of A: Aの左側に\nノート
Note over A,B: AとBの上にノート
```

mermaid ではLoop処理が描ける

mermaid では、下記のように記載することでLoop処理も描けます。

loop Loop text
... statements ...
end

``` mermaid
sequenceDiagram
participant A
participant B
Note right of B: Bの右側にノート
Note over A: Aの上にノート
Note left of A: Aの左側にノート
Note over A,B: AとBの上にノート
```

最後に

Markdown で描くシーケンス図では、複雑なシーケンス図を描くのには少々難ありですが、簡単なシーケンス図を描くのであれば十分な表現力です。

メイン画像に使ったシーケンス図は、WebSequenceDiagramsで作成したものです。コマンドの記載方法は、js-sequence-diagrams とほぼ同じですが、イベントやループなども使えます。また、スタイルを選択して手書き風などにもできます。

URLを指定して、若しくは画像としてExportして、Markdownのドキュメントの中で使うこともできます。

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。