MC-1765 WIP Added test-grid for states

cypress/platform/neo-test.html

@@ -95,9 +95,8 @@
       <th>neo-dark</th>
       <th>neo-default</th>
       <th>neo-forest</th>
-      <th>handdrawn</th>
+      <th>handdrawn-default</th>
       <th>classic-default</th>
-      <th></th>
     </tr>
     <tr>
       <th class="vertical-header">
@@ -108,6 +107,7 @@
               stateId
             </pre>
           </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -174,21 +174,21 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    state "This is a state description" as s2
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
@@ -202,7 +202,14 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    state "This is a state description" as s4
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
     state "This is a state description" as s4
       </pre>
@@ -224,23 +231,23 @@ stateDiagram-v2
           </div>
         </div>
       </th>
-      <td>
-        <pre id="diagram1" class="mermaid">
-          %%{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="diagram1" class="mermaid">
+          %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s21 : This is a state description
       </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -256,13 +263,20 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s23 : This is a state description
 
       </pre>
       </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s23 : This is a state description
 
+      </pre>
+      </td>
     </tr>
     <!-- Separator row -->
     <tr class="separator">
@@ -285,14 +299,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -300,8 +306,16 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    s31 --> s32
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     s41 --> s42
@@ -321,7 +335,16 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    s61 --> s62
+
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
     s61 --> s62
 
@@ -329,14 +352,12 @@ stateDiagram-v2
       </pre>
       </td>
 
-
     </tr>
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-    </tr>
     <tr>
       <th class="vertical-header">
         <button class="collapsible">
@@ -354,14 +375,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -369,8 +382,16 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    a1 --> a2: A transition
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     a3 --> a4: A transition
@@ -390,21 +411,28 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
     a7 --> a8: A transition
 
 
       </pre>
       </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+    a7 --> a8: A transition
 
+
+      </pre>
+      </td>
     </tr>
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-    </tr>
     <tr>
       <th class="vertical-header">
         <button class="collapsible">
@@ -423,15 +451,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -440,8 +459,17 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
        [*] --> test
@@ -463,7 +491,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
        [*] --> test
     test --> [*]
@@ -472,13 +500,22 @@ stateDiagram-v2
       </pre>
       </td>
 
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
+      </pre>
+      </td>
     </tr>
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-    </tr>
     <tr>
       <th class="vertical-header">
         <button class="collapsible">
@@ -499,18 +536,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -522,8 +547,20 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
        [*] --> First
@@ -551,7 +588,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
 stateDiagram-v2
        [*] --> First
     state First {
@@ -562,15 +599,24 @@ stateDiagram-v2
 
       </pre>
       </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
+stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
 
+
+      </pre>
+      </td>
     </tr>
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
-
-
-    </tr>
     <tr>
       <th class="vertical-header">
         <button class="collapsible">
@@ -604,29 +650,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -649,8 +672,31 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
+    stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -697,7 +743,29 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -756,28 +824,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -799,8 +845,30 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{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 --> [*]
+    }
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
    [*] --> B1
@@ -847,7 +915,7 @@ stateDiagram-v2
       <td>
 
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
  stateDiagram-v2
   [*] --> B1
     B1 --> B2
@@ -868,14 +936,36 @@ stateDiagram-v2
 
       </pre>
       </td>
+      <td>
 
+        <pre id="diagram3" class="mermaid">
+%%{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>
     </tr>
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-
     <tr>
       <th class="vertical-header">
         <button class="collapsible">
@@ -890,27 +980,12 @@ stateDiagram-v2
               IsPositive --> if_state
               if_state --> False: if n < 0
               if_state --> True : if n >= 0
-
-
-
-
             </pre>
           </div>
         </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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>>
@@ -921,8 +996,19 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{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
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
 
    stateDiagram-v2
    state if_state <<choice>>
@@ -946,7 +1032,18 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{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
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
  stateDiagram-v2
    state if_state <<choice>>
     [*] --> IsPositive
@@ -955,7 +1052,6 @@ stateDiagram-v2
     if_state --> True : if n >= 0
       </pre>
       </td>
-
     </tr>
     <!-- Separator row -->
     <tr class="separator">
@@ -989,23 +1085,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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>>
@@ -1022,7 +1101,7 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
@@ -1040,6 +1119,23 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
+%%{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 --> [*]
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
@@ -1057,7 +1153,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -1072,7 +1168,23 @@ stateDiagram-v2
 
       </pre>
       </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{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>
     </tr>
     <!-- Separator row -->
     <tr class="separator">
@@ -1101,20 +1213,6 @@ stateDiagram-v2
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -1128,8 +1226,22 @@ stateDiagram-v2
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{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.
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -1155,7 +1267,21 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{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.
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
    stateDiagram-v2
      TN5: The state with a note
         note right of TN5
@@ -1205,28 +1331,6 @@ state Active {
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -1248,11 +1352,33 @@ state Active {
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{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
+    }
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
     state Active {
         [*] --> NumLockOff
         NumLockOff --> NumLockOn : EvNumLockPressed
@@ -1291,7 +1417,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1312,6 +1438,28 @@ state Active {
       </pre>
       </td>
 
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{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>
     </tr>
 
 
@@ -1343,21 +1491,6 @@ direction LR
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
-%%{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
@@ -1372,7 +1505,7 @@ direction LR
       </pre>
       </td>
       <td>
-        <pre id="diagram2" class="mermaid">
+        <pre id="diagram1" class="mermaid">
 %%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
      stateDiagram-v2
     direction LR
@@ -1388,6 +1521,21 @@ direction LR
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
+%%{init: {"look": "neo", "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="diagram2" class="mermaid">
 %%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
      stateDiagram-v2
    direction LR
@@ -1403,7 +1551,22 @@ direction LR
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"look": "neo", "theme": "base","fontFamily": "Arial"} }%%
+%%{init: {"look": "handdrawn", "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="diagram3" class="mermaid">
+%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1416,7 +1579,6 @@ direction LR
     D2 --> D4
       </pre>
       </td>
-
     </tr>