diff --git a/cypress/platform/state-refactor-neo-themes.html b/cypress/platform/state-refactor-neo-themes.html
index c3145f316..e5e366ebb 100644
--- a/cypress/platform/state-refactor-neo-themes.html
+++ b/cypress/platform/state-refactor-neo-themes.html
@@ -109,21 +109,21 @@
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "classic", "theme": "default"} }%%
+%%{init: {"look": "classic", "theme": "default", "fontFamily": "Arial"} }%%
 stateDiagram-v2
     stateId
       </pre>
       </td>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
 stateDiagram-v2
     stateId
       </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 stateDiagram-v2
     stateId
 
@@ -131,7 +131,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 stateDiagram-v2
     stateId
 
@@ -139,7 +139,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
     stateId
 
@@ -165,28 +165,35 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    state "This is a state description" as s2
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
 stateDiagram-v2
     state "This is a state description" as s2
       </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
     state "This is a state description" as s4
       </pre>
@@ -210,14 +217,21 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-          %%{init: {"look": "neo", "theme": "neo"} }%%
+          %%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s21 : This is a state description
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+          %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s21 : This is a state description
       </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -225,7 +239,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -233,7 +247,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s23 : This is a state description
 
@@ -262,7 +276,15 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    s31 --> s32
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
     s31 --> s32
 
@@ -270,7 +292,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     s41 --> s42
@@ -280,7 +302,7 @@ stateDiagram-v2
       </td>
       <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
      stateDiagram-v2
       s51 --> s52
@@ -290,7 +312,7 @@ stateDiagram-v2
         </td>
         <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s61 --> s62
 
@@ -323,7 +345,15 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    a1 --> a2: A transition
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
     a1 --> a2: A transition
 
@@ -331,7 +361,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     a3 --> a4: A transition
@@ -341,7 +371,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     a5 --> a6: A transition
@@ -351,7 +381,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
     a7 --> a8: A transition
 
@@ -384,7 +414,16 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
        [*] --> test
     test --> [*]
@@ -393,7 +432,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
        [*] --> test
@@ -404,7 +443,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
        [*] --> test
@@ -415,7 +454,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
        [*] --> test
     test --> [*]
@@ -451,7 +490,19 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
        [*] --> First
     state First {
@@ -463,7 +514,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
        [*] --> First
@@ -477,7 +528,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
        [*] --> First
@@ -491,7 +542,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 stateDiagram-v2
        [*] --> First
     state First {
@@ -544,7 +595,30 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
     [*] --> Level1
 
@@ -567,7 +641,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -592,7 +666,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -614,7 +688,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -673,7 +747,29 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{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 --> [*]
+    }
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
     [*] --> B1
     B1 --> B2
@@ -695,7 +791,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
    [*] --> B1
@@ -718,7 +814,7 @@ stateDiagram-v2
       </td>
       <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
      stateDiagram-v2
      [*] --> B1
@@ -742,7 +838,7 @@ stateDiagram-v2
         <td>
 
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
  stateDiagram-v2
   [*] --> B1
     B1 --> B2
@@ -795,7 +891,18 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{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
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
     stateDiagram-v2
     state if_state <<choice>>
     [*] --> IsPositive
@@ -806,7 +913,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
    state if_state <<choice>>
@@ -818,7 +925,7 @@ stateDiagram-v2
       </td>
         <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
 
      stateDiagram-v2
      state if_state <<choice>>
@@ -830,7 +937,7 @@ stateDiagram-v2
         </td>
         <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
  stateDiagram-v2
    state if_state <<choice>>
     [*] --> IsPositive
@@ -873,7 +980,24 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{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 --> [*]
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -890,7 +1014,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -907,7 +1031,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -924,7 +1048,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -968,7 +1092,21 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{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.
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
    stateDiagram-v2
      TN1: The state with a note
         note right of TN1
@@ -982,7 +1120,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -995,7 +1133,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -1008,7 +1146,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
    stateDiagram-v2
      TN5: The state with a note
         note right of TN5
@@ -1058,7 +1196,29 @@ state Active {
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{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
+    }
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1080,7 +1240,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1101,7 +1261,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1122,7 +1282,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1174,7 +1334,22 @@ direction LR
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{init: {"look": "neo", "theme": "neo"} }%%
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram1" class="mermaid">
+%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1189,7 +1364,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark"} }%%
+%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
      stateDiagram-v2
    direction LR
     [*] --> D1
@@ -1204,7 +1379,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "forest"} }%%
+%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
      stateDiagram-v2
    direction LR
     [*] --> D1
@@ -1219,7 +1394,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base"} }%%
+%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1