# Mermaid シーケンス図のチートシート

時間順に並ぶ、参加者どうしのメッセージ。

## 参加者

宣言すると順序を制御できます。棒人間には actor を使います。

```mermaid
sequenceDiagram
  participant Alice
  actor Bob
  Bob->>Alice: Hi Alice
  Alice->>Bob: Hi Bob
```

![Alice の参加者箱と Bob の棒人間が、2 つのメッセージをやり取りしているシーケンス図。](/diagrams/sequence/participants.svg)

## メッセージ矢印

塗りつぶされた矢印は呼び出し、開いた矢印は返信、頭のない線はお知らせです。

```mermaid
sequenceDiagram
  Alice->>John: Hello John
  John-->>Alice: Hi Alice
  John-)Alice: A one-way note
```

![2 本のライフライン間の 3 つのメッセージ。Alice から John への実線矢印、戻りの破線矢印、そして矢印のない 3 本目の線です。](/diagrams/sequence/messages.svg)

## activation

プラスでライフラインに縦棒が開き、マイナスで閉じます。棒は呼び出しにかかった時間を表します。

```mermaid
sequenceDiagram
  Alice->>+John: Hello
  John-->>-Alice: Hi
```

![Alice と John の 2 つのメッセージの間に、John のライフライン上に細い縦の activation 棒があります。](/diagrams/sequence/activations.svg)

## ノート

ノートは参加者に付けます。複数の参加者にまたがって浮かせることもできます。

```mermaid
sequenceDiagram
  Alice->>John: Hello
  Note right of John: He answers later
  Note over Alice,John: A shared note
```

![シーケンス図。John のライフラインの右に 1 つ、2 本のライフラインをまたいで 1 つ、計 2 つのノート箱があります。](/diagrams/sequence/notes.svg)

## ループ

繰り返す、ラベルのついたブロックです。中身は 1 周ごとに 1 回動きます。

```mermaid
sequenceDiagram
  Alice->>John: Hello
  loop Every minute
    John->>Alice: Still there?
  end
```

![Alice から John へのメッセージのあと、Every minute とラベルされたブロック、中身に John から Alice へのメッセージがあります。](/diagrams/sequence/loop.svg)

## 分岐

alt と else はシーケンス図の if/else です。

```mermaid
sequenceDiagram
  Alice->>John: Hello
  alt John is a robot
    John-->>Alice: Beep
  else John is a human
    John-->>Alice: Hello there
  end
```

![Alice から John へのメッセージのあと、ロボット用の分岐と人間用の分岐の 2 つを持つ alt ブロックがあります。](/diagrams/sequence/alt.svg)

## ステップに番号を振る

autonumber はすべてのメッセージに順番に番号をつけます。

```mermaid
sequenceDiagram
  autonumber
  Alice->>John: Hello
  John-->>Alice: Hi
  Alice->>John: Still there?
```

![3 つのメッセージのシーケンス図。それぞれの矢印に小さな番号のバッジがついています。](/diagrams/sequence/autonumber.svg)

## 省略できるステップ

opt は、起きることも、起きないこともあるブロックを示します。

```mermaid
sequenceDiagram
  Alice->>John: Hello
  opt If he feels like it
    John-->>Alice: Hi
  end
```

![Alice から John へのメッセージのあと、John の返信を含む省略可能なブロックがあります。](/diagrams/sequence/opt.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。