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

Prettier pass

Browse Source
This commit is contained in:
Sidharth Vinod
2022-09-05 01:00:47 +05:30
parent 41dec4d159
commit 98e9f5751a
85 changed files with 4377 additions and 1897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/.eslintrc.json
View File

@@ -1,10 +1,10 @@
{
"env": {
"cypress/globals": true
},
"extends": ["plugin:cypress/recommended"],
"plugins": ["cypress"],
"rules":{
"cypress/no-unnecessary-waiting": 0
}
"env": {
"cypress/globals": true
},
"extends": ["plugin:cypress/recommended"],
"plugins": ["cypress"],
"rules": {
"cypress/no-unnecessary-waiting": 0
}
}

193
cypress/platform/current.html
View File

@@ -1,19 +1,24 @@
<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
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&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://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
}
h1 { color: grey;}
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
@@ -22,137 +27,55 @@
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart BT
subgraph S1
sub1 -->sub2
end
subgraph S2
sub4
end
S1 --> S2
sub1 --> sub4
<div class="mermaid" style="width: 50%; height: 20%">
flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
</div>
<div class="mermaid2" style="width: 50%; height: 200px;">
sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
<div class="mermaid2" style="width: 50%; height: 200px">
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
though
</div>
<div class="mermaid2" style="width: 50%; height: 200px;">
%%{init: {'securityLevel': 'loose'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "index.html#link-clicked" "link test"
click B callback "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
<div class="mermaid2" style="width: 50%; height: 200px">
%%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
--> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
-->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
test" classDef someclass fill:#f96; class A someclass; class C someclass;
</div>
<div class="mermaid2" style="width: 50%; height: 200px;">
<div class="mermaid2" style="width: 50%; height: 200px">
flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
d
</div>
<div class="mermaid2" style="width: 50%; height: 20%">
stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 40%">
%% this does not produce the desired result flowchart TB subgraph container_Beta
process_C-->Process_D end subgraph container_Alpha process_A-->process_B
process_B-->|via_AWSBatch|container_Beta process_A-->|messages|process_C end
</div>
<div class="mermaid" style="width: 50%; height: 40%">
flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} -->
b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing
#quot;elit#quot;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
_two end sub_one --> two
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end subgraph sub_two[Sub
Two] _sub_two end _one end %% here, either the first or the second one sub_one --> sub_two
_one --> b
</div>
flowchart BT
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 40%;">
%% this does not produce the desired result
flowchart TB
subgraph container_Beta
process_C-->Process_D
end
subgraph container_Alpha
process_A-->process_B
process_B-->|via_AWSBatch|container_Beta
process_A-->|messages|process_C
end
</div>
<div class="mermaid" style="width: 50%; height: 40%;">
flowchart TB
a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TB
internet
nat
routeur
lb1
lb2
compute1
compute2
subgraph project
routeur
nat
subgraph subnet1
compute1
lb1
end
subgraph subnet2
compute2
lb2
end
end
internet --> routeur
routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
end
end
subgraph two[Two]
_two
end
sub_one --> two
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
end
subgraph sub_two[Sub Two]
_sub_two
end
_one
end
%% here, either the first or the second one
sub_one --> sub_two
_one --> b
</div>
<script src="./mermaid.js"></script>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
@@ -172,8 +95,8 @@ _one --> b
securityLevel: 'strict',
});
function callback() {
alert('It worked');
}
alert('It worked');
}
</script>
</body>
</html>

10
cypress/platform/e2e.html
View File

@@ -1,10 +1,13 @@
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style>
body {
/* font-family: 'Mansalva', cursive;*/
@@ -27,7 +30,8 @@
svg {
border: 2px solid darkred;
}
.exClass2 > rect, .exClass {
.exClass2 > rect,
.exClass {
fill: greenyellow !important;
}
</style>

24
cypress/platform/ghsa1.html
View File

@@ -1,28 +1,26 @@
<html>
<script>
<script>
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
</script>
<body>
</script>
<body>
<div id="target">
<h1>This element does not belong to the SVG but we can style it</h1>
<h1>This element does not belong to the SVG but we can style it</h1>
</div>
<svg id="diagram">
</svg>
<svg id="diagram"></svg>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = `
const graph = `
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
graph TD
A[Goose]
`;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
</script>
</body>
</body>
</html>

24
cypress/platform/ghsa2.html
View File

@@ -1,28 +1,26 @@
<html>
<script>
<script>
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
</script>
<body>
</script>
<body>
<div id="target">
<h1>This element does not belong to the SVG but we can style it</h1>
<h1>This element does not belong to the SVG but we can style it</h1>
</div>
<svg id="diagram">
</svg>
<svg id="diagram"></svg>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = `
const graph = `
%%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
graph TD
A[Goose]
`;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
</script>
</body>
</body>
</html>

43
cypress/platform/render-after-error.html
View File

@@ -1,29 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
</head>
<body>
<div id="graph">
</div>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>
<body>
<div id="graph"></div>
<script src="./mermaid.js"></script>
<script>mermaid.init({ startOnLoad: false });
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
try {
console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
try {
console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
</script>
</body>
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
</script>
</body>
</html>

45
cypress/platform/rerender.html
View File

@@ -1,30 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
</head>
<body>
<div id="graph">
</div>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>
<body>
<div id="graph"></div>
<script src="./mermaid.js"></script>
<script>mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas');
rerender('XMas');
function rerender(text) {
var graphText = `graph TD
function rerender(text) {
var graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`;
var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph;
}
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>
var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph;
}
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>
</html>

2
cypress/platform/viewer.js
View File

@@ -46,7 +46,7 @@ function merge(current, update) {
// if update[key] exist, and it's not a string or array,
// we go in one level deeper
if (
current.hasOwnProperty(key) && // eslint-disable-line
current.hasOwnProperty(key) &&
typeof current[key] === 'object' &&
!(current[key] instanceof Array)
) {

25
cypress/platform/webpackUsage.html
View File

@@ -1,18 +1,17 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<style>
/* .mermaid {
<head>
<style>
/* .mermaid {
font-family: "trebuchet ms", verdana, arial;;
} */
/* .mermaid {
/* .mermaid {
font-family: 'arial';
} */
</style>
</head>
<body>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
</body>
</html>
</style>
</head>
<body>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
</body>
</html>

11
cypress/platform/xss.html
View File

@@ -1,16 +1,13 @@
<html>
<head>
<script src="/e2e.js"></script>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
.malware {
position: fixed;
bottom:0;
left:0;
right:0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;

2
cypress/support/eyes-index.d.ts vendored
View File

@@ -1 +1 @@
import "@applitools/eyes-cypress"
import '@applitools/eyes-cypress';