| Dagre | Dagre with rough | Dagre with neo | ELK | ELK with rough
--- | --- | --- | --- | --- | ---

          stateId

    stateDiagram-v2
        stateId

    %%{init: {"look": "handdrawn"} }%%
    stateDiagram-v2
        stateId

    %%{init: {"look": "neo"} }%%
    stateDiagram-v2
        stateId

    %%{init: {"handdrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
        stateId

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
        stateId

        state "description text" as s2

    stateDiagram-v2
        state "This is a state description" as s2

    %%{init: {"look": "handdrawn"} }%%
    stateDiagram-v2
        state "This is a state description" as s3

    %%{init: {"look": "neo"} }%%
    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: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
        state "This is a state description" as s5

        s2 :  description text

    stateDiagram-v2
        s21 : This is a state description

    %%{init: {"look": "handdrawn"} }%%
    stateDiagram-v2
        s22 : This is a state description

    %%{init: {"look": "neo"} }%%
    stateDiagram-v2
        s22 : This is a state description

    %%{init: {"handdrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
        s23 : This is a state description

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
        s24 : This is a state description

        s1 --> s2

        stateDiagram-v2
        s31 --> s32

    %%{init: {"look": "handdrawn"} }%%

       stateDiagram-v2
        s41 --> s42

      %%{init: {"look": "neo"} }%%

         stateDiagram-v2
          s51 --> s52

    %%{init: {"handdrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
        s61 --> s62

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
        s71 --> s72

        s1 --> s2: A transition

        stateDiagram-v2
        a1 --> a2: A transition

    %%{init: {"look": "handdrawn"} }%%

       stateDiagram-v2
        a3 --> a4: A transition

    %%{init: {"look": "neo"} }%%

       stateDiagram-v2
        a5 --> a6: A transition

    %%{init: {"handdrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
        a7 --> a8: A transition

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
       a9 --> a10: A transition

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

        stateDiagram-v2
           [*] --> test
        test --> [*]

    %%{init: {"look": "handdrawn"} }%%

       stateDiagram-v2
           [*] --> test
        test --> [*]

    %%{init: {"look": "neo"} }%%

       stateDiagram-v2
           [*] --> test
        test --> [*]

    %%{init: {"handdrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
           [*] --> test
        test --> [*]

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
          [*] --> test
        test --> [*]

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

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

    %%{init: {"look": "handdrawn"} }%%

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

    %%{init: {"look": "neo"} }%%

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

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

    %%{init: {"look": "handdrawn", "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: {"look": "handdrawn"} }%%

       stateDiagram-v2
        [*] --> Level1

        state Level1 {
            [*] --> Level2

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

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

    %%{init: {"look": "neo"} }%%

       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: {"look": "handdrawn", "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: {"look": "handdrawn"} }%%

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

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

      %%{init: {"look": "neo"} }%%

         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: {"look": "handdrawn", "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 <<choice>>
        [*] --> IsPositive
        IsPositive --> if_state
        if_state --> False: if n < 0
        if_state --> True : if n >= 0

    %%{init: {"look": "handdrawn"} }%%

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

      %%{init: {"look": "neo"} }%%

         stateDiagram-v2
         state if_state <<choice>>
          [*] --> 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 <<choice>>
        [*] --> IsPositive
        IsPositive --> if_state
        if_state --> False: if n < 0
        if_state --> True : if n >= 0

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
     stateDiagram-v2
     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 --> [*]

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

    %%{init: {"look": "handdrawn"} }%%
       stateDiagram-v2
        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 --> [*]

    %%{init: {"look": "neo"} }%%
       stateDiagram-v2
        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 --> [*]

    %%{init: {"handdrawn": false, "layout": "elk"} }%%
       stateDiagram-v2
        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 --> [*]

    %%{init: {"look": "handdrawn", "layout": "elk"} }%%
       stateDiagram-v2
        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

       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: {"look": "handdrawn"} }%%
       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: {"look": "neo"} }%%
       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: {"look": "handdrawn", "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: {"look": "handdrawn"} }%%
         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: {"look": "neo"} }%%
         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: {"look": "handdrawn", "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: {"look": "handdrawn"} }%%
         stateDiagram-v2
       direction LR
        [*] --> D1
        D1 --> D2
        D2 --> D3
        state D3 {
          direction TB
          D11 --> D22
        }
        D2 --> D4

    %%{init: {"look": "neo"} }%%
         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: {"look": "handdrawn", "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