|
|
|
@@ -111,51 +111,48 @@
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
stateId
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- Separator row -->
|
|
|
|
|
<tr class="separator">
|
|
|
|
|
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
|
|
|
@@ -166,55 +163,55 @@ stateDiagram-v2
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
|
|
|
|
|
state "description text" as s2
|
|
|
|
|
</pre>
|
|
|
|
|
state "description text" as s2
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s2
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s2
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s3
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s3
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s3
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s4
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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>
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
state "This is a state description" as s4
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- Separator row -->
|
|
|
|
|
<tr class="separator">
|
|
|
|
|
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
|
|
|
@@ -225,59 +222,55 @@ stateDiagram-v2
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
|
|
|
|
|
s2 : description text
|
|
|
|
|
</pre>
|
|
|
|
|
s2 : description text
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s21 : This is a state description
|
|
|
|
|
</pre>
|
|
|
|
|
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>
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s21 : This is a state description
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s22 : This is a state description
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s22 : This is a state description
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s22 : This is a state description
|
|
|
|
|
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s22 : This is a state description
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s23 : This is a state description
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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>
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s23 : This is a state description
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- Separator row -->
|
|
|
|
|
<tr class="separator">
|
|
|
|
|
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
|
|
|
@@ -290,69 +283,55 @@ stateDiagram-v2
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
|
|
|
|
|
s1 --> s2
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
s1 --> s2
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s31 --> s32
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s31 --> s32
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s31 --> s32
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s41 --> s42
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s51 --> s52
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s51 --> s52
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s61 --> s62
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
s61 --> s62
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- Separator row -->
|
|
|
|
|
<tr class="separator">
|
|
|
|
|
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
|
|
|
@@ -366,65 +345,51 @@ stateDiagram-v2
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
|
|
|
|
|
s1 --> s2: A transition
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
s1 --> s2: A transition
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a1 --> a2: A transition
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a1 --> a2: A transition
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a1 --> a2: A transition
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a3 --> a4: A transition
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a5 --> a6: A transition
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a5 --> a6: A transition
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a7 --> a8: A transition
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
|
|
|
|
|
%%{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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
stateDiagram-v2
|
|
|
|
|
a7 --> a8: A transition
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
@@ -1582,6 +1547,412 @@ direction LR
|
|
|
|
|
</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">
|
|
|
|
|
Flow chart Node
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start]
|
|
|
|
|
</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">
|
|
|
|
|
Flow chart Node, rounded
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
rounded(rounded)
|
|
|
|
|
</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">
|
|
|
|
|
Flow chart Nodes with Edges and labels
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] --Some text--> B(Continue)
|
|
|
|
|
</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">
|
|
|
|
|
Flow chart with polygon
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
A[Start] -->C{Evaluate}
|
|
|
|
|
C -- One --> D[Option 1]
|
|
|
|
|
C -- Two --> E[Option 2]
|
|
|
|
|
C -- Three --> F[fa:fa-car Option 3]
|
|
|
|
|
</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">
|
|
|
|
|
Flow chart with subgraph
|
|
|
|
|
</button>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="pre-scrollable">
|
|
|
|
|
<pre>
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</th>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram1" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram2" class="mermaid">
|
|
|
|
|
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "handdrawn", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<pre id="diagram3" class="mermaid">
|
|
|
|
|
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
|
|
|
|
|
flowchart LR
|
|
|
|
|
subgraph TOP
|
|
|
|
|
direction TB
|
|
|
|
|
subgraph B1
|
|
|
|
|
direction RL
|
|
|
|
|
i1 -->f1
|
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
A --> TOP --> B
|
|
|
|
|
B1 --> B2
|
|
|
|
|
</pre>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- Separator row -->
|
|
|
|
|
<tr class="separator">
|
|
|
|
|
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
|
|
|
|
</tr>
|
|
|
|
|
<!-- New row -->
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="vertical-header">Additional Content</th>
|
|
|
|
|
<td>New content 1</td>
|
|
|
|
|
<td>New content 2</td>
|
|
|
|
|
<td>New content 3</td>
|
|
|
|
|
<td>New content 4</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<!-- Separator row -->
|
|
|
|
|
<tr class="separator">
|
|
|
|
|
<td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
|
|
|
|
|