marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-12 08:44:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

MC-1765: Added column for classic, default as comparison

Browse Source
This commit is contained in:
Per Brolin
2024-06-14 15:29:08 +02:00
parent 2f6d728123
commit 582035ef9b
1 changed files with 232 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
cypress/platform/state-refactor-neo-themes.html
View File

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