mermaid/docs/stateDiagram.md

353 lines
7.9 KiB
Markdown
Raw Normal View History

# State diagrams
2020-07-14 23:25:49 +02:00
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
2019-10-09 20:05:24 +02:00
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
2019-10-09 20:05:24 +02:00
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
2019-10-09 20:05:24 +02:00
## States
2020-05-11 07:53:47 +02:00
A state can be declared in multiple ways. The simplest way is to define a state id as a description.
2019-10-09 20:05:24 +02:00
```markdown
stateDiagram-v2
2019-10-09 20:05:24 +02:00
s1
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
s1
```
Another way is by using the state keyword with a description as per below:
```markdown
stateDiagram-v2
state "This is a state description" as s2
2019-10-09 20:05:24 +02:00
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
state "This is a state description" as s2
2019-10-09 20:05:24 +02:00
```
Another way to define a state with a description is to define the state id followed by a colon and the description:
```markdown
stateDiagram-v2
s2 : This is a state description
```
```mermaid
stateDiagram-v2
s2 : This is a state description
```
2019-10-09 20:05:24 +02:00
## Transitions
Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
2019-10-09 20:05:24 +02:00
When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
2019-10-09 20:05:24 +02:00
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
s1 --> s2
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
s1 --> s2
```
It is possible to add text to a transition. To describe what it represents.
2019-10-09 20:05:24 +02:00
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
s1 --> s2: A transition
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
s1 --> s2: A transition
```
## Start and End
There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
2019-10-09 20:05:24 +02:00
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> s1
s1 --> [*]
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> s1
s1 --> [*]
```
## Composite states
2019-10-09 20:05:24 +02:00
In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
have several internal states. These are called composite states in this terminology.
2019-10-09 20:05:24 +02:00
2021-02-27 23:19:02 +01:00
In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below:
2019-10-09 20:05:24 +02:00
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
You can do this in several layers:
```
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
```
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second2
second2 --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
```
You can also define transitions also between composite states:
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
```
*You can not define transitions between internal states belonging to different composite states*
2019-10-09 20:05:24 +02:00
## Forks
It is possible to specify a fork in the diagram using <<fork>> <<join>>.
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
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 --> [*]
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
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 --> [*]
```
## Notes
Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
2019-10-09 20:05:24 +02:00
Here you can choose to put the note to the *right of* or to the *left of* a node.
2019-10-09 20:05:24 +02:00
```
stateDiagram-v2
2019-10-09 20:05:24 +02:00
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.
```
2019-10-09 20:05:24 +02:00
```mermaid
stateDiagram-v2
2019-10-09 20:05:24 +02:00
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.
```
## Concurrency
As in plantUml you can specify concurrency using the -- symbol.
```
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
}
```
2019-10-09 20:05:24 +02:00
```mermaid
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
}
2019-10-09 20:05:24 +02:00
```
## Comments
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```
stateDiagram-v2
[*] --> Still
Still --> [*]
%% this is a comment
Still --> Moving
Moving --> Still %% another comment
Moving --> Crash
Crash --> [*]
```
2019-10-09 20:05:24 +02:00
## Styling
Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss