Added rendering of neo-style in state-refactor

cypress/platform/state-refactor.html

@@ -93,6 +93,7 @@
       <th></th> <!-- Placeholder for the top left corner -->
       <th>Dagre</th>
       <th>Dagre with rough</th>
+      <th>Dagre with neo</th>
       <th>ELK</th>
       <th>ELK with rough</th>
     </tr>
@@ -115,6 +116,14 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handdrawn"} }%%
+stateDiagram-v2
+    stateId
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     stateId
 
@@ -162,6 +171,13 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handdrawn"} }%%
+stateDiagram-v2
+    state "This is a state description" as s3
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
@@ -206,6 +222,14 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handdrawn"} }%%
+stateDiagram-v2
+    s22 : This is a state description
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -263,13 +287,23 @@ stateDiagram-v2
     s41 --> s42
 
 
+      </pre>
+      </td>
+      <td>
+          <pre id="diagram2" class="mermaid">
+  %%{init: {"look": "neo"} }%%
+
+     stateDiagram-v2
+      s51 --> s52
+
+
         </pre>
         </td>
         <td>
         <pre id="diagram3" class="mermaid">
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    s51 --> s52
+    s61 --> s62
 
 
       </pre>
@@ -278,7 +312,7 @@ stateDiagram-v2
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
-    s61 --> s62
+    s71 --> s72
 
 
       </pre>
@@ -321,13 +355,23 @@ stateDiagram-v2
     a3 --> a4: A transition
 
 
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+    a5 --> a6: A transition
+
+
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    a5 --> a6: A transition
+    a7 --> a8: A transition
 
 
       </pre>
@@ -336,7 +380,7 @@ stateDiagram-v2
         <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
-   a7 --> a8: A transition
+   a9 --> a10: A transition
 
 
       </pre>
@@ -382,6 +426,17 @@ stateDiagram-v2
     test --> [*]
 
 
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
       </pre>
       </td>
       <td>
@@ -454,6 +509,20 @@ stateDiagram-v2
     }
 
 
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
       </pre>
       </td>
       <td>
@@ -567,6 +636,31 @@ stateDiagram-v2
 
 
 
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+
       </pre>
       </td>
       <td>
@@ -697,6 +791,30 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
+          <pre id="diagram2" class="mermaid">
+  %%{init: {"look": "neo"} }%%
+
+     stateDiagram-v2
+     [*] --> B1
+      B1 --> B2
+      B1 --> B3
+
+      state B1 {
+          [*] --> B11
+          B11 --> [*]
+      }
+      state B2 {
+          [*] --> B22
+          B22 --> [*]
+      }
+      state B3 {
+          [*] --> B33
+          B33 --> [*]
+      }
+        </pre>
+        </td>
+        <td>
+
         <pre id="diagram3" class="mermaid">
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
@@ -785,6 +903,18 @@ stateDiagram-v2
         <pre id="diagram2" class="mermaid">
 %%{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
+      </pre>
+      </td>
+        <td>
+          <pre id="diagram2" class="mermaid">
+  %%{init: {"look": "neo"} }%%
+
      stateDiagram-v2
      state if_state <<choice>>
       [*] --> IsPositive
@@ -865,6 +995,23 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{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 --> [*]
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -955,6 +1102,19 @@ stateDiagram-v2
       <td>
         <pre id="diagram2" class="mermaid">
 %%{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.
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -1055,6 +1215,27 @@ state Active {
      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
+    }
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
     state Active {
         [*] --> NumLockOff
         NumLockOff --> NumLockOn : EvNumLockPressed
@@ -1160,6 +1341,21 @@ direction LR
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handdrawn"} }%%
      stateDiagram-v2
+   direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo"} }%%
+     stateDiagram-v2
    direction LR
     [*] --> D1
     D1 --> D2