Mermaidでシーケンス図を書いてみよう
Mermaidについては以下の記事を参照ください。
今回はMermaidを使ってシーケンス図を書いてみます。
Sequence Diagram（シーケンス図）の書き方
シーケンス図はある動作に対する処理の流れを記載したものです。
以下のサンプルをもとに説明していきます。
```mermaid
sequenceDiagram
autonumber
actor 佐藤さん
participant パソコン
participant プリンター
actor 鈴木さん
佐藤さん->>パソコン: 印刷
par 機械処理
パソコン->>プリンター: 印刷命令
プリンター-->>プリンター: 印刷
end
Note right of 鈴木さん: 鈴木さんの方が近い
鈴木さん->>プリンター: 印刷物を取る
鈴木さん->>佐藤さん: 印刷物を渡す
```
```mermaidまずは、「ここからMermaidを書くぞ」の記載です。
これはMarkdownのコードを書く書式と同じで、コード名を「mermaid」とするだけです。
sequenceDiagram次に「Mermaid」の中の「sequenceDiagram」だと指定します。
autonumber続けてオプションの「autonumber」を指定します。
これは図の起点となる丸の部分に数字を入れて、処理の順番をわかりやすくするものです。
指定しなければ丸の中に数字は入りません。
actor 佐藤さん
participant パソコン
participant プリンター
actor 鈴木さん
佐藤さん->>パソコン: 印刷
par 機械処理
パソコン->>プリンター: 印刷命令
プリンター-->>プリンター: 印刷
end
Note right of 鈴木さん: 鈴木さんの方が近い
鈴木さん->>プリンター: 印刷物を取る
鈴木さん->>佐藤さん: 印刷物を渡すここが、目に見える部分です。
図形
図形は初めに定義しています。
actor 佐藤さん
participant パソコン
participant プリンター
actor 鈴木さん「actor」は人型、「participant」は四角で囲まれた図形です。
後ろに続く文字がそれぞれの名称で、人型の場合は図形の下、四角で囲まれたものは四角の中に文字が入ります。
並び順は定義順で決めることができます。
簡単にまとめるとこんな感じです。
| 記号 | 書き方 | 例 |
|---|---|---|
| 人型 | actor |  |
| 四角 | participant |  |
あと、処理のくくりをまとめることができます。
par 機械処理
パソコン->>プリンター: 印刷命令
プリンター-->>プリンター: 印刷
end
「par」に続けて、その処理のくくりの名前を記載します。
次行からはインデントして記載し、最後に「end」を記載します。
接続
あとはつないでいくだけです。
鈴木さん->>佐藤さん: 印刷物を渡す「接続元」に矢印記号を書き、接続先、あとは「:」に続けて接続先を記載します。
線の形状は記号で決まります。
| 線 | 書き方 | 例 |
|---|---|---|
| 実線（矢印なし） | -> |  |
| 点線（矢印なし） | —> |  |
| 実線（矢印） | ->> |  |
| 点線（矢印） | —>> |  |
| 実線（先が×） | -x |  |
| 点線（先が×） | —x |  |
| 実線（シャープな矢印） | -) |  |
| 点線（シャープな矢印） | —) |  |
基本となる図形と線はざっとこんな感じです。
最後は閉じるのを忘れないように。
## まだまだあります
すべてはこの記事に乗せられないので、さらに細かなシーケンス図を書きたい場合は公式をあわせて参照してください。
こんなのが書きたい！というのがあればコメントを頂ければ追記しますのでぜひコメントまで。
[https://mermaid.js.org/syntax/sequenceDiagram.html](https://mermaid.js.org/syntax/sequenceDiagram.html)