GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Fix E2E Tests

Browse Source
This commit is contained in:
Sidharth Vinod 2023-02-19 14:03:11 +05:30
parent d2927435ab
commit 735aceb37a
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
74 changed files with 298 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.vite/server.ts
View File

@ -1,13 +1,7 @@
import express, { NextFunction, Request, Response } from 'express';
import express from 'express';
import cors from 'cors';
import { createServer as createViteServer } from 'vite';
const cors = (req: Request, res: Response, next: NextFunction) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
};
async function createServer() {
const app = express();

16
cypress/platform/bundle-test.js
View File

@ -49,13 +49,9 @@ mermaid.initialize({
],
},
});
mermaid.render(
'the-id-of-the-svg',
code,
(svg) => {
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
}
// ,document.querySelector('#tmp')
);
void (async () => {
const { svg } = await mermaid.render('the-id-of-the-svg', code);
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
})();

4
cypress/platform/class.html
View File

@ -113,8 +113,8 @@ classE o-- classF : aggregation
callback Shape "callbackFunction" "This is a tooltip for a callback"
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/click_security_loose.html
View File

@ -125,7 +125,6 @@
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div');
@ -162,6 +161,9 @@
document.getElementsByTagName('body')[0].appendChild(div);
}
</script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>
</body>

4
cypress/platform/click_security_other.html
View File

@ -59,8 +59,8 @@
Add another diagram to demo page : 48h
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

4
cypress/platform/click_security_sandbox.html
View File

@ -125,8 +125,8 @@
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

4
cypress/platform/click_security_strict.html
View File

@ -61,8 +61,8 @@
Add another diagram to demo page : 48h
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

4
cypress/platform/css1.html
View File

@ -28,8 +28,8 @@
end
A --> B
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}

4
cypress/platform/current2.html
View File

@ -107,8 +107,8 @@ Note over Alice,Bob: Looks
Note over Bob,Alice: Looks back
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

38
cypress/platform/e2e.html
View File

@ -1,32 +1,12 @@
<html>
<head>
<meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> -->
<script src="./viewer.js" type="module"></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"
/>
<style>
body {
/* font-family: 'Mansalva', cursive;*/
/* font-family: 'Mansalva', cursive; */
/* font-family: 'arial'; */
/* font-family: "trebuchet ms", verdana, arial; */
}
/* div {
font-family: 'arial';
} */
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
} */
/* :root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
--mermaid-font-family: '"Lucida Console", Monaco, monospace';
} */
svg {
border: 2px solid darkred;
}
@ -36,21 +16,5 @@
}
</style>
</head>
<body>
<!-- <script src="./mermaid.js"></script> -->
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
// mermaid.initialize({
// startOnLoad: false,
// useMaxWidth: true,
// // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
// // fontFamily: '\"trebuchet ms\", verdana, arial;'
// // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// // fontFamily: '"Mansalva", cursive',
// // fontFamily: '"Noto Sans SC", sans-serif'
// fontFamily: '"Noto Sans SC", sans-serif'
// });
</script>
</body>
<body></body>
</html>

4
cypress/platform/flow.html
View File

@ -29,8 +29,8 @@
click a_a "http://www.aftonbladet.se" "apa"
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',

14
cypress/platform/ghsa1.html
View File

@ -8,18 +8,18 @@
</div>
<svg id="diagram"></svg>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = `
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
graph TD
A[Goose]
`;
%%{ 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);
const { svg } = await mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
if (window.Cypress) {
window.rendered = true;

6
cypress/platform/ghsa2.html
View File

@ -8,8 +8,8 @@
</div>
<svg id="diagram"></svg>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = `
@ -19,7 +19,7 @@
`;
const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph);
const { svg } = await mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg;
if (window.Cypress) {
window.rendered = true;

16
cypress/platform/ghsa3.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -91,13 +91,11 @@
diagram += 'le> * { background : red}</style>test</p>"]';
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
if (window.Cypress) {
window.rendered = true;
}
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
if (window.Cypress) {
window.rendered = true;
}
</script>
</body>
</html>

4
cypress/platform/git-graph.html
View File

@ -43,8 +43,8 @@
cssClass "BankAccount" customCss
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/gitgraph.html
View File

@ -130,8 +130,8 @@
commit
merge main
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/gitgraph2.html
View File

@ -98,8 +98,8 @@
commit
merge main
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/huge.html
View File

File diff suppressed because one or more lines are too long

4
cypress/platform/info.html
View File

@ -7,8 +7,8 @@
<pre class="mermaid">
info
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',

4
cypress/platform/interaction.html
View File

@ -87,8 +87,8 @@
Add another diagram to demo page : 48h
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';

2
cypress/platform/per.html
View File

@ -59,7 +59,7 @@ A-->B
>
<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.js"></script>
<script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);

