シーケンス図

シーケンス図は、プロセスがどのように相互作用し、どのような順序で動作するかを示すインタラクション図です。

Mermaidはシーケンス図をレンダリングできます。

情報

ノードに関する注記：「end」という単語は、Mermaid言語のスクリプトの書き方により、図を壊す可能性があります。

避けられない場合は、丸括弧()、引用符""、または角括弧{}、[]を使用して「end」という単語を囲む必要があります。例：(end)、[end]、{end}。

構文

参加者

参加者は、このページの最初の例のように暗黙的に定義できます。参加者またはアクターは、ダイアグラムのソーステキストに出現する順序でレンダリングされます。最初のメッセージに出現する順序とは異なる順序で参加者を表示したい場合があります。次の方法でアクターの出現順序を指定できます。

アクター

テキスト付きの長方形ではなく、アクター記号を具体的に使用したい場合は、下記のようにアクターステートメントを使用できます。

エイリアス

アクターには、便利な識別子と説明的なラベルを付けることができます。

アクターの作成と破棄 (v10.3.0以降)

メッセージによってアクターを作成および破棄できます。そのためには、メッセージの前にcreateまたはdestroyディレクティブを追加します。

create participant B
A --> B: Hello

Createディレクティブは、アクター/参加者の区別とエイリアスをサポートします。メッセージの送信者または受信者は破棄できますが、受信者のみを作成できます。

修正不可能なアクター/参加者の作成/削除エラー

アクター/参加者の作成または削除時に次のタイプのエラーが発生した場合

破棄された参加者 **参加者名** には、宣言後に関連付けられた破棄メッセージがありません。シーケンス図を確認してください。

そして、ダイアグラムコードを修正してもこのエラーは解消されず、他のすべてのダイアグラムのレンダリングでも同じエラーが発生する場合は、Mermaidのバージョンを(v10.7.0以降)に更新する必要があります。

グループ化/ボックス

アクターは垂直ボックスにグループ化できます。次の表記法を使用して、色（指定しない場合は透明になります）や説明的なラベルを定義できます。

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

メッセージ

メッセージは、実線または点線で表示されます。

[Actor][Arrow][Actor]:Message text

現在サポートされている矢印の種類は10種類あります。

種類	説明
->	矢印のない実線
-->	矢印のない点線
->>	矢印のある実線
-->>	矢印のある点線
<<->>	双方向矢印のある実線 (v11.0.0以降)
<<-->>	双方向矢印のある点線 (v11.0.0以降)
-x	端にクロスのある実線
--x	端にクロスのある点線
-)	端に開いた矢印のある実線（非同期）
--)	端に開いた矢印のある点線（非同期）

アクティベーション

アクターをアクティブ化および非アクティブ化できます。(非)アクティベーションは専用の宣言にすることができます。

メッセージ矢印に+/-サフィックスを追加することで、ショートカット表記もあります。

同じアクターのアクティベーションはスタックできます。

ノート

シーケンス図にノートを追加できます。これは、Note [ right of | left of | over ] [Actor]: ノートコンテンツのテキストという表記法で行います。

下記の例を参照してください。

2人の参加者をまたがるノートを作成することもできます。

改行

改行は、ノートとメッセージに追加できます。

アクター名の改行にはエイリアスが必要です。

ループ

シーケンス図でループを表すことができます。これは、次の表記法で行います。

loop Loop text
... statements ...
end

下記の例を参照してください。

条件分岐

シーケンス図で代替パスを表すことができます。これは、次の表記法で行います。

alt Describing text
... statements ...
else
... statements ...
end

または、オプションのシーケンスがある場合(elseのないif)。

opt Describing text
... statements ...
end

下記の例を参照してください。

並列処理

並行して発生しているアクションを表示できます。

これは、次の表記法で行います。

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

下記の例を参照してください。

並列ブロックをネストすることもできます。

クリティカルセクション

状況の条件付き処理を伴って、自動的に発生する必要があるアクションを表示できます。

これは、次の表記法で行います。

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

下記の例を参照してください。

オプションをまったく持たないことも可能です。

このクリティカルブロックも、上記のように`par`ステートメントと同様にネストできます。

中断

フロー内のシーケンスの中断を示すことができます（通常は例外をモデル化するために使用されます）。

これは、次の表記法で行います。

break [something happened]
... statements ...
end

下記の例を参照してください。

背景の強調表示

色のついた背景の矩形を提供することで、フローを強調表示できます。これは、次の表記法で行います。

rect COLOR
... content ...
end

色はrgbとrgba構文を使用して定義されます。

rect rgb(0, 255, 0)
... content ...
end

rect rgba(0, 0, 255, .1)
... content ...
end

下記の例を参照してください。

コメント

シーケンス図内にコメントを入力できます。これはパーサーによって無視されます。コメントは独自の行になければならず、%%（二重パーセント記号）で始める必要があります。コメントの開始から次の改行までのテキストは、ダイアグラム構文を含めてすべてコメントとして扱われます。

文字をエスケープするためのエンティティコード

