marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-08 08:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update testing html files

Browse Source
This commit is contained in:
yari-dewalt
2024-11-14 10:35:03 -08:00
parent 45d8a815dc
commit 1598ac713f
2 changed files with 465 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,6 +113,402 @@
<th>handdrawn-default</th> <th>handdrawn-default</th>
<th>classic-default</th> <th>classic-default</th>
</tr> </tr>
<tr>
<th class="vertical-header">
<button class="collapsible">Simple classNode</button>
<div class="content">
<div class="pre-scrollable">
<pre>
classNode
</pre
>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
classDiagram
class classNode
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
classDiagram
class classNode
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classNode
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
classDiagram
class classNode
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classNode
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classNode
</pre
>
</td>
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">Filled classNode</button>
<div class="content">
<div class="pre-scrollable">
<pre>
Filled classNode
</pre
>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
classDiagram
class classNode {
+int number
method()
}
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
classDiagram
class classNode {
+int number
method()
}
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classNode {
+int number
method()
}
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
classDiagram
class classNode {
+int number
method()
}
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classNode {
+int number
method()
}
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classNode {
+int number
method()
}
</pre
>
</td>
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">Class with relation</button>
<div class="content">
<div class="pre-scrollable">
<pre>
classA --> classB
</pre
>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
classDiagram
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
classA --> classB
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
classDiagram
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
classA --> classB
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
classA --> classB
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
classDiagram
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
classA --> classB
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
classA --> classB
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
classA --> classB
</pre
>
</td>
</tr>
<tr>
<th class="vertical-header">
<button class="collapsible">Full class diagram</button>
<div class="content">
<div class="pre-scrollable">
<pre>
nameSpace { classA --> classB } note
</pre
>
</div>
</div>
</th>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "neo", "fontFamily": "Arial"} }%%
classDiagram
namespace myNamespace {
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
}
classA "1" o--> "*" classB : label
note for classB "This is a note for classB"
</pre>
</td>
<td>
<pre id="diagram1" class="mermaid">
%%{init: {"look": "neo", "theme": "dark","fontFamily": "Arial"} }%%
classDiagram
namespace myNamespace {
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
}
classA "1" o--> "*" classB : label
note for classB "This is a note for classB"
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
namespace myNamespace {
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
}
classA "1" o--> "*" classB : label
note for classB "This is a note for classB"
</pre
>
</td>
<td>
<pre id="diagram2" class="mermaid">
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial"} }%%
classDiagram
namespace myNamespace {
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
}
classA "1" o--> "*" classB : label
note for classB "This is a note for classB"
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "handDrawn", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
namespace myNamespace {
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
}
classA "1" o--> "*" classB : label
note for classB "This is a note for classB"
</pre
>
</td>
<td>
<pre id="diagram3" class="mermaid">
%%{init: {"look": "classic", "theme": "default","fontFamily": "Arial"} }%%
classDiagram
namespace myNamespace {
class classA {
+int number
method()
}
class classB {
+int number
-string text
method()
another_method()
}
}
classA "1" o--> "*" classB : label
note for classB "This is a note for classB"
</pre
>
</td>
</tr>
<tr> <tr>
<th class="vertical-header"> <th class="vertical-header">
<button class="collapsible">Simple State (only id)</button> <button class="collapsible">Simple State (only id)</button>

70
cypress/platform/size-tester.html
View File

@@ -54,6 +54,9 @@
//layout: 'elk', //layout: 'elk',
fontFamily: 'Kalam', fontFamily: 'Kalam',
logLevel: 1, logLevel: 1,
class: {
hideEmptyMembersBox: true,
},
}); });
let shape = 'circle'; let shape = 'circle';
@@ -70,6 +73,41 @@
n84@{ shape: '${shape}'} n84@{ shape: '${shape}'}
`; `;
let code2 = `
classDiagram
class class1 {
int num
string test
string test
string test
string test
string test
method()
}
class class2 {
int num
string test
string test
string test
string test
string test
method()
method()
}
class class3 {
int test
}
<<interface>> class3
class class4 {
int[] id
method()
method()
method()
method()
}
<<interface>> class4
`;
let positions = { let positions = {
edges: {}, edges: {},
nodes: { nodes: {
@@ -104,7 +142,37 @@
}, },
}; };
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions); let positions2 = {
edges: {},
nodes: {
class1: {
x: 0,
y: 10,
width: 100,
height: 400,
},
class2: {
x: -300,
y: 100,
width: 100,
height: 0,
},
class3: {
x: 400,
y: 10,
width: 0,
height: 0,
},
class4: {
x: 800,
y: 10,
width: 0,
height: 0,
},
},
};
const { svg } = await mermaid.render('the-id-of-the-svg', code2, undefined, positions2);
const elem = document.querySelector('#diagram'); const elem = document.querySelector('#diagram');
elem.innerHTML = svg; elem.innerHTML = svg;
</script> </script>