mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
#5237 added state refactor test page
This commit is contained in:
Ashish Jain
parent
94bb43907d
commit
f480fb7c85
@ -17,88 +17,73 @@
|
||||
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
/* Makes the table take full width */
|
||||
border-collapse: collapse;
|
||||
/* Removes space between borders */
|
||||
table-layout: fixed;
|
||||
/* Ensures that columns have consistent width */
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
/* Adds border to cells */
|
||||
padding: 10px;
|
||||
/* Adds padding inside cells */
|
||||
text-align: center;
|
||||
/* Centers text in cells */
|
||||
vertical-align: middle;
|
||||
/* Aligns content vertically in the middle */
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 20px;
|
||||
/* Height of the separator row */
|
||||
background-color: #f0f0f0;
|
||||
/* Light gray background for the separator */
|
||||
}
|
||||
|
||||
.vertical-header {
|
||||
/* writing-mode: vertical-rl; */
|
||||
/* Rotates text for vertical headers */
|
||||
text-align: center;
|
||||
/* Centers the rotated text */
|
||||
/* transform: rotate(180deg); */
|
||||
/* Corrects the orientation of the text */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
.collapsible {
|
||||
background-color: #f9f9f9;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
padding: 18px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
.active,
|
||||
.collapsible:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
background-color: #efefef;
|
||||
background-image: radial-gradient(#fff 51%, transparent 91%),
|
||||
radial-gradient(#fff 51%, transparent 91%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-repeat: repeat;
|
||||
.collapsible:after {
|
||||
content: '\002B';
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
.active:after {
|
||||
content: "\2212";
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
.content {
|
||||
padding: 0 5px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.content .pre-scrollable {
|
||||
max-height: 200px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -112,12 +97,14 @@
|
||||
<th>ELK with rough</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">Simple State (only id)
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">Simple State (only id)</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
stateId
|
||||
</pre>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -155,13 +142,16 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">State with description with `as` keyword
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">State with description with `as` keyword</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
state "description text" as s2
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -196,13 +186,16 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">State with description with `:` syntax
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">State with description with `:` syntax</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
s2 : description text
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -239,15 +232,20 @@ stateDiagram-v2
|
||||
<tr class="separator">
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">State with transition
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
State with transition
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
s1 --> s2
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -292,15 +290,20 @@ stateDiagram-v2
|
||||
</tr>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">State transition with label
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
State transition with label
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
s1 --> s2: A transition
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -344,17 +347,22 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">Start & End
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Start & End
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
[*] --> test
|
||||
test --> [*]
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -402,12 +410,15 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">Composite state
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Composite state
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
[*] --> First
|
||||
state First {
|
||||
@ -416,6 +427,8 @@ stateDiagram-v2
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -476,14 +489,17 @@ stateDiagram-v2
|
||||
</tr>
|
||||
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">Nested Composite state
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Nested Composite state
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
|
||||
|
||||
[*] --> Level1
|
||||
|
||||
state Level1 {
|
||||
@ -502,6 +518,8 @@ stateDiagram-v2
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -602,11 +620,14 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="vertical-header">Composite state with transition
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Composite state with transition
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
[*] --> B1
|
||||
B1 --> B2
|
||||
B1 --> B3
|
||||
@ -627,6 +648,8 @@ stateDiagram-v2
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -725,11 +748,15 @@ stateDiagram-v2
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<th class="vertical-header">Choice
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
|
||||
Choice
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
state if_state <<choice>>
|
||||
[*] --> IsPositive
|
||||
IsPositive --> if_state
|
||||
@ -740,6 +767,8 @@ stateDiagram-v2
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -792,11 +821,14 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="vertical-header">Fork & Join
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Fork & Join
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
fork_state --> State2
|
||||
@ -811,6 +843,8 @@ stateDiagram-v2
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -885,11 +919,14 @@ stateDiagram-v2
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th class="vertical-header">Notes
|
||||
<br />
|
||||
<br />
|
||||
<pre>
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Notes
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
|
||||
TN1: The state with a note
|
||||
note right of TN1
|
||||
@ -899,6 +936,8 @@ stateDiagram-v2
|
||||
note left of TN2 : note text
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
@ -954,6 +993,217 @@ 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>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible">
|
||||
Concurrent states
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
[*] --> 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>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
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: {"handdrawn": true} }%%
|
||||
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="diagram3" class="mermaid">
|
||||
%%{init: {"handdrawn": false, "layout": "elk"} }%%
|
||||
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="diagram4" class="mermaid">
|
||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
||||
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>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
Directions
|
||||
</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre>
|
||||
direction LR
|
||||
[*] --> D1
|
||||
D1 --> D2
|
||||
D2 --> D3
|
||||
state D3 {
|
||||
direction TB
|
||||
D11 --> D22
|
||||
}
|
||||
D2 --> D4
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<pre id="diagram1" class="mermaid">
|
||||
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: {"handdrawn": true} }%%
|
||||
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: {"handdrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> D1
|
||||
D1 --> D2
|
||||
D2 --> D3
|
||||
state D3 {
|
||||
direction TB
|
||||
D11 --> D22
|
||||
}
|
||||
D2 --> D4
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> D1
|
||||
D1 --> D2
|
||||
D2 --> D3
|
||||
state D3 {
|
||||
direction TB
|
||||
D11 --> D22
|
||||
}
|
||||
D2 --> D4
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Separator row -->
|
||||
<tr class="separator">
|
||||
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
||||
@ -997,6 +1247,20 @@ stateDiagram-v2
|
||||
console.error(err);
|
||||
};
|
||||
|
||||
|
||||
var coll = document.getElementsByClassName("collapsible");
|
||||
for (var i = 0; i < coll.length; i++) {
|
||||
coll[i].addEventListener("click", function () {
|
||||
this.classList.toggle("active");
|
||||
var content = this.nextElementSibling;
|
||||
if (content.style.maxHeight) {
|
||||
content.style.maxHeight = null;
|
||||
} else {
|
||||
content.style.maxHeight = content.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user