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

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

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

```mermaid
sequenceDiagram
    actor client as 顧客
    participant vend as 券売機
    loop 入金処理
        client ->>+ vend: 入金
        vend ->> vend: 金額の更新
    end
    vend ->>- client: 入金額の表示
    loop 発券処理
        client ->>+ vend: 購入する券の指定
        vend ->> vend: 金額の更新
        vend ->> client: 発券処理と残額の表示
    end
    opt 入金額 > 0
        vend ->> client: 返金処理
    end
```


# [参加者](https://mermaid.js.org/syntax/sequenceDiagram.html#participants)

```: participant
sequenceDiagram
    participant Alice
```

```mermaid
sequenceDiagram
    participant Alice
```

# [アクター](https://mermaid.js.org/syntax/sequenceDiagram.html#actors)

```: actor
sequenceDiagram
    actor Alice
```

```mermaid
sequenceDiagram
    actor Alice
```

# [識別子の設定](https://mermaid.js.org/syntax/sequenceDiagram.html#aliases)

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

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

# [メッセージ](https://mermaid.js.org/syntax/sequenceDiagram.html#messages)

:::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!
```

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

## 点線
```: dotted line
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A --> B: Hello!
```

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

## 実線矢印
```: arrow
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A ->> B: Hello!
```

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

## 点線矢印
```: dotted arrow
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -->> B: Hello!
```

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

## バツ矢印
```: cross arrow
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -x B: Hello!
```

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

## バツ点線矢印
```: dotted cross arrow
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A --x B: Hello!
```

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

## 終端が開いた矢印の実線（非同期）
```: open arrow
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A -) B: Hello!
```

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

## 終端が開いた矢印の点線（非同期）
```: dotted open arrow
sequenceDiagram
    actor A as Alice
    participant B as Bob
    A --) B: Hello!
```

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

# [活動](https://mermaid.js.org/syntax/sequenceDiagram.html#activations)
```: activate
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
```

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

:::note
ショートカット記法もあり，以下のような書き方も可能．
```: 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!
```

```mermaid
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!
```
:::


# [ノート](https://mermaid.js.org/syntax/sequenceDiagram.html#notes)
:::note
`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
```

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


# [ループ](https://mermaid.js.org/syntax/sequenceDiagram.html#loops)
:::note
```
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
```

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


# [条件分岐](https://mermaid.js.org/syntax/sequenceDiagram.html#alt)
:::note
```: 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
```

```mermaid
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
```