状態図
Mermaid 状態図の構文は plantUml で使用される構文と互換性があり、これによりユーザーが mermaid と plantUml の間で図を共有しやすくなります。
コピー
埋め込み
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
古いエディタ：
コピー
埋め込み
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
新しいエディタ：
状態図では、システムは状態と、ある状態がどのように遷移して別の状態に変わるかによって記述されます。上記の例の図は 3 つの状態（静止、移動、衝突）を示しています。静止状態から開始し、静止状態から移動状態に変わることができます。移動状態からは、静止状態に戻るか、衝突状態に変わることができます。静止状態から衝突状態への遷移はありません。（静止したままであれば、衝突することはありません。）
状态
状態はさまざまな方法で宣言できます。最も簡単な方法は、id のみで状態を定義することです:
コピー
埋め込み
stateDiagram-v2
stateId
もう 1 つの方法は、state 構文を使用し、以下の説明を追加することです:
コピー
埋め込み
stateDiagram-v2
state "This is a state description" as s2
説明付きの状態を定義するもう 1 つの方法は、まず状態 ID を定義し、次にコロンと説明を追加することです:
コピー
埋め込み
stateDiagram-v2
s2 : This is a state description
遷移
遷移とは、ある状態が別の状態に入るときの接続線であり、テキスト矢印 "-->" で表されます。
2 つの状態間の遷移を定義し、状態がまだ定義されていない場合、未定義の状態は遷移内の id を使用して定義されます。その後、この方法で定義された状態に説明を追加できます。
コピー
埋め込み
stateDiagram-v2
s1 --> s2
遷移にテキストを追加して、それが表す内容を説明できます:
コピー
埋め込み
stateDiagram-v2
s1 --> s2: A transition
開始と終了
図の開始と停止を表す 2 つの特別な状態があります。これら 2 つの状態は [*] 構文で表され、その状態への遷移の方向によって、それが開始状態か終了状態かが決まります。
コピー
埋め込み
stateDiagram-v2
[*] --> s1
s1 --> [*]
複合状態
実世界で状態図を使用すると、1 つの状態が複数の内部状態を持つことができるため、多次元の図にしばしば遭遇します。これは複合状態と呼ばれます。
複合状態を定義するには、state 構文を使用し、その後に id を付け、波括弧 {} 内に複合状態の本体を記述する必要があります。単純な状態を定義するのと同様に、単独の行で複合状態に名前を付けることができます。以下の例を参照してください:
コピー
埋め込み
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
いくつかの階層に分けて操作できます:
コピー
埋め込み
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
複合状態間の遷移を定義することもできます:
コピー
埋め込み
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
注意：異なる複合状態に属する内部状態間の遷移は定義できません。
選択
2 つ以上のパス間で選択を行うことをシミュレートする必要がある場合があり、<<choice>> を使用して実現できます。
コピー
埋め込み
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
分岐/マージ
<<fork>> <<join>> を使用して、図内で分岐/マージを指定できます。
コピー
埋め込み
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
注意
状態図では注記を使用するとより明確に表現でき、注記をノードの右側または左側に配置することを選択できます。
コピー
埋め込み
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
並行
plantUml と同様に、ハイフン記号 -- で並行性を指定できます。
コピー
埋め込み
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
図の方向を設定する
状態図では、この例のように、方向文を使用して図のレンダリング方向を設定できます。
コピー
埋め込み
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
注記
状態図にコメントを入力でき、エディタはこれらのコメントを無視します。コメントは二重パーセント記号 (%%) で始まる必要があり、そのマークから次の改行文字までのすべてのテキストは、あらゆる図の構文を含めてコメントと見なされます。コメントは単独の行にすることも、文の末尾に配置することもできます。
コピー
埋め込み
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
classDefs を使用してスタイルを設定する
状態図の classDef の現在の制限:
1.開始状態または終了状態には適用できません
2.複合状態または複合状態の内部には適用できません
classDef 構文（class definition の略で、ここでの「class」は CSS のクラスに似ています）を使用してスタイルを定義できます。classDef の後にはスタイル名が続き、さらに 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 です
- 4 番目のプロパティは stroke-width で、その値は 2px です
- 5 番目のプロパティは stroke で、その値は yellow です
classDef スタイルを状態に適用する
classDef スタイルを状態に適用するには 2 つの方法があります:
- class 構文を使用して、1 つの文で classDef スタイルを 1 つ以上の状態に適用します
- ::: 演算子を使用して、状態が遷移文で使用されるときに classDef スタイルを適用します（例えば、矢印が別の状態を指す/から来る）
1. class 文
class 文は、指定された classDef を 1 つ以上のクラスに適用するよう Mermaid に伝えます。形式は:
コピー
埋め込み
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 状態には 2 つの classDef スタイル（movement と badBadEvent）が適用されていることに注意してください
コピー
埋め込み
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. ::: 演算子を使用して状態にスタイルを適用する
演算子 ::: を使用して classDef スタイルを状態に適用できます。構文は:
コピー
埋め込み
[state]:::[style name]
クラスを使用する文で適用できます。これには開始状態と終了状態が含まれます。例：
コピー
埋め込み
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
状態名のスペース
まず id で状態を定義し、その後その id を参照して状態にスペースを追加できます。
以下の例では、ID が yswsii で、「Your state with spaces in it」と記述された状態があります。定義後、yswsii は図の最初の遷移で使用され ([*] --> yswsii)、YetAnotherState への遷移時にも使用されました (yswsii --> YetAnotherState)。yswsii は他の状態と異なるようにスタイルが設定されています。
コピー
埋め込み
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
