mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-20 15:59:51 +02:00
WIP Merge in latest
This commit is contained in:
Knut Sveidqvist
@@ -132,3 +132,10 @@ export const verifyScreenshot = (name: string): void => {
|
||||
cy.matchImageSnapshot(name);
|
||||
}
|
||||
};
|
||||
|
||||
export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
|
||||
expect(value).to.be.within(
|
||||
expected * (1 - deltaPercent / 100),
|
||||
expected * (1 + deltaPercent / 100)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
|
||||
import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
|
||||
|
||||
describe('Flowchart ELK', () => {
|
||||
it('1-elk: should render a simple flowchart', () => {
|
||||
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
|
||||
const style = svg.attr('style');
|
||||
expect(style).to.match(/^max-width: [\d.]+px;$/);
|
||||
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
|
||||
expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
|
||||
verifyNumber(maxWidthValue, 380);
|
||||
});
|
||||
});
|
||||
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
|
||||
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
|
||||
const width = parseFloat(svg.attr('width'));
|
||||
// use within because the absolute value can be slightly different depending on the environment ±5%
|
||||
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
|
||||
expect(width).to.be.within(230 * 0.95, 230 * 1.05);
|
||||
verifyNumber(width, 380);
|
||||
expect(svg).to.not.have.attr('style');
|
||||
});
|
||||
});
|
||||
@@ -692,7 +692,7 @@ A --> B
|
||||
{}
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
const edges = svg.querySelectorAll('.edges > path');
|
||||
const edges = svg[0].querySelectorAll('.edges > path');
|
||||
edges.forEach((edge) => {
|
||||
expect(edge).to.have.class('flowchart-link');
|
||||
});
|
||||
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
|
||||
{ flowchart: { titleTopMargin: 0 } }
|
||||
);
|
||||
});
|
||||
it('Wrapping long text with a new line', () => {
|
||||
it.skip('Wrapping long text with a new line', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{init: {"flowchart": {"htmlLabels": true}} }%%
|
||||
flowchart-elk LR
|
||||
@@ -841,7 +841,7 @@ end
|
||||
{ flowchart: { titleTopMargin: 0 } }
|
||||
);
|
||||
});
|
||||
it('Sub graphs and markdown strings', () => {
|
||||
it('Sub graphs', () => {
|
||||
imgSnapshotTest(
|
||||
`---
|
||||
config:
|
||||
|
||||
@@ -1076,4 +1076,41 @@ end
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('New @ sytax for node metadata edge cases', () => {
|
||||
it('should be possible to use @ syntax to add labels on multi nodes', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should be possible to use @ syntax to add labels with trail spaces', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TB
|
||||
n2["label for n2"]
|
||||
n4@{ label: "labe for n4"}
|
||||
n5@{ label: "labe for n5"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should be possible to use @ syntax to add labels with trail spaces and edge/link', () => {
|
||||
imgSnapshotTest(
|
||||
`flowchart TD
|
||||
A["A"] --> B["for B"] & C@{ label: "for c"} & E@{label : "for E"}
|
||||
D@{label: "for D"}
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -460,7 +460,7 @@ stateDiagram-v2
|
||||
[*] --> State1
|
||||
State1 --> [*]
|
||||
`,
|
||||
{ state: { useMaxWidth: true } }
|
||||
{ state: { useMaxWidth: true }, look: 'classic' }
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
expect(svg).to.have.attr('width', '100%');
|
||||
@@ -482,7 +482,7 @@ stateDiagram-v2
|
||||
[*] --> State1
|
||||
State1 --> [*]
|
||||
`,
|
||||
{ state: { useMaxWidth: false } }
|
||||
{ state: { useMaxWidth: false }, look: 'classic' }
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
// const height = parseFloat(svg.attr('height'));
|
||||
|
||||
@@ -338,7 +338,7 @@ describe('State diagram', () => {
|
||||
[*] --> State1
|
||||
State1 --> [*]
|
||||
`,
|
||||
{ state: { useMaxWidth: true } }
|
||||
{ state: { useMaxWidth: true }, look: 'classic', theme: 'default' }
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
expect(svg).to.have.attr('width', '100%');
|
||||
@@ -361,7 +361,7 @@ describe('State diagram', () => {
|
||||
[*] --> State1
|
||||
State1 --> [*]
|
||||
`,
|
||||
{ state: { useMaxWidth: false } }
|
||||
{ state: { useMaxWidth: false }, look: 'classic', theme: 'default' }
|
||||
);
|
||||
cy.get('svg').should((svg) => {
|
||||
// const height = parseFloat(svg.attr('height'));
|
||||
|
||||
221
cypress/platform/ash.html
Normal file
221
cypress/platform/ash.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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; */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart
|
||||
node
|
||||
rounded(rounded)
|
||||
id1([This is the text in the box])
|
||||
id2((circle))
|
||||
id3(((double circle)))
|
||||
id4>Asymetrical]
|
||||
id5{This is the text in the box}
|
||||
id6{{This is the text in the box}}
|
||||
id7[/This is the text in the box/]
|
||||
id8[\This is the text in the box\]
|
||||
A[/Christmas\]
|
||||
B[\Christmas/]
|
||||
sub[[subroutine]]
|
||||
db[(Database)]
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
---
|
||||
config:
|
||||
theme: default
|
||||
look: classic
|
||||
---
|
||||
flowchart
|
||||
node
|
||||
rounded(rounded)
|
||||
id1([This is the text in the box])
|
||||
id2((circle))
|
||||
id3(((double circle)))
|
||||
id4>Asymetrical]
|
||||
id5{This is the text in the box}
|
||||
id6{{This is the text in the box}}
|
||||
id7[/This is the text in the box/]
|
||||
id8[\This is the text in the box\]
|
||||
B[/Christmas\]
|
||||
sub[[subroutine]]
|
||||
db[(Database)]
|
||||
|
||||
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
Active --> Inactive
|
||||
Inactive --> Active
|
||||
Active --> [*]
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart
|
||||
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
|
||||
a_a --> c --> d_d --> c_c
|
||||
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
class a_a apa;
|
||||
click a_a "http://www.aftonbladet.se" "bookmark"
|
||||
click c_c callback "new tooltip"
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram2" class="mermaid2">
|
||||
flowchart LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram3" class="mermaid2">
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef ash color:red
|
||||
class C ash
|
||||
style C stroke:#00f, fill:black
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
stateDiagram
|
||||
A:::foo
|
||||
B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
style C stroke:#00f, fill:black, color:white
|
||||
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'neo',
|
||||
look: 'neo',
|
||||
// handdrawnSeed: 12,
|
||||
// look: 'handdrawn',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'arial',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
fontSize: 12,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
164
cypress/platform/knsv-dark.html
Normal file
164
cypress/platform/knsv-dark.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
background: #333;
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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; */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart
|
||||
A --> B & C
|
||||
subgraph apa
|
||||
D --> E
|
||||
end
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram2" class="mermaid2">
|
||||
flowchart LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram3" class="mermaid2">
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef ash color:red
|
||||
class C ash
|
||||
style C stroke:#00f, fill:black
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
stateDiagram
|
||||
A:::foo
|
||||
B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
style C stroke:#00f, fill:black, color:white
|
||||
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'neo-dark',
|
||||
// handdrawnSeed: 12,
|
||||
look: 'neo',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'arial',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
fontSize: 12,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
206
cypress/platform/knsv-pos.html
Normal file
206
cypress/platform/knsv-pos.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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; */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid"></pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
// look: 'handdrawn',
|
||||
// layout: 'elk',
|
||||
fontFamily: 'Kalam',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
flowchart: {
|
||||
// curve: 'cardinal',
|
||||
// edgeDebug: true,
|
||||
},
|
||||
logLevel: 0,
|
||||
});
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
let code = `---
|
||||
config:
|
||||
state:
|
||||
curve: line
|
||||
---
|
||||
stateDiagram
|
||||
S:S
|
||||
T:T
|
||||
U:U
|
||||
state Z {
|
||||
state X {
|
||||
Y:Ypsilon
|
||||
}
|
||||
}
|
||||
A
|
||||
|
||||
S --> T: angrepp
|
||||
T --> U
|
||||
T --> V
|
||||
C
|
||||
D
|
||||
E
|
||||
|
||||
`;
|
||||
code = `
|
||||
flowchart TB
|
||||
n3["Untitled Node"] --> n5["Untitled Node"] & n6["Untitled Node"] & n7["Untitled Node"] & n8["Untitled Node"] & n9["Untitled Node"]
|
||||
`;
|
||||
|
||||
let positions = {
|
||||
nodes: {
|
||||
S: { x: 0, y: 0 },
|
||||
T: { x: 100, y: 100, width: 100, height: 100 },
|
||||
U: { x: 250, y: 260 },
|
||||
V: { x: 300, y: 120 },
|
||||
Z: { x: 300, y: 10, width: 160, height: 100 },
|
||||
X: { x: 300, y: 20, width: 80, height: 60 },
|
||||
Y: { x: 300, y: 30, width: 50, height: 20 },
|
||||
A: { x: 300, y: 75, width: 20, height: 20 },
|
||||
},
|
||||
edges: {
|
||||
edge0: {
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 50, y: 0 },
|
||||
{ x: 100, y: 100 },
|
||||
],
|
||||
},
|
||||
edge1: {
|
||||
// points: [
|
||||
// { x: 100, y: 100 },
|
||||
// { x: 200, y: 200 },
|
||||
// ],
|
||||
points: [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 150, y: 120 },
|
||||
{ x: 190.19453144073486, y: 120 },
|
||||
{ x: 190.19453144073486, y: 152.1556251525879 },
|
||||
{ x: 250, y: 152.1556251525879 },
|
||||
{ x: 250, y: 160 },
|
||||
],
|
||||
},
|
||||
edge2: {
|
||||
points: [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 175, y: 80 },
|
||||
{ x: 200, y: 120 },
|
||||
{ x: 300, y: 100 },
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
positions = JSON.parse(
|
||||
'{"nodes":{"n3":{"x":360.885009765625,"y":7.677405834197998,"width":120.59375,"height":45.00000762939453},"n5":{"x":546.1309814453125,"y":190.24496459960938,"width":120.59375,"height":45},"n6":{"x":694.6719360351562,"y":167.00001525878906,"width":120.59375,"height":45},"n7":{"x":72.29684925079346,"y":167.00001525878906,"width":120.59370994567871,"height":45},"n8":{"x":250.27700805664062,"y":183.1090545654297,"width":120.59375,"height":45},"n9":{"x":393.2580871582031,"y":197.45834350585938,"width":120.59375,"height":45}},"edges":{"L_n3_n5_0":{"points":[{"x":383.71510673157036,"y":30.177409648895264},{"x":383.71510673157036,"y":98.96118712425232},{"x":523.300888350029,"y":98.96118712425232},{"x":523.300888350029,"y":167.74496459960938}],"start":"n3","end":"n5"},"L_n3_n6_1":{"points":[{"x":408.02337350122014,"y":30.177409648895264},{"x":408.02337350122014,"y":87.33871245384216},{"x":647.533580291497,"y":87.33871245384216},{"x":647.533580291497,"y":144.50001525878906}],"start":"n3","end":"n6"},"L_n3_n7_2":{"points":[{"x":320.12974762228504,"y":30.177409648895264},{"x":270.12974762228504,"y":87.33871245384216},{"x":113.05210448440184,"y":87.33871245384216},{"x":113.05210448440184,"y":144.50001525878906}],"start":"n3","end":"n7"},"L_n3_n8_3":{"points":[{"x":346.6989693425486,"y":30.177409648895264},{"x":346.6989693425486,"y":95.39323210716248},{"x":264.4630460745863,"y":95.39323210716248},{"x":264.4630460745863,"y":160.6090545654297}],"start":"n3","end":"n8"},"L_n3_n9_4":{"points":[{"x":364.7230894682698,"y":30.177409648895264},{"x":364.7230894682698,"y":102.56787657737732},{"x":389.42000810627434,"y":102.56787657737732},{"x":389.42000810627434,"y":174.95834350585938}],"start":"n3","end":"n9"}}}'
|
||||
);
|
||||
|
||||
// console.log('positions:', positions);
|
||||
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
|
||||
// if (window?.calcIntersections2) {
|
||||
// const int = await calcIntersections2(
|
||||
// { id: 'a', shape: 'rect', x: 100, y: 100, width: 100, height: 100 },
|
||||
// { id: 'a', shape: 'rect', x: 300, y: 100, width: 100, height: 100 }
|
||||
// );
|
||||
// console.log('Intersections', int);
|
||||
// } else {
|
||||
// console.error('calcIntersections not found');
|
||||
// }
|
||||
// console.log(JSON.stringify(positions));
|
||||
const elem = document.querySelector('#diagram');
|
||||
elem.innerHTML = svg;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
272
cypress/platform/knsv-recursive.html
Normal file
272
cypress/platform/knsv-recursive.html
Normal file
@@ -0,0 +1,272 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.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.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=Caveat:wght@400..700&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"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.recursive-500 {
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
/* font-family: 'Arial'; */
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
/* color: white; */
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.gridify.tiny {
|
||||
background-image: linear-gradient(
|
||||
transparent 11px,
|
||||
rgba(220, 220, 200, 0.8) 12px,
|
||||
transparent 12px
|
||||
),
|
||||
linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
|
||||
background-size:
|
||||
100% 12px,
|
||||
12px 100%;
|
||||
}
|
||||
|
||||
.gridify.dots {
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
rgba(220, 220, 200, 0.8) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
font-size: 16px !important;
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
/*box-shadow: 4px 4px 0px 0px #0000000F;*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="gridify dots">
|
||||
<p class="mb-20">Test Diagram</p>
|
||||
<div class="w-full h-64">
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
theme: neo
|
||||
layout: dagre
|
||||
---
|
||||
flowchart TD
|
||||
A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
|
||||
n1 --x n4["Rounded"]
|
||||
n2 --o n5["Hexagon"]
|
||||
n3 --> n6["Parallelogram"]
|
||||
n5 o--o n7["Trapezoid"]
|
||||
n4 x--x n8["Lean Right"]
|
||||
n6 <--> n9(("Circle"))
|
||||
n8 --> n10["Rose"]
|
||||
n7 --> n11["Pine"]
|
||||
n9 --> n12["Peach"]
|
||||
n2@{ shape: rounded}
|
||||
n4@{ shape: rounded}
|
||||
n5@{ shape: hex}
|
||||
n6@{ shape: lean-l}
|
||||
n7@{ shape: trap-b}
|
||||
n8@{ shape: lean-r}
|
||||
|
||||
n10:::Rose
|
||||
n11:::Pine
|
||||
n12:::Peach
|
||||
classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
|
||||
classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
|
||||
classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
|
||||
n10 --x End
|
||||
n11 --x End
|
||||
n12 --x End
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
look: classic
|
||||
theme: forest
|
||||
layout: dagre
|
||||
---
|
||||
flowchart TD
|
||||
A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
|
||||
n1 --x n4["Rounded"]
|
||||
n2 --o n5["Hexagon"]
|
||||
n3 --> n6["Parallelogram"]
|
||||
n5 o--o n7["Trapezoid"]
|
||||
n4 x--x n8["Lean Right"]
|
||||
n6 <--> n9(("Circle"))
|
||||
n8 --> n10["Rose"]
|
||||
n7 --> n11["Pine"]
|
||||
n9 --> n12["Peach"]
|
||||
n2@{ shape: rounded}
|
||||
n4@{ shape: rounded}
|
||||
n5@{ shape: hex}
|
||||
n6@{ shape: lean-l}
|
||||
n7@{ shape: trap-b}
|
||||
n8@{ shape: lean-r}
|
||||
|
||||
n10:::Rose
|
||||
n11:::Pine
|
||||
n12:::Peach
|
||||
classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
|
||||
classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
|
||||
classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
|
||||
n10 --x End
|
||||
n11 --x End
|
||||
n12 --x End
|
||||
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
const staticBellIconPack = {
|
||||
prefix: 'fa6-regular',
|
||||
icons: {
|
||||
bell: {
|
||||
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
|
||||
width: 448,
|
||||
},
|
||||
},
|
||||
width: 512,
|
||||
height: 512,
|
||||
};
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
|
||||
},
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () => staticBellIconPack,
|
||||
},
|
||||
]);
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'redux',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
// handDrawnSeed: 12,
|
||||
look: 'neo',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'Recursive',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
kanban: {
|
||||
htmlLabels: false,
|
||||
},
|
||||
fontSize: 16,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
callback,
|
||||
});
|
||||
// setTimeout(() => {
|
||||
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
|
||||
// }, 1000);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
306
cypress/platform/knsv-reset.html
Normal file
306
cypress/platform/knsv-reset.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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; */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid"></pre>
|
||||
<pre id="diagram2" class="mermaid"></pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
let code = `
|
||||
stateDiagram
|
||||
S:S
|
||||
T:T
|
||||
U:U
|
||||
state Z {
|
||||
state X {
|
||||
Y:Ypsilon
|
||||
}
|
||||
}
|
||||
A
|
||||
|
||||
S --> T: angrepp
|
||||
S --> T: angrepp
|
||||
T --> U
|
||||
Y --> V
|
||||
C
|
||||
D
|
||||
E
|
||||
|
||||
`;
|
||||
code = `
|
||||
flowchart TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
|
||||
`;
|
||||
// code = `
|
||||
// flowchart BT
|
||||
// A
|
||||
// subgraph one
|
||||
// a1 --> a2
|
||||
// end
|
||||
// subgraph two
|
||||
// a3
|
||||
// end
|
||||
|
||||
// `;
|
||||
// code = `
|
||||
// flowchart TB
|
||||
// subgraph one
|
||||
// a1-->a2
|
||||
// end`;
|
||||
// let positions = JSON.parse(
|
||||
// '{"nodes":{"S":{"x":30.78125,"y":43.5},"Y":{"x":127.94140625,"y":50}},"edges":{}}'
|
||||
// );
|
||||
|
||||
function exctractPositions(svg) {
|
||||
const positions = { nodes: {}, edges: {} };
|
||||
|
||||
// Extract the viewbox paddings - TOSDO: update in collab
|
||||
const viewBox = svg.getAttribute('viewBox').split(' ');
|
||||
const viewBoxX = parseFloat(viewBox[0]);
|
||||
const viewBoxY = parseFloat(viewBox[1]);
|
||||
// console.log('viewBox:', viewBoxX, viewBoxY);
|
||||
svg.querySelectorAll('[data-et="node"]').forEach((node) => {
|
||||
if (node.tagName === 'g') {
|
||||
// console.log('node:', node);
|
||||
const id = node.dataset.id;
|
||||
const bbox = node.getBBox();
|
||||
const transform = node.getAttribute('transform');
|
||||
const x = parseFloat(transform.split(',')[0].split('(')[1]);
|
||||
const y = parseFloat(transform.split(',')[1].split(')')[0]);
|
||||
|
||||
// Get the bounding rectangle of the element
|
||||
const rect = node.getBoundingClientRect();
|
||||
|
||||
// Get the absolute position relative to the document
|
||||
const absoluteX = rect.left + window.pageXOffset + viewBoxX;
|
||||
const absoluteY = rect.top + window.pageYOffset + viewBoxY;
|
||||
|
||||
positions.nodes[id] = {
|
||||
x: absoluteX + rect.width / 2,
|
||||
y: absoluteY + rect.height / 2,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
};
|
||||
}
|
||||
});
|
||||
svg.querySelectorAll('[data-et="cluster"]').forEach((node) => {
|
||||
// console.log('cluster:', node);
|
||||
if (node.tagName === 'g') {
|
||||
const id = node.dataset.id;
|
||||
// console.log('cluster:', node);
|
||||
|
||||
const transform = node.getAttribute('transform');
|
||||
const rect = node.getBoundingClientRect();
|
||||
|
||||
// Get the absolute position relative to the document
|
||||
const absoluteX = rect.left + window.pageXOffset + viewBoxX;
|
||||
const absoluteY = rect.top + window.pageYOffset + viewBoxY;
|
||||
|
||||
positions.nodes[id] = {
|
||||
x: absoluteX + rect.width / 2,
|
||||
y: absoluteY + rect.height / 2,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
};
|
||||
}
|
||||
});
|
||||
svg.querySelectorAll('[data-et="edge"]').forEach((edge) => {
|
||||
// if (node.tagName === 'g') {
|
||||
const path = edge.getBoundingClientRect();
|
||||
|
||||
// Get the absolute position relative to the document
|
||||
const absoluteX = path.left + window.pageXOffset + viewBoxX;
|
||||
const absoluteY = path.top + window.pageYOffset + viewBoxY;
|
||||
console.log(
|
||||
'absoluteX:',
|
||||
absoluteX,
|
||||
'absoluteY:',
|
||||
absoluteY,
|
||||
'offset',
|
||||
window.pageXOffset
|
||||
);
|
||||
const id = edge.dataset.id;
|
||||
const points = JSON.parse(atob(edge.dataset.points));
|
||||
console.log('edge:', points, absoluteX, absoluteY);
|
||||
let minX = 10000;
|
||||
let minY = 10000;
|
||||
points.forEach((point) => {
|
||||
if (point.x < minX) {
|
||||
minX = point.x;
|
||||
}
|
||||
if (point.y < minY) {
|
||||
minY = point.y;
|
||||
}
|
||||
});
|
||||
let dx = absoluteX - minX;
|
||||
let dy = absoluteY - minY;
|
||||
if (dx < 1) {
|
||||
dx = 0;
|
||||
}
|
||||
if (dy < 1) {
|
||||
dy = 0;
|
||||
}
|
||||
positions.edges[id] = {
|
||||
points: points.map((point) => {
|
||||
console.log('point:', point.y, absoluteY);
|
||||
return {
|
||||
x: point.x + dx,
|
||||
y: point.y + dy,
|
||||
};
|
||||
}),
|
||||
};
|
||||
// }
|
||||
});
|
||||
return positions;
|
||||
}
|
||||
|
||||
const mode = 'reset';
|
||||
if (mode === 'reset') {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
layout: 'elk',
|
||||
fontFamily: 'Kalam',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
logLevel: 5,
|
||||
});
|
||||
const { svg } = await mermaid.render('the-id-of-the-svg', code);
|
||||
const elem = document.querySelector('#diagram');
|
||||
elem.innerHTML = svg;
|
||||
elem.classList.remove('mermaid');
|
||||
const positions = exctractPositions(elem.firstChild);
|
||||
// console.log('Positions:', JSON.stringify(positions));
|
||||
const { svg: svg2 } = await mermaid.render(
|
||||
'the-id-of-the-svg2',
|
||||
'---\n config:\n layout: fixed\n---' + code,
|
||||
undefined,
|
||||
positions
|
||||
);
|
||||
// console.log('svg2', svg2);
|
||||
const elem2 = document.querySelector('#diagram2');
|
||||
elem2.innerHTML = svg2;
|
||||
} else {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
// look: 'handdrawn',
|
||||
layout: 'fixed',
|
||||
fontFamily: 'Kalam',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
logLevel: 0,
|
||||
});
|
||||
const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
|
||||
|
||||
// console.log(JSON.stringify(positions));
|
||||
const elem = document.querySelector('#diagram');
|
||||
elem.innerHTML = svg;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -91,23 +91,16 @@
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
look: handdrawn
|
||||
|
||||
---
|
||||
swimlane TB
|
||||
%% swimlane 1 - A E
|
||||
%% swimlane 2 - B
|
||||
%% swimlane 3 - C D
|
||||
%% lane First
|
||||
A
|
||||
%% end
|
||||
A --> B(I am B, the wide one) --> C
|
||||
C --> D & F
|
||||
flowchart LR
|
||||
n1["n1"] --- C
|
||||
B("Continue") --> C(("Evaluate"))
|
||||
C -- One --> D["Option 1"]
|
||||
C -- Two --> E["Option 2"]
|
||||
C -- Three --> F["fa:fa-car Option 3"]
|
||||
|
||||
D --> E
|
||||
A --> E
|
||||
E --> B
|
||||
|
||||
B@{ shape: diam}
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
@@ -139,6 +132,7 @@ flowchart LR
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
look: neo
|
||||
layout: elk
|
||||
---
|
||||
flowchart LR
|
||||
@@ -453,7 +447,7 @@ kanban
|
||||
mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
theme: 'forest',
|
||||
// handDrawnSeed: 12,
|
||||
// look: 'handDrawn',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
@@ -461,7 +455,7 @@ kanban
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
flowchart: { titleTopMargin: 10, useMaxWidth: false },
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
|
||||
171
cypress/platform/min-size-tester.html
Normal file
171
cypress/platform/min-size-tester.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
font-family: 'Arial';
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex w-full">
|
||||
<div id="diagram-fixed"></div>
|
||||
<div id="diagram-normal"></div>
|
||||
</div>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
//look: 'handdrawn',
|
||||
// layout: 'fixed',
|
||||
theme: 'neo-dark',
|
||||
//layout: 'elk',
|
||||
fontFamily: 'Kalam',
|
||||
logLevel: 1,
|
||||
});
|
||||
|
||||
// let shape = 'rect'; // Done
|
||||
//let shape = 'rounded'; // Done
|
||||
//let shape = 'stadium'; // Done
|
||||
// let shape = 'fr-rect'; // Done
|
||||
// let shape = 'cyl'; // Done
|
||||
//let shape = 'circle'; // Done
|
||||
// let shape = 'odd'; // Done
|
||||
// let shape = 'diam'; //Done
|
||||
// let shape = 'hex'; // Done
|
||||
// let shape = 'lean-r'; // Done
|
||||
// let shape = 'lean-l'; // Done
|
||||
// let shape = 'trap-b'; // Done
|
||||
// let shape = 'trap-t'; // Done
|
||||
// let shape = 'dbl-circ'; // Done
|
||||
// let shape = 'text'; // Done
|
||||
// let shape = 'notch-rect'; // Done
|
||||
// let shape = 'lin-rect'; // Done
|
||||
//let shape = 'sm-circ'; // Done
|
||||
// let shape = 'fr-circ'; //Done
|
||||
//let shape = 'fork'; // Done
|
||||
//let shape = 'hourglass'; //Done
|
||||
// let shape = 'bolt'; //Done
|
||||
// let shape = 'doc'; // Done
|
||||
// let shape = 'delay'; // Done
|
||||
// let shape = 'h-cyl'; // Done
|
||||
// let shape = 'lin-cyl'; // Done
|
||||
// let shape = 'curv-trap'; // Done
|
||||
// let shape = 'div-rect'; // Done
|
||||
//let shape = 'tri'; // Done
|
||||
// let shape = 'win-pane'; //Done
|
||||
// let shape = 'f-circ'; // Done
|
||||
// let shape = 'lin-doc'; // Done
|
||||
// let shape = 'notch-pent'; // Done
|
||||
// let shape = 'flip-tri'; // Done
|
||||
// let shape = 'sl-rect'; // Done
|
||||
// let shape = 'cross-circ'; // Done
|
||||
// let shape = 'bow-rect'; // Done
|
||||
// let shape = 'st-rect'; // Done
|
||||
|
||||
// let shape = 'flag';
|
||||
|
||||
// let shape = 'docs';
|
||||
// let shape = 'brace';
|
||||
// let shape = 'brace-r';
|
||||
// let shape = 'braces';
|
||||
// let shape = 'tag-doc';
|
||||
|
||||
let configFixed = `---
|
||||
config:
|
||||
layout: fixed
|
||||
---
|
||||
`;
|
||||
let code = `flowchart TB
|
||||
%% n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
|
||||
%% n80@{ shape: '${shape}'}
|
||||
n81@{ label: "Ashish", shape: '${shape}'}
|
||||
%%n82@{ label: "n82", shape: '${shape}'}
|
||||
%%n83@{ label: "n83", shape: '${shape}'}
|
||||
`;
|
||||
|
||||
let positions = {
|
||||
edges: {},
|
||||
nodes: {
|
||||
n81: {
|
||||
x: 0,
|
||||
y: 10,
|
||||
width: 107.7,
|
||||
height: 65,
|
||||
},
|
||||
n80: {
|
||||
x: -400,
|
||||
y: 10,
|
||||
width: 1,
|
||||
height: 1,
|
||||
},
|
||||
n82: {
|
||||
x: 0,
|
||||
y: 110,
|
||||
},
|
||||
n83: {
|
||||
x: 80,
|
||||
y: 10,
|
||||
},
|
||||
n84: {
|
||||
x: 1200,
|
||||
y: 10,
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
},
|
||||
};
|
||||
console.log(configFixed + code);
|
||||
const { svg } = await mermaid.render(
|
||||
'the-id-of-the-svg-1',
|
||||
configFixed + code,
|
||||
undefined,
|
||||
positions
|
||||
);
|
||||
const elem = document.querySelector('#diagram-fixed');
|
||||
elem.innerHTML = svg;
|
||||
const { svg: svg2 } = await mermaid.render('the-id-of-the-svg-2', code, undefined, positions);
|
||||
const elem2 = document.querySelector('#diagram-normal');
|
||||
elem2.innerHTML = svg2;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2537
cypress/platform/neo-test.html
Normal file
2537
cypress/platform/neo-test.html
Normal file
File diff suppressed because it is too large
Load Diff
248
cypress/platform/omkarht-new-padding.html
Normal file
248
cypress/platform/omkarht-new-padding.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.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.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=Caveat:wght@400..700&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"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.recursive-500 {
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
/* font-family: 'Arial'; */
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
/* color: white; */
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.gridify.tiny {
|
||||
background-image: linear-gradient(
|
||||
transparent 11px,
|
||||
rgba(220, 220, 200, 0.8) 12px,
|
||||
transparent 12px
|
||||
),
|
||||
linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
|
||||
background-size:
|
||||
100% 12px,
|
||||
12px 100%;
|
||||
}
|
||||
|
||||
.gridify.dots {
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
rgba(220, 220, 200, 0.8) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
font-size: 16px !important;
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
/*box-shadow: 4px 4px 0px 0px #0000000F;*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="gridify dots">
|
||||
<p class="mb-20">Test Diagram</p>
|
||||
<div class="w-full h-64">
|
||||
<pre style="display: none">
|
||||
---
|
||||
config:
|
||||
theme: neo
|
||||
layout: dagre
|
||||
---
|
||||
flowchart TD
|
||||
A{"Cylinder"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
|
||||
n1 --x n4["Rounded"]
|
||||
n2 --o n5["Hexagon"]
|
||||
n3 --> n6["Parallelogram"]
|
||||
n5 o--o n7["Trapezoid"]
|
||||
n4 x--x n8["Lean Right"]
|
||||
n6 <--> n9(("Circle"))
|
||||
n8 --> n10["Rose"]
|
||||
n7 --> n11["Pine"]
|
||||
n9 --> n12["Peach"]
|
||||
n2@{ shape: rounded}
|
||||
n4@{ shape: rounded}
|
||||
n5@{ shape: hex}
|
||||
n6@{ shape: lean-l}
|
||||
n7@{ shape: trap-b}
|
||||
n8@{ shape: lean-r}
|
||||
|
||||
n10:::Rose
|
||||
n11:::Pine
|
||||
n12:::Peach
|
||||
classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
|
||||
classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
|
||||
classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
|
||||
n10 --x End
|
||||
n11 --x End
|
||||
n12 --x End
|
||||
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
theme: neo
|
||||
layout: dagre
|
||||
---
|
||||
flowchart TD
|
||||
n1["Cylinder"]
|
||||
n1@{ shape: database}
|
||||
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
const staticBellIconPack = {
|
||||
prefix: 'fa6-regular',
|
||||
icons: {
|
||||
bell: {
|
||||
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
|
||||
width: 448,
|
||||
},
|
||||
},
|
||||
width: 512,
|
||||
height: 512,
|
||||
};
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
|
||||
},
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () => staticBellIconPack,
|
||||
},
|
||||
]);
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'redux',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
// handDrawnSeed: 12,
|
||||
look: 'neo',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'Recursive',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
kanban: {
|
||||
htmlLabels: false,
|
||||
},
|
||||
fontSize: 16,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
callback,
|
||||
});
|
||||
// setTimeout(() => {
|
||||
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
|
||||
// }, 1000);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,28 +4,60 @@
|
||||
<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/6.5.2/css/font-awesome.min.css"
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
/* background: #333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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; */
|
||||
}
|
||||
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -41,34 +73,75 @@
|
||||
font-family: monospace;
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>Security check</div>
|
||||
<pre id="diagram" class="mermaid">
|
||||
flowchart LR
|
||||
A-->B
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
mindmap
|
||||
root
|
||||
ch1
|
||||
ch2
|
||||
</pre
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
direction BT
|
||||
[*] --> Inner
|
||||
Inner --> NumLockOn : EvNumLockPressed
|
||||
}
|
||||
%% Outer --> Inner
|
||||
</pre
|
||||
>
|
||||
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
|
||||
<script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
|
||||
<script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
|
||||
<script>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
[*] --> second
|
||||
second --> [*]
|
||||
}
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid2">
|
||||
flowchart LR
|
||||
A[Start] --Some text--> B(Continue)
|
||||
B --> C{Evaluate}
|
||||
C -- One --> D[Option 1]
|
||||
C -- Two --> E[Option 2]
|
||||
C -- Three --> F[fa:fa-car Option 3]
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'neo',
|
||||
handdrawnSeed: 12,
|
||||
look: 'neo',
|
||||
//layout: 'elk',
|
||||
'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
// fontFamily: 'Caveat',
|
||||
//fontFamily: 'Kalam',
|
||||
fontFamily: 'Arial',
|
||||
sequence: {
|
||||
actorFontFamily: 'arial',
|
||||
noteFontFamily: 'arial',
|
||||
messageFontFamily: 'arial',
|
||||
},
|
||||
fontSize: 10,
|
||||
logLevel: 0,
|
||||
basePath: './packages/',
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
htmlLabels: true,
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
@@ -77,6 +150,10 @@ A-->B
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
|
||||
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
|
||||
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
307
cypress/platform/refactor.html
Normal file
307
cypress/platform/refactor.html
Normal file
@@ -0,0 +1,307 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
font-family: 'Arial';
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 20px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.vertical-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
background-color: #f9f9f9;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
padding: 18px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.active,
|
||||
.collapsible:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
content: '\002B';
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.active:after {
|
||||
content: '\2212';
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
const data = {
|
||||
shapes: [
|
||||
{
|
||||
descr: 'Stadium shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1([This is the text in the box])
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Sub-Routine shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1[[This is the text in the box]]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Cylindrical shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1[(Database)]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Circle shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1((Circle))
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Double Circle shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1(((Circle)))
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Asymmetric shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1>This is the text in the box]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Rhombus/Diamond/Question shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1{This is the text in the box}
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Hexagon shape',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Parallelogram shape',
|
||||
code: `
|
||||
flowchart TD
|
||||
id1[/This is the text in the box/]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Parallelogram Alt shape',
|
||||
code: `
|
||||
flowchart TD
|
||||
id1[\This is the text in the box\]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Trapezoid shape',
|
||||
code: `
|
||||
flowchart TD
|
||||
A[/Christmas\\]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Trapezoid Alt shape',
|
||||
code: `
|
||||
flowchart TD
|
||||
id1[\\This is the text in the box\\]
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Rect with rounded corner',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1(This is the text in the box)
|
||||
`,
|
||||
},
|
||||
{
|
||||
descr: 'Rect with sharp corner',
|
||||
code: `
|
||||
flowchart LR
|
||||
id1[This is the text in the box]
|
||||
`,
|
||||
},
|
||||
],
|
||||
looks: ['classic', 'handdrawn', 'neo'],
|
||||
// looks: ['classic'],
|
||||
layouts: ['elk', 'dagre'],
|
||||
// layouts: ['elk'],
|
||||
themes: ['default', 'neo'],
|
||||
// themes: ['default'],
|
||||
};
|
||||
function generateMermaidCode(layout, look, theme, shape) {
|
||||
return `---
|
||||
config:
|
||||
layout: ${layout}
|
||||
look: ${look}
|
||||
theme: ${theme}
|
||||
---
|
||||
${shape.code}
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
<table x-data="data">
|
||||
<tr>
|
||||
<th></th>
|
||||
<template x-for="layout in layouts">
|
||||
<template x-for="look in looks">
|
||||
<template x-for="theme in themes">
|
||||
<th x-text="layout + '-' + look + '-' + theme "></th>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
<template x-for="shape in shapes">
|
||||
<tr>
|
||||
<th class="vertical-header">
|
||||
<button class="collapsible" x-text="shape.descr">Sub-Routine shape</button>
|
||||
<div class="content">
|
||||
<div class="pre-scrollable">
|
||||
<pre x-text="shape.code"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<template x-for="layout in layouts">
|
||||
<template x-for="look in looks">
|
||||
<template x-for="theme in themes">
|
||||
<td>
|
||||
<pre
|
||||
id="diagram6"
|
||||
class="mermaid"
|
||||
x-text="generateMermaidCode(layout, look, theme, shape)"
|
||||
></pre>
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {};
|
||||
|
||||
mermaid.initialize({
|
||||
handdrawn: false,
|
||||
mergeEdges: true,
|
||||
layout: 'dagre',
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
// fontFamily: 'Caveat',
|
||||
fontFamily: 'Kalam',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
fontSize: 16,
|
||||
logLevel: 0,
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
|
||||
let coll = document.getElementsByClassName('collapsible');
|
||||
for (const element of coll) {
|
||||
element.addEventListener('click', function () {
|
||||
this.classList.toggle('active');
|
||||
let content = this.nextElementSibling;
|
||||
if (content.style.maxHeight) {
|
||||
content.style.maxHeight = null;
|
||||
} else {
|
||||
content.style.maxHeight = content.scrollHeight + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -62,56 +62,23 @@
|
||||
|
||||
<body style="display: flex; gap: 2rem; flex-direction: row">
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart LR
|
||||
A@{ icon: "fa:window-minimize", form: circle }
|
||||
E@{ icon: "fa:window-minimize", form: circle }
|
||||
B@{ icon: "fa:bell", form: circle }
|
||||
B2@{ icon: "fa:bell", form: circle }
|
||||
C@{ icon: "fa:address-book", form: square }
|
||||
D@{ icon: "fa:star-half", form: square }
|
||||
A --> E
|
||||
B --> B2
|
||||
|
||||
flowchart
|
||||
A --> A
|
||||
subgraph B
|
||||
B1 --> B1
|
||||
end
|
||||
subgraph C
|
||||
subgraph C1
|
||||
C2 --> C2
|
||||
subgraph D
|
||||
D1 --> D1
|
||||
end
|
||||
D --> D
|
||||
end
|
||||
C1 --> C1
|
||||
end
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart TB
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
style B2 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
180
cypress/platform/size-tester.html
Normal file
180
cypress/platform/size-tester.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
font-family: 'Arial';
|
||||
background-color: #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="diagram"></div>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
//look: 'handdrawn',
|
||||
layout: 'fixed',
|
||||
theme: 'neo-dark',
|
||||
//layout: 'elk',
|
||||
fontFamily: 'Kalam',
|
||||
logLevel: 1,
|
||||
class: {
|
||||
hideEmptyMembersBox: true,
|
||||
},
|
||||
});
|
||||
|
||||
let shape = 'circle';
|
||||
|
||||
let code = `
|
||||
flowchart TB
|
||||
n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
|
||||
n80@{ shape: '${shape}'}
|
||||
n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
|
||||
n82["A single line of text"]
|
||||
n81@{ shape: '${shape}'}
|
||||
n82@{ shape: '${shape}'}
|
||||
n83@{ label: "A single line of text", 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 = {
|
||||
edges: {},
|
||||
nodes: {
|
||||
n81: {
|
||||
x: 0,
|
||||
y: 10,
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
n80: {
|
||||
x: -400,
|
||||
y: 10,
|
||||
width: 100,
|
||||
height: 50,
|
||||
},
|
||||
n82: {
|
||||
x: 400,
|
||||
y: 10,
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
n83: {
|
||||
x: 800,
|
||||
y: 10,
|
||||
},
|
||||
n84: {
|
||||
x: 1200,
|
||||
y: 10,
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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');
|
||||
elem.innerHTML = svg;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1576
cypress/platform/state-refactor-looks.html
Normal file
1576
cypress/platform/state-refactor-looks.html
Normal file
File diff suppressed because it is too large
Load Diff
1540
cypress/platform/state-refactor-neo-themes.html
Normal file
1540
cypress/platform/state-refactor-neo-themes.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -93,6 +93,7 @@
|
||||
<th></th> <!-- Placeholder for the top left corner -->
|
||||
<th>Dagre</th>
|
||||
<th>Dagre with rough</th>
|
||||
<th>Dagre with neo</th>
|
||||
<th>ELK</th>
|
||||
<th>ELK with rough</th>
|
||||
</tr>
|
||||
@@ -116,6 +117,14 @@ stateDiagram-v2
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
|
||||
@@ -163,6 +172,13 @@ stateDiagram-v2
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s3
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s3
|
||||
</pre>
|
||||
@@ -207,6 +223,14 @@ stateDiagram-v2
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
s22 : This is a state description
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
s22 : This is a state description
|
||||
|
||||
@@ -267,10 +291,20 @@ stateDiagram-v2
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
s51 --> s52
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
s51 --> s52
|
||||
s61 --> s62
|
||||
|
||||
|
||||
</pre>
|
||||
@@ -279,7 +313,7 @@ stateDiagram-v2
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
s61 --> s62
|
||||
s71 --> s72
|
||||
|
||||
|
||||
</pre>
|
||||
@@ -322,13 +356,23 @@ stateDiagram-v2
|
||||
a3 --> a4: A transition
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
a5 --> a6: A transition
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
a5 --> a6: A transition
|
||||
a7 --> a8: A transition
|
||||
|
||||
|
||||
</pre>
|
||||
@@ -337,7 +381,7 @@ stateDiagram-v2
|
||||
<pre id="diagram4" class="mermaid">
|
||||
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
a7 --> a8: A transition
|
||||
a9 --> a10: A transition
|
||||
|
||||
|
||||
</pre>
|
||||
@@ -383,6 +427,17 @@ stateDiagram-v2
|
||||
test --> [*]
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> test
|
||||
test --> [*]
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
@@ -455,6 +510,20 @@ stateDiagram-v2
|
||||
}
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
[*] --> second
|
||||
second --> [*]
|
||||
}
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
@@ -568,6 +637,31 @@ stateDiagram-v2
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> Level1
|
||||
|
||||
state Level1 {
|
||||
[*] --> Level2
|
||||
|
||||
state Level2 {
|
||||
[*] --> level2
|
||||
level2 --> Level3
|
||||
|
||||
state Level3 {
|
||||
[*] --> level3
|
||||
level3 --> [*]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
@@ -698,6 +792,30 @@ stateDiagram-v2
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
stateDiagram-v2
|
||||
[*] --> B1
|
||||
B1 --> B2
|
||||
B1 --> B3
|
||||
|
||||
state B1 {
|
||||
[*] --> B11
|
||||
B11 --> [*]
|
||||
}
|
||||
state B2 {
|
||||
[*] --> B22
|
||||
B22 --> [*]
|
||||
}
|
||||
state B3 {
|
||||
[*] --> B33
|
||||
B33 --> [*]
|
||||
}
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<pre id="diagram3" class="mermaid">
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
@@ -794,7 +912,19 @@ stateDiagram-v2
|
||||
if_state --> True : if n >= 0
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
|
||||
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="diagram3" class="mermaid">
|
||||
%%{init: {"handDrawn": false, "layout": "elk"} }%%
|
||||
stateDiagram-v2
|
||||
@@ -866,6 +996,23 @@ stateDiagram-v2
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
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="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
@@ -956,6 +1103,19 @@ stateDiagram-v2
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
stateDiagram-v2
|
||||
TN3: The state with a note
|
||||
note right of TN3
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
TN3 --> TN4
|
||||
note left of TN4 : This is the note to the left.
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
TN3: The state with a note
|
||||
note right of TN3
|
||||
@@ -1056,6 +1216,27 @@ state Active {
|
||||
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: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
@@ -1161,6 +1342,21 @@ direction LR
|
||||
<pre id="diagram2" class="mermaid">
|
||||
%%{init: {"look": "handDrawn"} }%%
|
||||
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: {"look": "neo"} }%%
|
||||
stateDiagram-v2
|
||||
direction LR
|
||||
[*] --> D1
|
||||
D1 --> D2
|
||||
|
||||
172
cypress/platform/steph.html
Normal file
172
cypress/platform/steph.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<html>
|
||||
<head>
|
||||
<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
|
||||
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.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=Caveat:wght@400..700&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>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
|
||||
flowchart
|
||||
A[A really really really super long node] --> B & C
|
||||
subgraph apa
|
||||
D --> E
|
||||
end
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial", "themeVariables": {
|
||||
"useGradient": true,
|
||||
"gradientStart": '#fff',
|
||||
"gradientStop": '#ccc'
|
||||
}} }%%
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram2" class="mermaid2">
|
||||
flowchart LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram3" class="mermaid2">
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef ash color:red
|
||||
class C ash
|
||||
style C stroke:#00f, fill:black
|
||||
|
||||
</pre>
|
||||
<!-- Flowchart with subgraph-->
|
||||
<pre id="diagram3" class="mermaid">
|
||||
flowchart TB
|
||||
c1-->a2
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
[*] --> second
|
||||
second --> [*]
|
||||
}
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'neo',
|
||||
|
||||
// handdrawnSeed: 12,
|
||||
look: 'neo',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'arial',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
fontSize: 12,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user