Mermaid ドキュメント

Appearance

状態図 ​

"状態図は、コンピュータサイエンスおよび関連分野でシステムの動作を説明するために使用される図の一種です。状態図は、記述されたシステムが有限数の状態で構成されていることを要求します; 時には、確かにそうであることもありますが、他の時にはこれは合理的な抽象化です。" ウィキペディア

Mermaidは状態図を描画することができます。この構文は、ユーザーがmermaidとplantUmlの間で図を共有しやすくするために、plantUmlで使用される構文に準拠するように試みています。

Code:
mermaid

古いレンダラー：

Code:
mermaid

状態図では、システムは_状態_の観点から記述され、1つの_状態_が別の_状態_に変わる方法を_遷移_として表現されます。上記の例の図は3つの状態を示しています: Still、Moving、Crash。あなたはStill状態から始まります。StillからはMoving状態に変更することができます。Movingからは、再びStill状態に戻るか、Crash状態に変更することができます。StillからCrashへの遷移はありません。（静止している状態でクラッシュすることはできません。）

状態 ​

状態は複数の方法で宣言できます。最もシンプルな方法は、IDだけで状態を定義することです：

Code:
mermaid

別の方法は、以下に従って状態キーワードで説明を使用することです：

Code:
mermaid

説明付きで状態を定義するもう1つの方法は、状態IDの後にコロンと説明を続けて定義することです：

Code:
mermaid

遷移 ​

遷移は、1つの状態が別の状態に移行するときのパス/エッジです。これはテキスト矢印 "->" を使用して表されます。

2つの状態間の遷移を定義するとき、状態がまだ定義されていない場合、未定義の状態は遷移からのIDで定義されます。後で、こうして定義された状態に説明を追加することができます。

Code:
mermaid

遷移にテキストを追加して、それが何を表すかを説明することも可能です：

Code:
mermaid

開始と終了 ​

図の開始と停止を示す特別な状態が2つあります。これらは[*]構文で書かれ、遷移の方向がそれを開始または停止状態として定義します。

Code:
mermaid

合成状態 ​

状態図の実際の使用では、1つの状態が複数の内部状態を持つ場合、マルチディメンショナルな図に達することがよくあります。これらはこの用語では合成状態と呼ばれます。

合成状態を定義するには、状態キーワードの後にIDを置き、合成状態の本体を{}で囲む必要があります。単純な状態と同じように、別の行で合成状態に名前を付けることができます。以下の例を参照してください：

Code:
mermaid

これを複数の層で行うこともできます：

Code:
mermaid

合成状態間でも遷移を定義することができます：

Code:
mermaid

異なる合成状態に属する内部状態間での遷移を定義することはできません

選択 ​

時には、2つ以上のパス間の選択をモデリングする必要があります。その場合、<<choice>>を使用することができます。

Code:
mermaid

フォーク ​

<<fork>> <<join>>を使用して、図内にフォークを指定することができます。

Code:
mermaid

メモ ​

時には、何よりもPost-itノートが優れていることがあります。状態図でもそれが当てはまります。

ここでは、ノートをノードの_右側_または_左側_に置くことを選択できます。

Code:
mermaid

同時性 ​

plantUmlのように、--記号を使用して同時性を指定できます。

Code:
mermaid

図の方向を設定 ​

状態図では、方向ステートメントを使用して図がどのようにレンダリングされるかの方向を設定できます。この例のように。

Code:
mermaid

コメント ​

コメントは状態図チャート内に挿入でき、パーサーによって無視されます。コメントは単独の行に存在する必要があり、%%（2重パーセント記号）で前置きする必要があります。コメントの開始から次の改行までのテキストはすべてコメントとして扱われ、図の構文も含まれます。

classDefsによるスタイリング ​

フローチャートのような他の図と同様に、図自体内でスタイルを定義し、その名前付きスタイルを図内の状態または状態に適用できます。

状態図のclassDefsに関する現在の制限は次のとおりです：

  1. 開始または終了状態には適用できない
  2. 合成状態内またはその状態に適用できない

これらは開発中で、今後のバージョンで利用可能になります。

スタイルはclassDefキーワード（"クラス定義"の略）を使用して定義され、その後にスタイルの名前、次に1つ以上のプロパティ-値ペアが続きます。各プロパティ-値ペアは_有効なCSSプロパティ名_の後にコロン(:)を付け、その後に値が続きます。

次のようなプロパティ-値ペアの1つだけを持つclassDefの例を示します：

txt
classDef movement font-style:italic;

ここで

  • スタイルの_名前_はmovement
  • 唯一の_プロパティ_はfont-styleで、その_値_はitalic

複数の_プロパティ-値ペア_を持っている場合は、各_プロパティ-値ペア_の間にコンマ（,）を置きます。

次のように、3つのプロパティ-値ペアを持つ例を示します：

txt
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

ここで

  • スタイルの_名前_はbadBadEvent
  • 最初の_プロパティ_はfillで、その_値_は#f00
  • 2番目の_プロパティ_はcolorで、その_値_はwhite
  • 3番目の_プロパティ_はfont-weightで、その_値_はbold
  • 4番目の_プロパティ_はstroke-widthで、その_値_は2px
  • 5番目の_プロパティ_はstrokeで、その_値_はyellow

classDefスタイルを状態に適用 ​

classDefスタイルを状態に適用する方法は2つあります：

  1. classキーワードを使用して、1つまたは複数の状態に一度にclassDefスタイルを適用する
  2. ::: 演算子を使用して、遷移文中で状態にclassDefスタイルを適用する（例：他の状態への矢印と共に）

1. class ステートメント ​

classステートメントは、Mermaidに特定のクラスに名前付きclassDefを適用するように指示します。形式は次の通りです：

txt
class [1つ以上の状態名、カンマで区切る] [classDefで定義されたスタイルの名前]

状態CrashにbadBadEventスタイルを適用する例：

txt
class Crash badBadEvent

状態MovingとCrashの2つにmovementスタイルを適用する例：

txt
class Moving, Crash movement

例を示す図は以下の通りです。注意すべきは、Crash状態に2つのclassDefスタイルが適用されていることです：movementとbadBadEvent。

Code:
mermaid

2. ::: 演算子を使用して状態にスタイルを適用 ​

状態にclassDefスタイルを適用するには、::: (3コロン) 演算子を使用します。構文は次のようになります：

txt
[state]:::[スタイル名]

これは、クラスを使用しているステートメント内で図利用時に使用できます。これには開始状態と終了状態も含まれます。例：

Code:
mermaid

状態名に空白を含める ​

状態に空白を追加するには、最初にIDで状態を定義し、その後参照する必要があります。

次の例では、ID yswsii と説明 空白のあるあなたの状態を持つ状態があります。この状態が定義された後、yswsii は図内で最初の遷移（[*] --> yswsii）およびYetAnotherStateへの遷移（yswsii --> YetAnotherState）で使用されます。 (yswsii は他の状態とは異なるスタイルが適用されています。)

Code:
mermaid