シーケンス図
Mermaid はシーケンス図をレンダリングできます。シーケンス図は相互作用図で、各プロセスがどのように相互に操作するか、および操作の順序を示します。
コピー
埋め込み
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
ノードに関する説明：Mermaid 言語の記述方法により、"end" という単語は図全体を壊します。「end」を使用する必要がある場合は、小括弧（）、二重引用符""、波括弧{}、または角括弧[]で「end」という単語を囲む必要があります。つまり：（end）、[end]、{end}。
構文
参加者
参加者は、図のソーステキストに出現する順序で表示されます。時には、最初のメッセージに出現する順序とは異なる順序で参加者を表示したい場合があります。以下の方法で参加者の登場順序を指定できます:
コピー
埋め込み
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
テキスト付きの長方形ではなくアクター記号を使用したい場合は、以下のようにアクター文を使用して実現できます。
コピー
埋め込み
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
別名
参加者の宣言後に as を使用して別名を定義できます
コピー
埋め込み
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
参加者の作成と破棄
メッセージを通じて参加者を作成および破棄できます。そのため、メッセージの前に作成または破棄の指示を追加してください。
コピー
埋め込み
participant B
A --> B: Hello
作成指示時には参加者と別名を区別することをサポートします。メッセージの送信者または受信者は破棄できますが、受信者は作成のみ可能です。
コピー
埋め込み
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
グループ/ボックス
参加者は垂直ボックスにグループ化できます。記号を使用して色を定義できます（定義しない場合、透明になります）。
コピー
埋め込み
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
グループ名が色付きの場合、その色を強制的に透明にできます:
コピー
埋め込み
box transparent Aqua
... actors ...
end
コピー
埋め込み
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
メッセージ
メッセージは実線で表示することも、破線で表示することもできます。
線は実線または破線にでき、さまざまなタイプの矢印、十字、または開いた矢印で終わることができます。
コピー
埋め込み
[Actor][Arrow][Actor]:Message text
10 種類の標準的な矢印タイプ
| タイプ | 説明 |
|---|---|
| -> | 矢印なしの実線 |
| --> | 矢印なしの破線 |
| ->> | 矢印付きの実線 |
| -->> | 矢印付きの破線 |
| <<->> | 双方向矢印の実線 |
| <<-->> | 双方向矢印の破線 |
| -x | 末端に十字がある実線 |
| --x | 末端に十字がある破線 |
| -) | 末尾に中空の矢印がある実線（非同期） |
| --) | 末尾に中空の矢印がある破線（非同期） |
アクティベーション
アクターをアクティベーションおよび非アクティベーションできます。非アクティベーションまたはアクティベーションは専用の宣言にできます:
コピー
埋め込み
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
もう 1 つの簡略表記として、メッセージの矢印の後に + または - を追加する方法があります。
コピー
埋め込み
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
同じアクターのアクティベーションは重ねることができます:
コピー
埋め込み
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][参加者]：コメント内容
コピー
埋め込み
sequenceDiagram
participant John
Note right of John: Text in note
2 人の参加者を対象とするコメントを作成することもできます:
コピー
埋め込み
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
改行文字
コメントやメッセージに改行文字を追加できます:
コピー
埋め込み
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
アクター名の改行にはエイリアスを定義する必要があります:
コピー
埋め込み
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
ループ
シーケンス図では、以下の記号でループを表現できます。
コピー
埋め込み
loop Loop text
... statements ...
end
以下の例を参照してください:
コピー
埋め込み
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
代替
シーケンス図では、記号で代替パスを表現できます。
コピー
埋め込み
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
コピー
埋め込み
opt Describing text...
statements
end
以下の例を参照してください:
コピー
埋め込み
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
並列
以下の記号で並行して発生するアクションを表せます。
コピー
埋め込み
par Action 1
statements
and Action 2
statements
and Action N
statements
end
以下の例を参照してください:
コピー
埋め込み
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
並列ブロックをネストすることもできます。
コピー
埋め込み
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
クリティカルセクション
さまざまな状況に条件付けることで、自動的に実行する必要がある操作を表示できます。
これは以下の記号で行います:
コピー
埋め込み
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
以下の例を参照してください:
コピー
埋め込み
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
オプションがまったくないこともあります。
コピー
埋め込み
critical Establish a connection to the DB
Service-->DB: connect
end
このクリティカルブロックはネストすることもでき、上記の par 文に相当します。
中断
フロー内でシーケンスの停止を指示できます。通常、例外状況のモデリングに使用されます。
これは以下の記号で行います:
コピー
埋め込み
break [something happened]
... statements ...
end
以下の例を参照してください:
コピー
埋め込み
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
背景のハイライト
色付きの背景長方形を設定してフローをハイライトできます。以下の記号で行います:
コピー
埋め込み
rect COLOR
... content ...
end
色は rgb と rgba 構文を使用して定義されます。
コピー
埋め込み
rect rgb(0, 255, 0)
... content ...
end
コピー
埋め込み
rect rgba(0, 0, 255, .1)
... content ...
end
以下の例を参照してください:
コピー
埋め込み
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
コメント
シーケンス図にコメントを入力でき、エディタはこれらのコメントを無視します。 コメントは単独の行にする必要があり、二重パーセント記号 %% で始まる必要があります。 コメントの開始から次の改行文字までのすべてのテキストは、あらゆるダイアグラム構文を含めてコメントと見なされます。
コピー
埋め込み
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
文字をエスケープするための実体エンコーディング
以下の構文を使用して文字をエスケープできます。
コピー
埋め込み
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
示されている数字は 10 進数であるため、(#) は (#35;) としてエンコードでき、HTML の文字名も使用できます。
セミコロンは改行文字の代わりにマークを定義できるため、メッセージテキストにセミコロンを含める場合は (#59;) を使用する必要があります。
番号
シーケンス図の各矢印にシーケンス番号を付加できます。以下のとおりです:
コピー
埋め込み
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
参加者メニュー
参加者には、外部ページへのカスタマイズされたリンクを列挙したポップアップメニューを含めることができます。例えば、あるアクターがネットワークサービスを表す場合、有用なリンクには、サービスのヘルスダッシュボードへのリンク、そのサービスのコードを含むリポジトリ、またはそのサービスを説明する Wiki ページへのリンクなどが含まれます。
以下の形式で 1 つ以上のリンク行を追加して設定できます:
コピー
埋め込み
link <actor>: <link-label> @ <link-url>
コピー
埋め込み
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
高度なメニュー構文
JSON 形式に依存する高度な構文があります。JSON 形式に習熟している場合は、これも使用できます。
以下の形式のリンク行を追加して設定できます:
コピー
埋め込み
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
コピー
埋め込み
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
