mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-27 03:09:43 +02:00
Fix E2E Tests
This commit is contained in:
@@ -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;
|
||||
})();
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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>
|
||||
|
@@ -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';
|
||||
|
@@ -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';
|
||||
|
@@ -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';
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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>
|
||||
|
@@ -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; }',
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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>
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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
@@ -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; }',
|
||||
|
@@ -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';
|
||||
|
@@ -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);
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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) {
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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,
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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();
|
||||
|
@@ -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,
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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();
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -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["<a href='javascript`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
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>
|
||||
|
@@ -8,8 +8,8 @@
|
||||
graph TD
|
||||
A --> B["<a href='javascript#9;t#colon;alert(document.location)'>AAA</a>"]
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
|
@@ -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,
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user