Mermaid Markdownでシーケンス図を作成

Mermaid 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: コメント
            ↑
         ここの「->>」を編集する。
```

オプションまとめ

出力例

注釈の追記と位置

注釈の位置を設定できます。注釈は「Note」で追記できます。

```mermaid
sequenceDiagram
participant ノードA
    Note left of ノードA: 左側
           ↑
         ここの「left of」を編集する。
```

オプションまとめ

出力例

その他

その他のオプションまとめです。
出力例は冒頭の「出力結果」を参照ください。

オプションまとめ

関連記事:

マークダウンを表示するサンプル Markdownでダイアグラム・チャート markdown入門