本文へスキップ
Mernyx
メニューを開く

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

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

このページのすべての図はMernyx(macOS 向けネイティブ Mermaid エディタ)が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

参加者

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

sequenceDiagram
  participant Alice
  actor Bob
  Bob->>Alice: Hi Alice
  Alice->>Bob: Hi Bob
Alice の参加者箱と Bob の棒人間が、2 つのメッセージをやり取りしているシーケンス図。図を拡大

メッセージ矢印

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

sequenceDiagram
  Alice->>John: Hello John
  John-->>Alice: Hi Alice
  John-)Alice: A one-way note
2 本のライフライン間の 3 つのメッセージ。Alice から John への実線矢印、戻りの破線矢印、そして矢印のない 3 本目の線です。図を拡大

activation

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

sequenceDiagram
  Alice->>+John: Hello
  John-->>-Alice: Hi
Alice と John の 2 つのメッセージの間に、John のライフライン上に細い縦の activation 棒があります。図を拡大

ノート

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

sequenceDiagram
  Alice->>John: Hello
  Note right of John: He answers later
  Note over Alice,John: A shared note
シーケンス図。John のライフラインの右に 1 つ、2 本のライフラインをまたいで 1 つ、計 2 つのノート箱があります。図を拡大

ループ

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

sequenceDiagram
  Alice->>John: Hello
  loop Every minute
    John->>Alice: Still there?
  end
Alice から John へのメッセージのあと、Every minute とラベルされたブロック、中身に John から Alice へのメッセージがあります。図を拡大

分岐

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

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 ブロックがあります。図を拡大

ステップに番号を振る

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

sequenceDiagram
  autonumber
  Alice->>John: Hello
  John-->>Alice: Hi
  Alice->>John: Still there?
3 つのメッセージのシーケンス図。それぞれの矢印に小さな番号のバッジがついています。図を拡大

省略できるステップ

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

sequenceDiagram
  Alice->>John: Hello
  opt If he feels like it
    John-->>Alice: Hi
  end
Alice から John へのメッセージのあと、John の返信を含む省略可能なブロックがあります。図を拡大

Mernyx で描いてみる

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

図のプレビュー