状態図

「状態図とは、コンピュータサイエンスおよび関連分野で使用される図の一種であり、システムの動作を記述するために使用されます。状態図では、記述されるシステムが有限個の状態を持つ必要があります。場合によっては、これは実際に当てはまりますが、他の場合には、これは合理的な抽象化です。」 ウィキペディア

Mermaidは状態図をレンダリングできます。構文はPlantUMLで使用される構文に準拠するように努めています。これにより、ユーザーはMermaidとPlantUMLの間で図を共有しやすくなります。

古いレンダラー

状態図では、システムは*状態*と、ある*状態*が*遷移*を介して別の*状態*にどのように変化するかという観点から記述されます。上記の図の例は、**静止**、**移動**、**衝突**の3つの状態を示しています。**静止**状態から開始します。**静止**から**移動**状態に変化できます。**移動**からは、**静止**状態または**衝突**状態に戻ることができます。**静止**から**衝突**への遷移はありません。（静止している場合は衝突できません。）

状態

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

別の方法は、以下のように説明付きでstateキーワードを使用することです。

説明付きで状態を定義する別の方法は、状態IDの後にコロンと説明を付けることです。

遷移

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

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

遷移にテキストを追加して、それが何を表しているかを記述することができます。

開始と終了

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

複合状態

状態図を実際に使用する場合、1つの状態に複数の内部状態を含めることができるため、多次元的な図になることがよくあります。これらは、この用語では複合状態と呼ばれます。

複合状態を定義するには、stateキーワードの後にIDと、{}間の複合状態の本体を使用する必要があります。単純な状態と同様に、別の行で複合状態に名前を付けることができます。以下の例を参照してください。

これを複数レイヤーで行うことができます。

複合状態間の遷移も定義できます。

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

選択

2つ以上のパスから選択する必要がある場合があります。<<choice>>を使用してこれを行うことができます。

分岐

<<fork>> <<join>>を使用して、図に分岐を指定できます。

ノート

付箋ほど明確に表現できるものはありません。これは状態図にも当てはまります。

ここでは、ノードの*右*または*左*にノートを配置することを選択できます。

並行処理

PlantUMLと同様に、--記号を使用して並行処理を指定できます。

図の方向の設定

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

コメント

状態図チャート内にコメントを入力できます。コメントはパーサーによって無視されます。コメントは独自の行に記述する必要があり、`%%`（パーセント記号2つ）で始める必要があります。コメントの開始から次の改行までのテキストは、図の構文を含め、コメントとして扱われます。

classDefsによるスタイリング

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

状態図classDefsの現在の制限事項は次のとおりです。

1. 開始状態または終了状態には適用できません。
2. 複合状態またはその内部には適用できません。

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

`classDef`キーワード（「クラス定義」の略。「クラス」とは*CSSクラス*のようなものを意味します）の後に*スタイルの名前*、次に1つ以上の*プロパティと値のペア*を続けます。それぞれの*プロパティと値のペア*は、*有効なCSSプロパティ名*の後にコロン（`:`）、そして*値*が続きます。

プロパティと値のペアが1つだけのclassDefの例を次に示します。

classDef movement font-style:italic;

ここで

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

*プロパティと値のペア*が複数ある場合は、それぞれの*プロパティと値のペア*の間にカンマ（`,`）を配置します。

プロパティと値のペアが3つある例を次に示します。

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

ここで

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

classDefスタイルを状態に適用する

`classDef`スタイルを状態に適用するには、2つの方法があります。

1. `class`キーワードを使用して、1つのステートメントで1つ以上の状態にclassDefスタイルを適用するか、
2. `:::`演算子を使用して、遷移ステートメントで使用されているときにclassDefスタイルを状態に適用します（例：別の状態との間の矢印）。

1. `class`ステートメント

`class`ステートメントは、Mermaidに名前付きclassDefを1つ以上のクラスに適用するように指示します。形式は次のとおりです。

class [one or more state names, separated by commas] [name of a style defined with classDef]

`badBadEvent`スタイルを`Crash`という名前の状態に適用する例を次に示します。

class Crash badBadEvent

`movement`スタイルを`Moving`と`Crash`の2つの状態に適用する例を次に示します。

class Moving, Crash movement

使用例を示す図を次に示します。`Crash`状態には、`movement`と`badBadEvent`の2つのclassDefスタイルが適用されていることに注意してください。

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

`:::`（コロン3つ）演算子を使用して、classDefスタイルを状態に適用できます。構文は次のとおりです。

[state]:::[style name]

クラスを使用するステートメント内の図でこれを使用できます。これには、開始状態と終了状態が含まれます。例えば

状態名にスペースを入れる

最初にIDで状態を定義し、後でそのIDを参照することで、状態にスペースを追加できます。

以下の例では、ID がyswsii、説明がYour state with spaces in it（スペースを含む状態）という状態があります。定義後、yswsii はダイアグラムの最初の遷移（[*] --> yswsii）と、YetAnotherState への遷移（yswsii --> YetAnotherState）で使用されています。（yswsii は他の状態と区別するためにスタイルが適用されています。）