Mermaid ドキュメント

Appearance

ZenUML ​

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

MermaidはZenUMLを使用してシーケンス図を描画できます。ZenUMLは、元のシーケンス図とは異なる 構文を使用していることに注意してください。

Code:
mermaid

構文 ​

参加者 ​

参加者は、ページの最初の例のように暗黙的に定義できます。参加者やアクターは、 図のソーステキストでの出現順に描画されます。場合によっては、最初のメッセージに現れる順序とは異なる参加者を表示したいかもしれません。参加者の出現順序を次のように指定することができます。

Code:
mermaid

注釈者 ​

テキスト付きの長方形の代わりに記号を使用したい場合は、以下のように参加者を宣言するために注釈者構文を使用できます。

Code:
mermaid

利用可能な注釈者は以下の通りです： img.png

エイリアス ​

参加者には便利な識別子と説明的なラベルを持たせることができます。

Code:
mermaid

メッセージ ​

メッセージは以下のいずれかです：

  1. 同期メッセージ
  2. 非同期メッセージ
  3. 作成メッセージ
  4. 応答メッセージ

同期メッセージ ​

プログラミング言語における同期（ブロッキング）メソッドを考えてみてください。

Code:
mermaid

非同期メッセージ ​

プログラミング言語における非同期（ノンブロッキング）メソッドを考えてみてください。 イベントを発火し、その後を忘れます。

Code:
mermaid

作成メッセージ ​

オブジェクトを作成するためにnewキーワードを使用します。

Code:
mermaid

応答メッセージ ​

応答メッセージを表現する方法は3つあります：

Code:
mermaid

3番目の方法@returnはあまり使用されませんが、一レベル上に戻る場合に便利です。

Code:
mermaid

ネスティング ​

同期メッセージと作成メッセージは、{}で自然にネストできます。

Code:
mermaid

コメント ​

シーケンス図には// comment構文でコメントを追加できます。 コメントはメッセージやフラグメントの上に描画されます。他の場所のコメントは無視されます。Markdownがサポートされています。

以下の例を見てください：

Code:
mermaid

ループ ​

ZenUML図ではループを表現することができます。これは以下のいずれかの記法で行います：

  1. while
  2. for
  3. forEach, foreach
  4. loop
zenuml
while(condition) {
    ...statements...
}

以下の例を見てください：

Code:
mermaid

Alt ​

シーケンス図で代替の経路を表現することができます。これは以下の記法で行います。

zenuml
if(condition1) {
    ...statements...
} else if(condition2) {
    ...statements...
} else {
    ...statements...
}

以下の例を見てください：

Code:
mermaid

Opt ​

optフラグメントを描画することができます。これは以下の記法で行います。

zenuml
opt {
  ...statements...
}

以下の例を見てください：

Code:
mermaid

並行 ​

並行して行われるアクションを示すことができます。

これは以下の記法で行います。

zenuml
par {
  statement1
  statement2
  statement3
}

以下の例を見てください：

Code:
mermaid

Try/Catch/Finally (Break) ​

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

これは以下の記法で行います。

try {
  ...statements...
} catch {
  ...statements...
} finally {
  ...statements...
}

以下の例を見てください：

Code:
mermaid

ライブラリやウェブサイトとの統合 ​

Zenumlは、将来的に変更される可能性のある実験的なレイジーロードおよび非同期レンダリング機能を使用しています。

以下の方法でMermaidを追加し、ZenUML図をウェブページに含めることができます：

html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs';
  await mermaid.registerExternalDiagrams([zenuml]);
</script>