Mermaid ドキュメント

Appearance

シーケンス図 ​

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

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

Code:
mermaid

NOTE

ノードに関する注意として、「end」という言葉は、mermaid言語のスクリプトの方式のため、図を壊す可能性があります。 避けられない場合は、「end」という単語を括弧()、引用符""、またはブラケット{}、[]で囲む必要があります。例えば: (end)、[end]、{end}。

構文 ​

参加者 ​

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

Code:
mermaid

アクター ​

矩形とテキストの代わりにアクターシンボルを使用したい場合は、以下のようにアクター文を使用できます。

Code:
mermaid

エイリアス ​

アクターは便利な識別子と説明的なラベルを持つことができます。

Code:
mermaid

アクターの作成と破棄 (v10.3.0+) ​

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

create participant B
A --> B: こんにちは

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

Code:
mermaid

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

アクター/参加者を作成または削除する際に以下のようなエラーが発生した場合：

破棄された参加者 参加者名 は、その宣言の後に関連する破壊メッセージを持っていません。シーケンス図を確認してください。

図のコードを修正してもこのエラーが解消されず、他のすべての図のレンダリングで同じエラーが発生する場合は、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

NOTE

グループ名が色である場合、色を透明に強制することができます： 

box transparent Aqua
... actors ...
end
Code:
mermaid

メッセージ ​

メッセージは、ソリッドまたは点線の2つの表示形式のいずれかです。

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

現在サポートされている矢印のタイプは10種類です：

タイプ説明
->矢印なしのソリッドライン
-->矢印なしの点線
->>矢印付きのソリッドライン
-->>矢印付きの点線
<<->>双方向の矢印付きのソリッドライン (v11.0.0+)
<<-->>双方向の矢印付きの点線 (v11.0.0+)
-x終端にクロス付のソリッドライン
--x終端にクロス付の点線
-)終端にオープン矢印付きのソリッドライン (非同期)
--)終端にオープン矢印付きの点線 (非同期)

アクティベーション ​

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

Code:
mermaid

メッセージ矢印に +/- サフィックスを追加することでショートカット記法も可能です：

Code:
mermaid

同じアクターに対してアクティベーションをスタックすることができます：

Code:
mermaid

ノート ​

シーケンス図にノートを追加することが可能です。これは以下の記法によって行われます Note [ right of | left of | over ] [Actor]: ノート内容のテキスト

以下の例を参照してください：

Code:
mermaid

2つの参加者にまたがるノートを作成することも可能です：

Code:
mermaid

改行 ​

ノートおよびメッセージに改行を追加できます：

Code:
mermaid

アクター名に改行を加えるためはエイリアスが必要です：

Code:
mermaid

ループ ​

シーケンス図でループを表現することが可能です。これは以下の記法によって行われます。

loop ループのテキスト
... 文 ...
end

以下の例を参照してください：

Code:
mermaid

Alt ​

シーケンス図で代替の経路を表現することが可能です。これは以下の記法によって行われます。

alt 説明するテキスト
... 文 ...
else
... 文 ...
end

または、optional（elseがないifのような）シーケンスがあります。

opt 説明するテキスト
... 文 ...
end

以下の例を確認してください：

Code:
mermaid

並行 ​

同時に行われているアクションを表示することができます。

これは以下の記法によって行われます：

par [アクション 1]
... 文 ...
and [アクション 2]
... 文 ...
and [アクション N]
... 文 ...
end

以下の例を参照してください：

Code:
mermaid

また、並行ブロックはネストすることが可能です。

Code:
mermaid

クリティカル領域 ​

自動的に実行されるべきアクションを条件によってハンドリングすることが可能です。

これは以下の記法によって行われます：

critical [実行する必要のあるアクション]
... 文 ...
option [状況 A]
... 文 ...
option [状況 B]
... 文 ...
end

以下の例を参照してください：

Code:
mermaid

オプションが全くない場合も可能です：

Code:
mermaid

このクリティカルブロックもネストすることができ、上記の par 文と同様に行えます。

ブレーク ​

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

これは以下の記法によって行われます。

break [何かが起こった]
... 文 ...
end

以下の例を参照してください：

Code:
mermaid

背景ハイライト ​

カラー背景矩形を提供することによってフローを強調表示することができます。これは以下の記法によって行われます。

rect COLOR
... 内容 ...
end

色はRGBおよびRGBA構文を使用して定義されます。

rect rgb(0, 255, 0)
... 内容 ...
end
rect rgba(0, 0, 255, .1)
... 内容 ...
end

以下の例を参照してください：

Code:
mermaid

コメント ​

シーケンス図の中にコメントを追加することができ、これによりパーサーによって無視されます。コメントは自分の行にあり、%%（二重パーセンテージ記号）で始める必要があります。コメントの開始から次の改行までの任意のテキストはコメントとして扱われ、図の構文を含むことになります。

エンティティコードによる特殊文字のエスケープ ​

ここで示される構文を使用して文字をエスケープすることが可能です。

Code:
mermaid

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

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

sequenceNumbers ​

シーケンス図の各矢印にシーケンス番号を添付することが可能です。これは、以下のようにmermaidをウェブサイトに追加したときに構成できます。

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

また、図で設定することもできます。以下のような図で：

Code:
mermaid

アクターメニュー ​

アクターには、外部ページへの個別のリンクを含むポップアップメニューを持つことができます。たとえば、アクターがウェブサービスを表す場合、有用なリンクとしてサービスの健康ダッシュボード、サービスのコードが含まれているリポジトリ、またはサービスを説明するウィキページへのリンクが含まれるかもしれません。

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

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

高度なメニュー構文 ​

JSON形式に依存した高度な構文があり、JSON形式に慣れている方にはこちらも利用できます。

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

links <actor>: <jsonフォーマットされたlink-name link-urlペア>

以下に例を示します：

Code:
mermaid

スタイリング ​

シーケンス図のスタイリングは、多くの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ノートボックス内のテキストのスタイル。

サンプルスタイルシート ​

css
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文字列または対応するオブジェクトに設定できます。

javascript
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