18
cypress/platform/regression/issue-1874.html
View File

@ -1,14 +1,4 @@
<html>
<head>
<script src="http://localhost:9000/mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'base',
themeVariables: {},
startOnLoad: true,
});
</script>
</head>
<body>
<h1>Example</h1>
<pre class="mermaid">
@ -26,4 +16,12 @@ sequenceDiagram
Note left of Ernie: Cookies are good
</pre>
</body>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
theme: 'base',
themeVariables: {},
startOnLoad: true,
});
</script>
</html>

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

@ -9,19 +9,18 @@
<body>
<div id="graph"></div>
<script src="./mermaid.js"></script>
<script>
mermaid.init({ startOnLoad: false });
<script type="module">
import mermaid from './mermaid.esm.mjs';
await mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
await mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
try {
console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`);
await mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
const { svg } = await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`);
document.getElementById('graph').innerHTML = svg;
</script>
</body>
</html>

16
cypress/platform/rerender.html
View File

@ -9,20 +9,20 @@
<body>
<div id="graph"></div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas');
function rerender(text) {
async function rerender(text) {
const graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`;
const graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph;
const { svg } = await mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
document.getElementById('graph').innerHTML = svg;
}
window.rerender = rerender;
await rerender('XMas');
</script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>

4
cypress/platform/showcase_base.html
View File

@ -313,8 +313,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_base_dark.html
View File

@ -308,8 +308,8 @@ gitGraph
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_dark.html
View File

@ -308,8 +308,8 @@ gitGraph
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_default.html
View File

@ -301,8 +301,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_forest.html
View File

@ -305,8 +305,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/showcase_neutral.html
View File

@ -305,8 +305,8 @@ requirementDiagram
merge release
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

6
cypress/platform/sidv.html
View File

@ -239,12 +239,6 @@ sequenceDiagram
Today: 1, -1h
</pre>
<!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
<!-- <script src="./mermaid.js"></script> -->
<script type="module">
import mermaid from '../../packages/mermaid/src/mermaid';
mermaid.parseError = function (err, hash) {

4
cypress/platform/subgraph.html
View File

@ -34,8 +34,8 @@
9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}

4
cypress/platform/theme-directives.html
View File

@ -120,8 +120,8 @@
</div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};

4
cypress/platform/user-journey.html
View File

@ -25,8 +25,8 @@
Get into car:4: Dad, Mum, Child 1, Child 2
Drive home:3: Dad
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

4
cypress/platform/vertices.html
View File

@ -26,8 +26,8 @@
A --> B --> C
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
function showFullFirstSquad(elemName) {
console.log('show ' + elemName);
}

29
cypress/platform/viewer.js
View File

@ -75,7 +75,7 @@ function merge(current, update) {
return current;
}
const contentLoadedApi = function () {
const contentLoadedApi = async function () {
let pos = document.location.href.indexOf('?graph=');
if (pos > 0) {
pos = pos + 7;
@ -102,38 +102,25 @@ const contentLoadedApi = function () {
mermaid2.initialize(cnf);
for (let i = 0; i < numCodes; i++) {
mermaid2.render(
const { svg, bindFunctions } = await mermaid2.render(
'newid' + i,
graphObj.code[i],
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
bindFunctions(div);
},
divs[i]
);
div.innerHTML = svg;
bindFunctions(div);
}
} else {
const div = document.createElement('div');
div.id = 'block';
div.className = 'mermaid';
// div.innerHTML = graphObj.code
console.warn('graphObj.mermaid', graphObj.mermaid);
document.getElementsByTagName('body')[0].appendChild(div);
mermaid2.initialize(graphObj.mermaid);
mermaid2.render(
'newid',
graphObj.code,
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
if (bindFunctions) {
bindFunctions(div);
}
},
div
);
const { svg, bindFunctions } = await mermaid2.render('newid', graphObj.code, div);
div.innerHTML = svg;
bindFunctions(div);
}
}
markRendered();
@ -148,7 +135,7 @@ if (typeof document !== 'undefined') {
function () {
if (this.location.href.match('xss.html')) {
this.console.log('Using api');
contentLoadedApi();
void contentLoadedApi();
} else {
this.console.log('Not using api');
void contentLoaded();

4
cypress/platform/xss.html
View File

@ -33,8 +33,8 @@
</script>
</head>
<body>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: false,
useMaxWidth: true,

11
cypress/platform/xss10.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -104,10 +104,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss11.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss12.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss13.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss14.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -104,10 +104,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss15.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -103,10 +103,9 @@
// diagram += "=xssAttack()> --> B";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss16.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss17.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -102,10 +102,9 @@
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss18.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -101,10 +101,9 @@
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss19.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -103,10 +103,9 @@ class Shape{
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

6
cypress/platform/xss2.html
View File

@ -48,8 +48,8 @@
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: true,
useMaxWidth: true,
@ -59,7 +59,7 @@
const handler = setInterval(() => {
cnt++;
a = {};
if (typeof a.polluted !== 'undefined') {
if (a.polluted !== undefined) {
clearInterval(handler);
xssAttack();
}

10
cypress/platform/xss20.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -101,10 +101,8 @@ A --> B["<a href='javasc`;
diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
// console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

12
cypress/platform/xss21.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -97,14 +97,12 @@
// A --> B["&lt;a href='javascript`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
let diagram = ` graph TD
A --> B["<a href='javasc`;
A --> B["<a href='javasc`;
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]';
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

4
cypress/platform/xss22.html
View File

@ -8,8 +8,8 @@
graph TD
A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>

4
cypress/platform/xss3.html
View File

@ -36,8 +36,8 @@
graph LR
A --> B
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: true,
useMaxWidth: true,

9
cypress/platform/xss4.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -95,9 +95,8 @@
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss5.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -99,10 +99,9 @@
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss6.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -97,10 +97,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss7.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -99,10 +99,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss8.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -98,10 +98,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

11
cypress/platform/xss9.html
View File

@ -49,8 +49,8 @@
<div id="diagram" class="mermaid"></div>
<div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
@ -98,10 +98,9 @@
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => {
console.log(res);
document.querySelector('#res').innerHTML = res;
});
const { svg } = await mermaid.render('diagram', diagram);
console.log(res);
document.querySelector('#res').innerHTML = svg;
</script>
</body>
</html>

22
demos/c4context.html
View File

@ -217,8 +217,8 @@
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [
'a',
'b',
@ -273,8 +273,7 @@
},
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
<script>
function testClick(nodeId) {
console.log('clicked', nodeId);
let originalBgColor = document.querySelector('body').style.backgroundColor;
@ -283,21 +282,18 @@
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
const testLineEndings = async (test, input) => {
try {
mermaid.render(test, input, () => {
//no-op
});
await mermaid.render(test, input);
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
await testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
await testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
await testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>
</html>

4
demos/classchart.html
View File

@ -154,8 +154,8 @@
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',
// themeCSS: '.node rect { fill: red; }',

4
demos/dataflowchart.html
View File

@ -34,8 +34,8 @@
noSide[|borders:no| stroke no side ];
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

2
demos/er.html
View File

@ -109,8 +109,8 @@
MANUFACTURER only one to zero or more CAR : makes
</pre>
<script src="./mermaid.js"></script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',

4
demos/flowchart.html
View File

@ -1507,8 +1507,8 @@
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

4
demos/gantt.html
View File

@ -182,8 +182,8 @@
}
</script>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',

4
demos/git.html
View File

@ -38,8 +38,8 @@
merge newbranch
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
const ALLOWED_TAGS = [
'a',
'b',

4
demos/journey.html
View File

@ -32,8 +32,8 @@
Sit down: 3: Me
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,

4
demos/requirements.html
View File

@ -159,8 +159,8 @@
An Example <- copies - test_entity2
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'neutral',
// themeCSS: '.node rect { fill: red; }',

4
demos/sequence.html
View File

@ -144,8 +144,8 @@
>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'base',
// themeCSS: '.node rect { fill: red; }',

4
demos/state.html
View File

@ -218,8 +218,8 @@
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'default',
// themeCSS: '.node rect { fill: red; }',

4
demos/timeline.html
View File

@ -23,8 +23,8 @@
1940 : fourth step : fifth step
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 1,

4
docs/config/usage.md
View File

@ -331,8 +331,8 @@ The future proof way of setting the configuration is by using the initialization
on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config);
</script>

4
package.json
View File

@ -58,8 +58,9 @@
"@commitlint/cli": "^17.2.0",
"@commitlint/config-conventional": "^17.2.0",
"@cspell/eslint-plugin": "^6.14.2",
"@types/cors": "^2.8.13",
"@types/eslint": "^8.4.10",
"@types/express": "^4.17.14",
"@types/express": "^4.17.17",
"@types/js-yaml": "^4.0.5",
"@types/jsdom": "^21.0.0",
"@types/lodash": "^4.14.188",
@ -73,6 +74,7 @@
"@vitest/spy": "^0.28.4",
"@vitest/ui": "^0.28.4",
"concurrently": "^7.5.0",
"cors": "^2.8.5",
"coveralls": "^3.1.1",
"cypress": "^12.0.0",
"cypress-image-snapshot": "^4.0.1",

4
packages/mermaid/src/docs/config/usage.md
View File

@ -327,8 +327,8 @@ The future proof way of setting the configuration is by using the initialization
on what kind of integration you use.
```html
<script src="../dist/mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
let config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config);
</script>

60
pnpm-lock.yaml generated
View File

@ -16,12 +16,15 @@ importers:
'@cspell/eslint-plugin':
specifier: ^6.14.2
version: 6.14.2
'@types/cors':
specifier: ^2.8.13
version: 2.8.13
'@types/eslint':
specifier: ^8.4.10
version: 8.4.10
'@types/express':
specifier: ^4.17.14
version: 4.17.14
specifier: ^4.17.17
version: 4.17.17
'@types/js-yaml':
specifier: ^4.0.5
version: 4.0.5
@ -61,6 +64,9 @@ importers:
concurrently:
specifier: ^7.5.0
version: 7.5.0
cors:
specifier: ^2.8.5
version: 2.8.5
coveralls:
specifier: ^3.1.1
version: 3.1.1
@ -2650,6 +2656,12 @@ packages:
'@types/node': 18.11.9
dev: true
/@types/cors/2.8.13:
resolution: {integrity: sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==}
dependencies:
'@types/node': 18.11.9
dev: true
/@types/cytoscape/3.19.9:
resolution: {integrity: sha512-oqCx0ZGiBO0UESbjgq052vjDAy2X53lZpMrWqiweMpvVwKw/2IiYDdzPFK6+f4tMfdv9YKEM9raO5bAZc3UYBg==}
dev: true
@ -2875,6 +2887,14 @@ packages:
'@types/range-parser': 1.2.4
dev: true
/@types/express-serve-static-core/4.17.33:
resolution: {integrity: sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==}
dependencies:
'@types/node': 18.11.9
'@types/qs': 6.9.7
'@types/range-parser': 1.2.4
dev: true
/@types/express/4.17.14:
resolution: {integrity: sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==}
dependencies:
@ -2884,6 +2904,15 @@ packages:
'@types/serve-static': 1.15.0
dev: true
/@types/express/4.17.17:
resolution: {integrity: sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==}
dependencies:
'@types/body-parser': 1.19.2
'@types/express-serve-static-core': 4.17.33
'@types/qs': 6.9.7
'@types/serve-static': 1.15.0
dev: true
/@types/flexsearch/0.7.3:
resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
dev: true
@ -4222,7 +4251,7 @@ packages:
/axios/0.27.2_debug@4.3.4:
resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
dependencies:
follow-redirects: 1.15.2_debug@4.3.2
follow-redirects: 1.15.2_debug@4.3.4
form-data: 4.0.0
transitivePeerDependencies:
- debug
@ -4965,6 +4994,14 @@ packages:
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
dev: true
/cors/2.8.5:
resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
engines: {node: '>= 0.10'}
dependencies:
object-assign: 4.1.1
vary: 1.1.2
dev: true
/cose-base/1.0.3:
resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
dependencies:
@ -6791,6 +6828,18 @@ packages:
debug: 4.3.2
dev: true
/follow-redirects/1.15.2_debug@4.3.4:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
dependencies:
debug: 4.3.4
dev: true
/foreground-child/2.0.0:
resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
engines: {node: '>=8.0.0'}
@ -9466,6 +9515,11 @@ packages:
resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
dev: true
/object-assign/4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
dev: true
/object-inspect/1.12.2:
resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
dev: true