neo-neo neo-dark neo-default neo-forest handdrawn-default classic-default 
              classNode
            
          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
          classDiagram
            class classNode
          
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
          classDiagram
            class classNode
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classNode
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
          classDiagram
            class classNode
        
          %%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classNode
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classNode
        
              Filled classNode
            
          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
          classDiagram
            class classNode {
              +int number
              method()
            }
          
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
          classDiagram
            class classNode {
              +int number
              method()
            }
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classNode {
              +int number
              method()
            }
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
          classDiagram
            class classNode {
              +int number
              method()
            }
        
          %%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classNode {
              +int number
              method()
            }
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classNode {
              +int number
              method()
            }
        
              classA --> classB
            
          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
          classDiagram
            class classA {
              +int number
              method()
            }
            class classB {
              +int number
              -string text
              method()
              another_method()
            }
            classA --> classB
          
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
          classDiagram
            class classA {
              +int number
              method()
            }
            class classB {
              +int number
              -string text
              method()
              another_method()
            }
            classA --> classB
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classA {
              +int number
              method()
            }
            class classB {
              +int number
              -string text
              method()
              another_method()
            }
            classA --> classB
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
          classDiagram
            class classA {
              +int number
              method()
            }
            class classB {
              +int number
              -string text
              method()
              another_method()
            }
            classA --> classB
        
          %%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classA {
              +int number
              method()
            }
            class classB {
              +int number
              -string text
              method()
              another_method()
            }
            classA --> classB
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            class classA {
              +int number
              method()
            }
            class classB {
              +int number
              -string text
              method()
              another_method()
            }
            classA --> classB
        
              nameSpace { classA --> classB } note
            
          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
          classDiagram
            namespace myNamespace {
              class classA {
                +int number
                method()
              }
              class classB {
                +int number
                -string text
                method()
                another_method()
              }
            }
            classA "1" o--> "*" classB : label
            note for classB "This is a note for classB"
          
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
          classDiagram
            namespace myNamespace {
              class classA {
                +int number
                method()
              }
              class classB {
                +int number
                -string text
                method()
                another_method()
              }
            }
            classA "1" o--> "*" classB : label
            note for classB "This is a note for classB"
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            namespace myNamespace {
              class classA {
                +int number
                method()
              }
              class classB {
                +int number
                -string text
                method()
                another_method()
              }
            }
            classA "1" o--> "*" classB : label
            note for classB "This is a note for classB"
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
          classDiagram
            namespace myNamespace {
              class classA {
                +int number
                method()
              }
              class classB {
                +int number
                -string text
                method()
                another_method()
              }
            }
            classA "1" o--> "*" classB : label
            note for classB "This is a note for classB"
        
          %%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            namespace myNamespace {
              class classA {
                +int number
                method()
              }
              class classB {
                +int number
                -string text
                method()
                another_method()
              }
            }
            classA "1" o--> "*" classB : label
            note for classB "This is a note for classB"
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
          classDiagram
            namespace myNamespace {
              class classA {
                +int number
                method()
              }
              class classB {
                +int number
                -string text
                method()
                another_method()
              }
            }
            classA "1" o--> "*" classB : label
            note for classB "This is a note for classB"
        
              stateId
            
          %%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
          stateDiagram-v2
            stateId
          
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
          stateDiagram-v2
            stateId
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
          stateDiagram-v2
            stateId
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
          stateDiagram-v2
            stateId
        
          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
          stateDiagram-v2
            stateId
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
          stateDiagram-v2
            stateId
        
              state "description text" as s2
            
          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
            stateDiagram-v2
              state "This is a state description" as s2
        
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
            stateDiagram-v2
              state "This is a state description" as s2
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              state "This is a state description" as s3
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
            stateDiagram-v2
              state "This is a state description" as s3
        
          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              state "This is a state description" as s4
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              state "This is a state description" as s4
        
              s2 :  description text
            
          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s21 : This is a state description
        
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s21 : This is a state description
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s22 : This is a state description
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s22 : This is a state description
      
          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s23 : This is a state description
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s23 : This is a state description
        
              s1 --> s2
            
          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s31 --> s32
        
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s31 --> s32
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s41 --> s42
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s51 --> s52
        
          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s61 --> s62
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              s61 --> s62
        
              s1 --> s2: A transition
            
          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
            stateDiagram-v2
              a1 --> a2: A transition
        
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
            stateDiagram-v2
              a1 --> a2: A transition
        
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              a3 --> a4: A transition
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
            stateDiagram-v2
              a5 --> a6: A transition
      
          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              a7 --> a8: A transition
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
            stateDiagram-v2
              a7 --> a8: A transition
      

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

  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
    stateDiagram-v2
       [*] --> test
    test --> [*]

      
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
       [*] --> test
    test --> [*]

      
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%

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


      
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%

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


      
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
       [*] --> test
    test --> [*]


      
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
       [*] --> test
    test --> [*]


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

  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
    stateDiagram-v2
       [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

      
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
       [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

      
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%

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


      
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%

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


      
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
       [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }


      
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
stateDiagram-v2
       [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }


      


    [*] --> Level1

    state Level1 {
        [*] --> Level2

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

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


  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
    stateDiagram-v2
    [*] --> Level1

    state Level1 {
        [*] --> Level2

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

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


      
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
    [*] --> Level1

    state Level1 {
        [*] --> Level2

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

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


      
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%

   stateDiagram-v2
    [*] --> Level1

    state Level1 {
        [*] --> Level2

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

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



      
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%

   stateDiagram-v2
    [*] --> Level1

    state Level1 {
        [*] --> Level2

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

            state Level3 {
                [*] --> level3
                level3 --> [*]
            }
        }
    }
      
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%

   stateDiagram-v2
    [*] --> Level1

    state Level1 {
        [*] --> Level2

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

            state Level3 {
                [*] --> level3
                level3 --> [*]
            }
        }
    }
      
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%

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



  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
    stateDiagram-v2
    [*] --> B1
    B1 --> B2
    B1 --> B3

    state B1 {
        [*] --> B11
        B11 --> [*]
    }
    state B2 {
        [*] --> B22
        B22 --> [*]
    }
    state B3 {
        [*] --> B33
        B33 --> [*]
    }
      
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
    [*] --> B1
    B1 --> B2
    B1 --> B3

    state B1 {
        [*] --> B11
        B11 --> [*]
    }
    state B2 {
        [*] --> B22
        B22 --> [*]
    }
    state B3 {
        [*] --> B33
        B33 --> [*]
    }
      
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%

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

    state B1 {
        [*] --> B11
        B11 --> [*]
    }
    state B2 {
        [*] --> B22
        B22 --> [*]
    }
    state B3 {
        [*] --> B33
        B33 --> [*]
    }
      
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%

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

      state B1 {
          [*] --> B11
          B11 --> [*]
      }
      state B2 {
          [*] --> B22
          B22 --> [*]
      }
      state B3 {
          [*] --> B33
          B33 --> [*]
      }
        
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
  [*] --> B1
    B1 --> B2
    B1 --> B3

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

      
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
 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
            
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
                    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", "theme": "dark","fontFamily": "Arial"} }%%
    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", "theme": "default","fontFamily": "Arial"} }%%

   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", "theme": "forest","fontFamily": "Arial"} }%%

     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", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
   state if_state <<choice>>
    [*] --> IsPositive
    IsPositive --> if_state
    if_state --> False: if n < 0
    if_state --> True : if n >= 0
      
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
 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 --> [*]



  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
   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", "theme": "dark","fontFamily": "Arial"} }%%
   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", "theme": "default","fontFamily": "Arial"} }%%
   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", "theme": "forest","fontFamily": "Arial"} }%%
   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", "theme": "default","fontFamily": "Arial"} }%%
   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": "classic", "theme": "default","fontFamily": "Arial"} }%%
   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

  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
   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": "neo", "theme": "dark","fontFamily": "Arial"} }%%
   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": "neo", "theme": "default","fontFamily": "Arial"} }%%
   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", "theme": "forest","fontFamily": "Arial"} }%%
   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": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
   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": "classic", "theme": "default","fontFamily": "Arial"} }%%
   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.

      
[*] --> 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", "theme": "neo","fontFamily": "Arial"} }%%
     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", "theme": "dark","fontFamily": "Arial"} }%%
     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", "theme": "default","fontFamily": "Arial"} }%%
     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", "theme": "forest","fontFamily": "Arial"} }%%
     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", "theme": "default","fontFamily": "Arial"} }%%
     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": "classic", "theme": "default","fontFamily": "Arial"} }%%
     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
  
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
    direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4
      
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
     stateDiagram-v2
    direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4
      
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
     stateDiagram-v2
   direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4
      
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
     stateDiagram-v2
   direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4
      
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
     stateDiagram-v2
    direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4
      
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
     stateDiagram-v2
    direction LR
    [*] --> D1
    D1 --> D2
    D2 --> D3
    state D3 {
      direction TB
      D11 --> D22
    }
    D2 --> D4
      
            flowchart LR
            A[Start]
          
        %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
        flowchart LR
        A[Start]
      
        %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
        flowchart LR
        A[Start]
    
        %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
        flowchart LR
        A[Start]
    
        %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
        flowchart LR
        A[Start]
    
        %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
        flowchart LR
        A[Start]
    
        %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
        flowchart LR
        A[Start]
    
          flowchart LR
            rounded(rounded)
        
      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
      flowchart LR
        rounded(rounded)
    
      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
      flowchart LR
        rounded(rounded)
  
      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        rounded(rounded)
  
      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
      flowchart LR
        rounded(rounded)
  
      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        rounded(rounded)
  
      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        rounded(rounded)
  
          flowchart LR
          A[Start] --Some text--> B(Continue)
        
      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] --Some text--> B(Continue)
    
      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] --Some text--> B(Continue)
  
      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] --Some text--> B(Continue)
    
      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] --Some text--> B(Continue)
  
      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] --Some text--> B(Continue)
    
      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
      A[Start] --Some text--> B(Continue)
    
          flowchart LR
            A[Start] -->C{Evaluate}
            C -- One --> D[Option 1]
            C -- Two --> E[Option 2]
            C -- Three --> F[fa:fa-car Option 3]
        
      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] -->C{Evaluate}
        C -- One --> D[Option 1]
        C -- Two --> E[Option 2]
        C -- Three --> F[fa:fa-car Option 3]
    
      %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] -->C{Evaluate}
        C -- One --> D[Option 1]
        C -- Two --> E[Option 2]
        C -- Three --> F[fa:fa-car Option 3]
  
      %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] -->C{Evaluate}
        C -- One --> D[Option 1]
        C -- Two --> E[Option 2]
        C -- Three --> F[fa:fa-car Option 3]
    
      %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] -->C{Evaluate}
        C -- One --> D[Option 1]
        C -- Two --> E[Option 2]
        C -- Three --> F[fa:fa-car Option 3]
  
      %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] -->C{Evaluate}
        C -- One --> D[Option 1]
        C -- Two --> E[Option 2]
        C -- Three --> F[fa:fa-car Option 3]
    
      %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
      flowchart LR
        A[Start] -->C{Evaluate}
        C -- One --> D[Option 1]
        C -- Two --> E[Option 2]
        C -- Three --> F[fa:fa-car Option 3]
    
              flowchart LR
                subgraph TOP
                  direction TB
                  subgraph B1
                  direction RL
                  i1 -->f1
                end
              end
              A --> TOP --> B
              B1 --> B2
            
          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
          flowchart LR
            subgraph TOP
              direction TB
              subgraph B1
                direction RL
                i1 -->f1
              end
            end
          A --> TOP --> B
          B1 --> B2
        
          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
          flowchart LR
            subgraph TOP
              direction TB
              subgraph B1
                direction RL
                i1 -->f1
              end
            end
          A --> TOP --> B
          B1 --> B2
      
          %%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
          flowchart LR
            subgraph TOP
              direction TB
              subgraph B1
                direction RL
                i1 -->f1
              end
            end
          A --> TOP --> B
          B1 --> B2
        
          %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
          flowchart LR
            subgraph TOP
              direction TB
              subgraph B1
                direction RL
                i1 -->f1
              end
            end
          A --> TOP --> B
          B1 --> B2
      
          %%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
          flowchart LR
          subgraph TOP
            direction TB
            subgraph B1
              direction RL
              i1 -->f1
            end
          end
        A --> TOP --> B
        B1 --> B2
        
          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
          flowchart LR
          subgraph TOP
            direction TB
            subgraph B1
              direction RL
              i1 -->f1
            end
          end
        A --> TOP --> B
        B1 --> B2
Additional Content New content 1 New content 2 New content 3 New content 4
Additional Content New content 1 New content 2 New content 3 New content 4