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

#5237 Fix eslint error

Browse Source
This commit is contained in:
Ashish Jain
2024-06-13 14:10:58 +02:00
parent a6dc1eaa40
commit a5281e0464
3 changed files with 805 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
cypress/platform/flowchart-refactor.html
View File

@@ -1,19 +1,33 @@
<html> <html>
<head>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" /> rel="stylesheet"
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" /> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link <link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet" /> rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" />
rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
@@ -69,7 +83,7 @@
} }
.active:after { .active:after {
content: "\2212"; content: '\2212';
} }
.content { .content {
@@ -85,12 +99,13 @@
overflow-y: scroll; overflow-y: scroll;
} }
</style> </style>
</head> </head>
<body> <body>
<table> <table>
<tr> <tr>
<th></th> <!-- Placeholder for the top left corner --> <th></th>
<!-- Placeholder for the top left corner -->
<th>Dagre</th> <th>Dagre</th>
<th>Dagre with rough</th> <th>Dagre with rough</th>
<th>ELK</th> <th>ELK</th>
@@ -104,8 +119,9 @@
<pre> <pre>
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</pre
</pre> >
</div>
</div> </div>
</th> </th>
<td> <td>
@@ -113,39 +129,38 @@
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</pre
>
</pre>
</td> </td>
<td> <td>
<pre id="diagram3" class="mermaid"> <pre id="diagram3" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</pre
>
</pre>
</td> </td>
<td> <td>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</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>
@@ -156,40 +171,47 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram5" class="mermaid"> <pre id="diagram5" class="mermaid">
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram6" class="mermaid"> <pre id="diagram6" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram7" class="mermaid"> <pre id="diagram7" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram8" class="mermaid"> <pre id="diagram8" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</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>
@@ -200,40 +222,47 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1[(Database)] id1[(Database)]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram9" class="mermaid"> <pre id="diagram9" class="mermaid">
flowchart LR flowchart LR
id1[(Database)] id1[(Database)]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram10" class="mermaid"> <pre id="diagram10" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1[(Database)] id1[(Database)]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram11" class="mermaid"> <pre id="diagram11" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1[(Database)] id1[(Database)]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram12" class="mermaid"> <pre id="diagram12" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1[(Database)] id1[(Database)]
</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>
@@ -244,40 +273,47 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram13" class="mermaid"> <pre id="diagram13" class="mermaid">
flowchart LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram14" class="mermaid"> <pre id="diagram14" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram15" class="mermaid"> <pre id="diagram15" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram16" class="mermaid"> <pre id="diagram16" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
</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>
@@ -288,40 +324,47 @@ flowchart LR
<pre> <pre>
flowchart TD flowchart TD
id1(((This is the text in the circle))) id1(((This is the text in the circle)))
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram17" class="mermaid"> <pre id="diagram17" class="mermaid">
flowchart TD flowchart TD
id1(((This is the text in the circle))) id1(((This is the text in the circle)))
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram18" class="mermaid"> <pre id="diagram18" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart TD flowchart TD
id1(((This is the text in the circle))) id1(((This is the text in the circle)))
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram19" class="mermaid"> <pre id="diagram19" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart TD flowchart TD
id1(((This is the text in the circle))) id1(((This is the text in the circle)))
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram20" class="mermaid"> <pre id="diagram20" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart TD flowchart TD
id1(((This is the text in the circle))) id1(((This is the text in the circle)))
</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>
@@ -332,40 +375,47 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram21" class="mermaid"> <pre id="diagram21" class="mermaid">
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram22" class="mermaid"> <pre id="diagram22" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram23" class="mermaid"> <pre id="diagram23" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram24" class="mermaid"> <pre id="diagram24" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
</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>
@@ -376,40 +426,47 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram25" class="mermaid"> <pre id="diagram25" class="mermaid">
flowchart LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram26" class="mermaid"> <pre id="diagram26" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram27" class="mermaid"> <pre id="diagram27" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram28" class="mermaid"> <pre id="diagram28" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
</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>
@@ -420,40 +477,39 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram29" class="mermaid"> <pre id="diagram29" class="mermaid">
flowchart LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
</pre> </pre
</td> >
<td>
<pre id="diagram30" class="mermaid">
%%{init: {"look": "handdrawn"} }%%
flowchart LR
id1{{This is the text in the box}}
</pre>
</td> </td>
<td> <td>
<pre id="diagram31" class="mermaid"> <pre id="diagram31" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram32" class="mermaid"> <pre id="diagram32" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
</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>
@@ -464,40 +520,47 @@ flowchart LR
<pre> <pre>
flowchart TD flowchart TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram33" class="mermaid"> <pre id="diagram33" class="mermaid">
flowchart TD flowchart TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram34" class="mermaid"> <pre id="diagram34" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart TD flowchart TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram35" class="mermaid"> <pre id="diagram35" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart TD flowchart TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram36" class="mermaid"> <pre id="diagram36" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart TD flowchart TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
</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>
@@ -508,28 +571,33 @@ flowchart LR
<pre> <pre>
flowchart TD flowchart TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram37" class="mermaid"> <pre id="diagram37" class="mermaid">
flowchart TD flowchart TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram38" class="mermaid"> <pre id="diagram38" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart TD flowchart TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram39" class="mermaid"> <pre id="diagram39" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart TD flowchart TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram40" class="mermaid"> <pre id="diagram40" class="mermaid">
@@ -537,12 +605,14 @@ flowchart LR
flowchart TD flowchart TD
id1[\This is the text in the box\] id1[\This is the text in the box\]
</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>
@@ -553,40 +623,47 @@ flowchart LR
<pre> <pre>
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram41" class="mermaid"> <pre id="diagram41" class="mermaid">
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram42" class="mermaid"> <pre id="diagram42" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram43" class="mermaid"> <pre id="diagram43" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram44" class="mermaid"> <pre id="diagram44" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
</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>
@@ -597,40 +674,47 @@ flowchart LR
<pre> <pre>
flowchart TD flowchart TD
A[\Christmas/] A[\Christmas/]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram45" class="mermaid"> <pre id="diagram45" class="mermaid">
flowchart TD flowchart TD
A[\Christmas/] A[\Christmas/]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram46" class="mermaid"> <pre id="diagram46" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart TD flowchart TD
A[\Christmas/] A[\Christmas/]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram47" class="mermaid"> <pre id="diagram47" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart TD flowchart TD
A[\Christmas/] A[\Christmas/]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram48" class="mermaid"> <pre id="diagram48" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart TD flowchart TD
A[\Christmas/] A[\Christmas/]
</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>
@@ -641,40 +725,47 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram49" class="mermaid"> <pre id="diagram49" class="mermaid">
flowchart LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram50" class="mermaid"> <pre id="diagram50" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram51" class="mermaid"> <pre id="diagram51" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram52" class="mermaid"> <pre id="diagram52" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
</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>
@@ -685,52 +776,55 @@ flowchart LR
<pre> <pre>
flowchart LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
<pre id="diagram53" class="mermaid"> <pre id="diagram53" class="mermaid">
flowchart LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram54" class="mermaid"> <pre id="diagram54" class="mermaid">
%%{init: {"look": "handdrawn"} }%% %%{init: {"look": "handdrawn"} }%%
flowchart LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram55" class="mermaid"> <pre id="diagram55" class="mermaid">
%%{init: {"handdrawn": false, "layout": "elk"} }%% %%{init: {"handdrawn": false, "layout": "elk"} }%%
flowchart LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram56" class="mermaid"> <pre id="diagram56" class="mermaid">
%%{init: {"look": "handdrawn", "layout": "elk"} }%% %%{init: {"look": "handdrawn", "layout": "elk"} }%%
flowchart LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
</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>
</table> </table>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs'; import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts); mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {};
};
mermaid.initialize({ mermaid.initialize({
handdrawn: false, handdrawn: false,
@@ -755,21 +849,18 @@ flowchart LR
console.error(err); console.error(err);
}; };
let coll = document.getElementsByClassName('collapsible');
let coll = document.getElementsByClassName("collapsible");
for (const element of coll) { for (const element of coll) {
element.addEventListener("click", function () { element.addEventListener('click', function () {
this.classList.toggle("active"); this.classList.toggle('active');
let content = this.nextElementSibling; let content = this.nextElementSibling;
if (content.style.maxHeight) { if (content.style.maxHeight) {
content.style.maxHeight = null; content.style.maxHeight = null;
} else { } else {
content.style.maxHeight = content.scrollHeight + "px"; content.style.maxHeight = content.scrollHeight + 'px';
} }
}); });
} }
</script> </script>
</body> </body>
</html> </html>

72
cypress/platform/flowchart-sate.html
View File

@@ -1,19 +1,33 @@
<html> <html>
<head>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" /> rel="stylesheet"
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" /> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link <link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet" /> rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" />
rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
@@ -69,7 +83,7 @@
} }
.active:after { .active:after {
content: "\2212"; content: '\2212';
} }
.content { .content {
@@ -85,12 +99,13 @@
overflow-y: scroll; overflow-y: scroll;
} }
</style> </style>
</head> </head>
<body> <body>
<table> <table>
<tr> <tr>
<th></th> <!-- Placeholder for the top left corner --> <th></th>
<!-- Placeholder for the top left corner -->
<th>State rough</th> <th>State rough</th>
<th>Flowchart rough</th> <th>Flowchart rough</th>
</tr> </tr>
@@ -103,7 +118,9 @@
flowchart LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
</pre> </pre
>
</div>
</div> </div>
</th> </th>
<td> <td>
@@ -112,7 +129,8 @@
stateDiagram-v2 stateDiagram-v2
stateA stateA
</pre> </pre
>
</td> </td>
<td> <td>
<pre id="diagram2" class="mermaid"> <pre id="diagram2" class="mermaid">
@@ -121,22 +139,17 @@ flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
</pre> </pre
>
</td> </td>
</tr> </tr>
</table> </table>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs'; import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts); mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {};
};
mermaid.initialize({ mermaid.initialize({
handdrawn: false, handdrawn: false,
@@ -161,21 +174,18 @@ flowchart LR
console.error(err); console.error(err);
}; };
let coll = document.getElementsByClassName('collapsible');
let coll = document.getElementsByClassName("collapsible");
for (const element of coll) { for (const element of coll) {
element.addEventListener("click", function () { element.addEventListener('click', function () {
this.classList.toggle("active"); this.classList.toggle('active');
let content = this.nextElementSibling; let content = this.nextElementSibling;
if (content.style.maxHeight) { if (content.style.maxHeight) {
content.style.maxHeight = null; content.style.maxHeight = null;
} else { } else {
content.style.maxHeight = content.scrollHeight + "px"; content.style.maxHeight = content.scrollHeight + 'px';
} }
}); });
} }
</script> </script>
</body> </body>
</html> </html>

1
cypress/platform/state-refactor.html
View File

@@ -105,6 +105,7 @@
stateId stateId
</pre> </pre>
</div> </div>
</div>
</th> </th>
<td> <td>
<pre id="diagram1" class="mermaid"> <pre id="diagram1" class="mermaid">