Skip to content
Diagrams and visualizations using Mermaid
State Diagram
A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
Syntax
Theme:
default
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
States
s1
state \"This is a state description\" as s2
s2 : This is a state description
Transitions
s1 --> s2
s1 --> s2: A transition
Start and End
[*] --> s1
s1 --> [*]
Composite States
[*] --> First
state First {
[*] --> second
second --> [*]
}
Choice
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Forks
state fork_state <<fork>> %% < instead of <
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>> %% < instead of <
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
Notes
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
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
Setting the direction of the diagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.