marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 23:09:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

MC-1765 WIP Added test-grid for states

Browse Source
This commit is contained in:
Per Brolin
2024-06-18 14:58:34 +02:00
parent ace39a2154
commit 444bad5f20
1 changed files with 395 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

596
cypress/platform/neo-test.html
View File

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