diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html new file mode 100644 index 000000000..ba47fd652 --- /dev/null +++ b/cypress/platform/neo-test.html @@ -0,0 +1,1486 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
neo-neoneo-darkneo-defaultneo-foresthanddrawnclassic-default
+ +
+
+ 
+      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": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    state "This is a state description" 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 s3
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    state "This is a state description" as s3
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    state "This is a state description" as s4
+
+
+ +
+
+ 
+
+    s2 :  description text
+
+
+
+ 		+ 
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s21 : This is a state description
+
+ 		+ 
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s21 : This is a state description
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "dark","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": "neo", "theme": "base","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s23 : This is a state description
+
+
+
+ +
+
+ 
+
+    s1 --> s2
+
+
+
+
+ 		+ 
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    s31 --> s32
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    s31 --> s32
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+    s41 --> s42
+
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+
+     stateDiagram-v2
+      s51 --> s52
+
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s61 --> s62
+
+
+
+
+ +
+
+ 
+
+    s1 --> s2: A transition
+
+
+
+
+ 		+ 
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    a1 --> a2: A transition
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    a1 --> a2: A transition
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+    a3 --> a4: A transition
+
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+    a5 --> a6: A transition
+
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    a7 --> a8: A transition
+
+
+
+
+ +
+
+ 
+
+      [*] --> test
+    test --> [*]
+
+
+
+
+ 		+ 
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+       [*] --> 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": "forest","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
+
+
+ +
+
+ 
+      [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
+
+
+ 		+ 
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+       [*] --> 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": "forest","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
+
+
+ +
+
+ 
+
+
+    [*] --> 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 --> [*]
+            }
+        }
+    }
+
+
+
+ 		+ 
+%%{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": "forest","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","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": "classic", "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": "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": "forest","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": "base","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": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    state if_state <>
+    [*] --> 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 <>
+    [*] --> 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 <>
+    [*] --> 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 <>
+      [*] --> IsPositive
+      IsPositive --> if_state
+      if_state --> False: if n < 0
+      if_state --> True : if n >= 0
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+ 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 --> [*]
+
+
+
+
+
+
+ 		+ 
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+   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: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
+   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: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+   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: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
+   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: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+   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
+
+
+
+
+ 		+ 
+%%{init: {"look": "classic", "theme": "default","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": "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
+     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": "neo", "theme": "base","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": "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
+    }
+
+
+ 		+ 
+%%{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": "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": "neo", "theme": "base","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": "classic", "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": "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": "forest","fontFamily": "Arial"} }%%
+     stateDiagram-v2
+   direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+
+ 		+ 
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+
+
Additional ContentNew content 1New content 2New content 3New content 4
+ + + + + +