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 の記述方法については、下記のシリーズで紹介しています。
と組み合わせれば、スマートスピーカーになります。
が発売されます。
で見られます。