ここで例示されている構文を使用して文字をエスケープできます。

与えられた数字は10進数なので、#は#35;としてエンコードできます。HTML文字名を使用することもサポートされています。

セミコロンは改行の代わりにマークアップを定義するために使用できるため、メッセージテキストにセミコロンを含めるには#59;を使用する必要があります。

シーケンス番号

シーケンス図の各矢印にシーケンス番号を付けることができます。これは、下記のようにWebサイトにMermaidを追加する際に設定できます。

<script>
  mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>

ダイアグラムコードを介して有効にすることもできます。

アクターメニュー

アクターには、外部ページへの個別リンクを含むポップアップメニューを含めることができます。たとえば、アクターがWebサービスを表す場合、便利なリンクには、サービスヘルスダッシュボードへのリンク、サービスのコードを含むリポジトリ、またはサービスについて説明するwikiページが含まれる場合があります。

これは、次の形式のリンク行を1つ以上追加することで設定できます。

link <actor>: <link-label> @ <link-url>

高度なメニュー構文

JSONフォーマットに依存する高度な構文があります。JSONフォーマットに精通している場合は、これも存在します。

これは、次の形式のリンク行を追加することで設定できます。

links <actor>: <json-formatted link-name link-url pairs>

例を以下に示します。

スタイル

シーケンス図のスタイルは、いくつかのcssクラスを定義することで行われます。レンダリング中に、これらのクラスはsrc/themes/sequence.scssにあるファイルから抽出されます。

使用されるクラス

クラス	説明
actor	アクターボックスのスタイル。
actor-top	図の上部のアクター図/ボックスのスタイル。
actor-bottom	図の下部のアクター図/ボックスのスタイル。
text.actor	すべてのアクターのテキストのスタイル。
text.actor-box	アクターボックスのテキストのスタイル。
text.actor-man	アクター図のテキストのスタイル。
actor-line	アクタの垂直線。
messageLine0	実線メッセージラインのスタイル。
messageLine1	点線メッセージラインのスタイル。
messageText	メッセージ矢印上のテキストのスタイルを定義します。
labelBox	ループ内で左側に配置されるラベルのスタイルを定義します。
labelText	ループラベル内のテキストのスタイル。
loopText	ループボックス内のテキストのスタイル。
loopLine	ループボックス内の線のスタイルを定義します。
note	ノートボックスのスタイル。
noteText	ノートボックス内のテキストのスタイル。

サンプルスタイルシート

body {
  background: white;
}

.actor {
  stroke: #ccccff;
  fill: #ececff;
}
text.actor {
  fill: black;
  stroke: none;
  font-family: Helvetica;
}

.actor-line {
  stroke: grey;
}

.messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: black;
}

.messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: black;
}

#arrowhead {
  fill: black;
}

.messageText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

.labelBox {
  stroke: #ccccff;
  fill: #ececff;
}

.labelText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
}

.loopText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
}

.loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: #ccccff;
}

.note {
  stroke: #decc93;
  fill: #fff5ad;
}

.noteText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

設定

シーケンスダイアグラムのレンダリングのためのマージンを調整できます。

これは、`mermaid.sequenceConfig` を定義するか、CLIを使用して設定を含むJSONファイルを使用することで行います。CLIの使用方法については、mermaidCLIページを参照してください。`mermaid.sequenceConfig`には、設定パラメータを含むJSON文字列または対応するオブジェクトを設定できます。

mermaid.sequenceConfig = {
  diagramMarginX: 50,
  diagramMarginY: 10,
  boxTextMargin: 5,
  noteMargin: 10,
  messageMargin: 35,
  mirrorActors: true,
};

設定可能なパラメータ:

パラメータ	説明	デフォルト値
mirrorActors	ダイアグラムの上部だけでなく下部にもアクタのレンダリングをオン/オフします。	false
bottomMarginAdj	グラフの終了位置を調整します。CSSで幅の広いボーダースタイルを使用すると、不要なクリッピングが発生する可能性があるため、この設定パラメータが存在します。	1
actorFontSize	アクタの説明のフォントサイズを設定します。	14
actorFontFamily	アクタの説明のフォントファミリーを設定します。	"Open Sans", sans-serif
actorFontWeight	アクタの説明のフォントウェイトを設定します。	"Open Sans", sans-serif
noteFontSize	アクタに関連付けられたノートのフォントサイズを設定します。	14
noteFontFamily	アクタに関連付けられたノートのフォントファミリーを設定します。	"trebuchet ms", verdana, arial
noteFontWeight	アクタに関連付けられたノートのフォントウェイトを設定します。	"trebuchet ms", verdana, arial
noteAlign	アクタに関連付けられたノート内のテキストの配置を設定します。	center
messageFontSize	アクタ<->アクタ間のメッセージのフォントサイズを設定します。	16
messageFontFamily	アクタ<->アクタ間のメッセージのフォントファミリーを設定します。	"trebuchet ms", verdana, arial
messageFontWeight	アクタ<->アクタ間のメッセージのフォントウェイトを設定します。	"trebuchet ms", verdana, arial