Mermaidチートシート【シーケンス図編】

はじめに

とあるプロジェクトで情報共有の1つとして，GithubでMermaidを利用する機会がありました．意外とMermaidを（日本語で）まとめている記事が少なかったので，この機会にまとめたいと思います．
本記事ではシーケンス図のみを取り扱います．（シーケンス図の全てを扱うのではないので，詳細を確認したい方は以下のドキュメント等を参考にしてみて下さい．）
:::note
最新の情報は公式ドキュメントを参照して下さい．

• About Mermaid
• Sequence diagrams

ちなみに，こういう図が扱えます．（例はテキトーです．）

参加者

participant

sequenceDiagram
    participant Alice

アクター

actor

sequenceDiagram
    actor Alice

識別子の設定

aliase

sequenceDiagram
    actor A as Alice
    actor B as Bob
    A ->> B: Hello!

メッセージ

:::note
[Participant or Actor] [Arrow] [Par or Act]: Message
というように記述．
例）A ->> B: Hello

種類	説明
->	矢印のない実線
-->	矢印のない点線
->>	矢印付き実線
-->>	矢印のある点線
-x	終端にバツ印のある実線
--x	終端にバツ印のある点線
-)	終端が開いた矢印の実線（非同期）
--)	終端が開いた矢印の点線（非同期）

実線

line

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -> B: Hello!

点線

dotted line

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A --> B: Hello!

実線矢印

arrow

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A ->> B: Hello!

点線矢印

dotted arrow

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -->> B: Hello!

バツ矢印

cross arrow

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -x B: Hello!

バツ点線矢印

dotted cross arrow

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A --x B: Hello!

終端が開いた矢印の実線（非同期）

open arrow

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -) B: Hello!

終端が開いた矢印の点線（非同期）

dotted open arrow

sequenceDiagram
    actor A as Alice
    participant B as Bob
    A --) B: Hello!

活動

activate

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

ショートカット記法もあり，以下のような書き方も可能．

shortcut activate

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

ノート

Note [right of | left of | over] [Par(s) or Act(s)]: Text in note content
というように記述．
例）Note right of A: A is Alice

shortcut activate

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

ループ

loop Loop text
    ループ処理
end

というように記述．
例）

loop forLoop
    A ->> B: Hello
end

loop

sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

条件分岐

alt

alt Describing text
    条件処理1
else
    条件処理2
end

もしくは

opt

opt Describing text
    条件処理
end

というように記述．
例）

opt if 
    A ->> B: Hello
end

alt_and_opt

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end