Mermaid State Diagram
This is a test page to show which features of Mermaid work using the Mermaid plugin.
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
States
stateDiagram-v2
s1
Another way is by using the state keyword with a description as per below:
stateDiagram-v2
state "This is a state description" as s2
Another way to define a state with a description is to define the state id followed by a colon and the description:
stateDiagram-v2
s2 : This is a state description
Transitions
stateDiagram-v2
s1 --> s2
It is possible to add text to a transition. To describe what it represents.
stateDiagram-v2
s1 --> s2: A transition
Start and End
stateDiagram-v2
[*] --> s1
s1 --> [*]
Composite states
stateDiagram-v2
[*] --> 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 --> [*]
}
}
}
You can also define transitions also between composite states:
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Forks
stateDiagram-v2
state fork_state >
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state >
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
Notes
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.
Concurrency
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
}
Comments
stateDiagram-v2
[*] --> Still
Still --> [*]
%% this is a comment
Still --> Moving
Moving --> Still %% another comment
Moving --> Crash
Crash --> [*]