Diagrams and visualizations using Mermaid

Explore

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 documentation

⁠

Syntax

Theme:

default

⁠

[*] --> Still

Still --> [*]

Still --> Moving

Moving --> Still

Moving --> Crash

Crash --> [*]

⁠

States

⁠

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

⁠