
    state "description text" as s2


    s2 :  description text


    s1 --> s2: A transition


      [*] --> test
    test --> [*]


      [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }



    [*] --> Level1

    state Level1 {
        [*] --> Level2

        state Level2 {
            [*] --> level2
            level2 --> Level3

            state Level3 {
                [*] --> level3
                level3 --> [*]
            }
        }
    }

    [*] --> B1
    B1 --> B2
    B1 --> B3

    state B1 {
        [*] --> B11
        B11 --> [*]
    }
    state B2 {
        [*] --> B22
        B22 --> [*]
    }
    state B3 {
        [*] --> B33
        B33 --> [*]
    }

    state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0

    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 --> [*]


  TN1: The state with a note
  note right of TN1
      note text
  end note
  TN1 --> TN2
  note left of TN2 : note text

[*] --> Active

state Active {
    [*] --> NumLockOff
    NumLockOff --> NumLockOn : EvNumLockPressed
    NumLockOn --> NumLockOff : EvNumLockPressed
    --
    [*] --> CapsLockOff
    CapsLockOff --> CapsLockOn : EvCapsLockPressed
    CapsLockOn --> CapsLockOff : EvCapsLockPressed
    --
    [*] --> ScrollLockOff
    ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
    ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}

direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4

	Dagre	Dagre with rough	ELK	ELK with rough
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 "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

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

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

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

[] --> 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 --> []

[] --> 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 --> [*] }

[] --> 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 --> [*] } } }

[] --> 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 --> [*] }

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

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 --> []

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.

[] --> Active state Active { [] --> NumLockOff NumLockOff --> NumLockOn : EvNumLockPressed NumLockOn --> NumLockOff : EvNumLockPressed -- [] --> CapsLockOff CapsLockOff --> CapsLockOn : EvCapsLockPressed CapsLockOn --> CapsLockOff : EvCapsLockPressed -- [] --> ScrollLockOff ScrollLockOff --> ScrollLockOn : EvScrollLockPressed ScrollLockOn --> ScrollLockOff : EvScrollLockPressed }	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 }	%%{init: {"handdrawn": true} }%% 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 }	%%{init: {"handdrawn": false, "layout": "elk"} }%% 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 }	%%{init: {"handdrawn": true, "layout": "elk"} }%% 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 }

direction LR [*] --> D1 D1 --> D2 D2 --> D3 state D3 { direction TB D11 --> D22 } D2 --> D4	stateDiagram-v2 direction LR [*] --> D1 D1 --> D2 D2 --> D3 state D3 { direction TB D11 --> D22 } D2 --> D4	%%{init: {"handdrawn": true} }%% stateDiagram-v2 direction LR [*] --> D1 D1 --> D2 D2 --> D3 state D3 { direction TB D11 --> D22 } D2 --> D4	%%{init: {"handdrawn": false, "layout": "elk"} }%% stateDiagram-v2 direction LR [*] --> D1 D1 --> D2 D2 --> D3 state D3 { direction TB D11 --> D22 } D2 --> D4	%%{init: {"handdrawn": true, "layout": "elk"} }%% stateDiagram-v2 direction LR [*] --> D1 D1 --> D2 D2 --> D3 state D3 { direction TB D11 --> D22 } D2 --> D4

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