はじめに
こんにちは。
前回、Mermaid Markdownの1つであるフロー図の書き方を記事にしました。
よかったら前回記事も見ていただけますと幸いです。
Mermaid Markdownを使うと色々な図形が書けます。今回はシーケンス図の書き方をまとめてみました。
【注意】Markdown記法でシーケンス図を書く方法をまとめた記事であり、シーケンス図の説明やお作法については記載していないためご注意ください。
環境準備
前回記事と同様に今回も環境準備に関する詳しい記載は割愛します。
色々な方法がありますが、VSCodeをインストールし、拡張機能「Markdown Preview Mermaid Support」をインストールするのが一番手っ取り早いかと思います。
基本形
```mermaid
ここにMermaid記法を記入する。
```
コード例
```mermaid
%% コンビニのやりとり
sequenceDiagram
autonumber
actor お客さん
actor 店員さん
participant レジ
お客さん->>店員さん: 肉まん3つください。
店員さん-->>お客さん: 450円になります。
お客さん->>店員さん: これでお願いします。
Note left of 店員さん: 1000円払う
店員さん->>レジ: お金を入れる
Note right of 店員さん: 1000円
レジ-->>レジ: 計算する
Note over レジ: 1000-450=550
レジ->>店員さん: おつりが出る
Note right of 店員さん: 550円
店員さん->>お客さん: 550円のお返しです。
```
出力結果
オプションまとめ
コードの記載内容によってフロー図の向き、図形、矢印など変えることができます。
線の種類
各ノードをどのように記載するかで線の種類を変えられます。
```mermaid
sequenceDiagram
ノードA->>ノードB: コメント
↑
ここの「->>」を編集する。
```
オプションまとめ
| コード | 種類 |
|---|---|
| A->B | 実線 |
| A-->B | 点線 |
| A->>B | 実線 矢印 |
| A-->>B | 点線 矢印 |
| A-xB | 十字がある実線 矢印 |
| A--xB | 十字がある点線 矢印 |
| A-)B | 実線 開いた矢印 |
| A--)B | 点線 開いた矢印 |
出力例
注釈の追記と位置
注釈の位置を設定できます。注釈は「Note」で追記できます。
```mermaid
sequenceDiagram
participant ノードA
Note left of ノードA: 左側
↑
ここの「left of」を編集する。
```
オプションまとめ
| コード | 種類 |
|---|---|
| right of | 右側 |
| left of | 左側 |
| over | 真ん中 |
出力例
その他
その他のオプションまとめです。
出力例は冒頭の「出力結果」を参照ください。
オプションまとめ
| コード | 種類 |
|---|---|
| autonumber | 自動的に番号を採番 |
| Note | 注釈 |
| actor | オブジェクトを人型で表す |
| %% コメント | コード内にコメントを追記 |
| 識別子 as オブジェクト名 | オブジェクト名を識別子で記載 |
| +,- | +から-のオブジェクトの間に実行仕様をつける |
おわりに
最後まで読んでいただきありがとうございました。
フロー図よりも複雑なオプションが多かった印象です。今までシーケンス図を作成する機会がなかったので、よい勉強になりました。
ExcelやPowerPointでこのような図を作った時と比べて、mermaidなら図の位置をうまく調整してくれるのでとてもラクですね。