	Dagre	Dagre with rough	ELK	ELK with rough
Simple State (only id) stateId	stateDiagram-v2 stateId	%%{init: {"handdrawn": true} }%% stateDiagram-v2 stateId	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 stateId	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 stateId

State with description with `as` keyword state "description text" as s2	stateDiagram-v2 state "This is a state description" as s2	%%{init: {"handdrawn": true} }%% stateDiagram-v2 state "This is a state description" as s3	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 state "This is a state description" as s4	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 state "This is a state description" as s5

State with description with `:` syntax s2 : description text	stateDiagram-v2 s21 : This is a state description	%%{init: {"handdrawn": true} }%% stateDiagram-v2 s22 : This is a state description	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 s23 : This is a state description	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 s24 : This is a state description

State with transition s1 --> s2	stateDiagram-v2 s31 --> s32	%%{init: {"handdrawn": true} }%% stateDiagram-v2 s41 --> s42	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 s51 --> s52	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 s61 --> s62

State transition with label s1 --> s2: A transition	stateDiagram-v2 a1 --> a2: A transition	%%{init: {"handdrawn": true} }%% stateDiagram-v2 a3 --> a4: A transition	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 a5 --> a6: A transition	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 a7 --> a8: A transition

Start & End [] --> test test --> []	stateDiagram-v2 [] --> test test --> []	%%{init: {"handdrawn": true} }%% stateDiagram-v2 [] --> test test --> []	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 [] --> test test --> []	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 [] --> test test --> []

Composite state [] --> First state First { [] --> second second --> [*] }	stateDiagram-v2 [] --> First state First { [] --> second second --> [*] }	%%{init: {"handdrawn": true} }%% stateDiagram-v2 [] --> First state First { [] --> second second --> [*] }	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 [] --> First state First { [] --> second second --> [*] }	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 [] --> First state First { [] --> second second --> [*] }

Nested Composite state [] --> Level1 state Level1 { [] --> Level2 state Level2 { [] --> level2 level2 --> Level3 state Level3 { [] --> level3 level3 --> [*] } } }	stateDiagram-v2 [] --> Level1 state Level1 { [] --> Level2 state Level2 { [] --> level2 level2 --> Level3 state Level3 { [] --> level3 level3 --> [*] } } }	%%{init: {"handdrawn": true} }%% stateDiagram-v2 [] --> Level1 state Level1 { [] --> Level2 state Level2 { [] --> level2 level2 --> Level3 state Level3 { [] --> level3 level3 --> [*] } } }	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 [] --> Level1 state Level1 { [] --> Level2 state Level2 { [] --> level2 level2 --> Level3 state Level3 { [] --> level3 level3 --> [*] } } }	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 [] --> Level1 state Level1 { [] --> Level2 state Level2 { [] --> level2 level2 --> Level3 state Level3 { [] --> level3 level3 --> [*] } } }

Composite state with transition [] --> B1 B1 --> B2 B1 --> B3 state B1 { [] --> B11 B11 --> [] } state B2 { [] --> B22 B22 --> [] } state B3 { [] --> B33 B33 --> [*] }	stateDiagram-v2 [] --> B1 B1 --> B2 B1 --> B3 state B1 { [] --> B11 B11 --> [] } state B2 { [] --> B22 B22 --> [] } state B3 { [] --> B33 B33 --> [*] }	%%{init: {"handdrawn": true} }%% stateDiagram-v2 [] --> B1 B1 --> B2 B1 --> B3 state B1 { [] --> B11 B11 --> [] } state B2 { [] --> B22 B22 --> [] } state B3 { [] --> B33 B33 --> [*] }	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 [] --> B1 B1 --> B2 B1 --> B3 state B1 { [] --> B11 B11 --> [] } state B2 { [] --> B22 B22 --> [] } state B3 { [] --> B33 B33 --> [*] }	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 [] --> B1 B1 --> B2 B1 --> B3 state B1 { [] --> B11 B11 --> [] } state B2 { [] --> B22 B22 --> [] } state B3 { [] --> B33 B33 --> [*] }

Choice state if_state <<choice>> [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0	stateDiagram-v2 state if_state <> [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0	%%{init: {"handdrawn": true} }%% stateDiagram-v2 state if_state <> [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 state if_state <> [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 state if_state <> [*] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0

Fork & Join 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 --> []	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 --> []	%%{init: {"handdrawn": true} }%% 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 --> []	%%{init: {"handdrawn": false, "layout": "elk"} }%% 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 --> []	%%{init: {"handdrawn": true, "layout": "elk"} }%% 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 TN1: The state with a note note right of TN1 note text end note TN1 --> TN2 note left of TN2 : note text	stateDiagram-v2 TN1: The state with a note note right of TN1 Important information! You can write notes. end note TN1 --> TN2 note left of TN2 : This is the note to the left.	%%{init: {"handdrawn": true} }%% stateDiagram-v2 TN3: The state with a note note right of TN3 Important information! You can write notes. end note TN3 --> TN4 note left of TN4 : This is the note to the left.	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 TN5: The state with a note note right of TN5 Important information! You can write notes. end note TN5 --> TN6 note left of TN6 : This is the note to the left.	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 TN7: The state with a note note right of TN7 Important information! You can write notes. end note TN7 --> TN8 note left of TN8 : This is the note to the left.

Additional Content	New content 1	New content 2	New content 3	New content 4