Skip to content
Diagrams and visualizations using Mermaid
Diagrams and visualizations using Mermaid
More
Share
Explore
Diagrams and visualizations using Mermaid

icon picker
State Diagram

A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
⁠
Syntax documentation
⁠
⁠

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 &lt;&lt;fork>> %% &lt; instead of <
[*] --> fork_state
fork_state --> State2
fork_state --> State3

state join_state &lt;&lt;join>> %% &lt; 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
⁠
⁠
⁠
Syntax
States
Transitions
Start and End
Composite States
Choice
Forks
Notes
Concurrency
Setting the direction of the diagram
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.