Fix E2E Tests

This commit is contained in:
Sidharth Vinod
2023-02-19 14:03:11 +05:30
parent d2927435ab
commit 735aceb37a
74 changed files with 298 additions and 334 deletions

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;
})();

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);
};

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>

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';

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';

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';

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);
}

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);
};

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>

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; }',

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;

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;

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>

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);
};

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);
};

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);
};

File diff suppressed because one or more lines are too long

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; }',

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';

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);

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>

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>

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>

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);
};

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);
};

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);
};

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);
};

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);
};

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);
};

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) {

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);
}

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);
};

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,

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);
}

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();

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,

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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();
}

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>

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>

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>

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,

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>

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>

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>

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>

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>

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>