2022-06-21 21:46:37 +02:00
|
|
|
<html>
|
2022-09-04 21:30:47 +02:00
|
|
|
<script>
|
2022-06-21 21:46:37 +02:00
|
|
|
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
|
2022-09-04 21:30:47 +02:00
|
|
|
</script>
|
|
|
|
|
<body>
|
2022-06-21 21:46:37 +02:00
|
|
|
<div id="target">
|
2022-09-04 21:30:47 +02:00
|
|
|
<h1>This element does not belong to the SVG but we can style it</h1>
|
2022-06-21 21:46:37 +02:00
|
|
|
</div>
|
2022-09-04 21:30:47 +02:00
|
|
|
<svg id="diagram"></svg>
|
2022-06-21 21:46:37 +02:00
|
|
|
|
2023-02-19 09:33:11 +01:00
|
|
|
<script type="module">
|
|
|
|
|
import mermaid from './mermaid.esm.mjs';
|
2022-09-04 21:30:47 +02:00
|
|
|
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
2022-06-21 21:46:37 +02:00
|
|
|
|
2022-09-04 21:30:47 +02:00
|
|
|
const graph = `
|
2022-06-21 21:46:37 +02:00
|
|
|
%%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
|
|
|
|
|
graph TD
|
|
|
|
|
A[Goose]
|
|
|
|
|
`;
|
|
|
|
|
|
2022-09-04 21:30:47 +02:00
|
|
|
const diagram = document.getElementById('diagram');
|
2023-02-19 09:33:11 +01:00
|
|
|
const { svg } = await mermaid.render('diagram-svg', graph);
|
2022-09-04 21:30:47 +02:00
|
|
|
diagram.innerHTML = svg;
|
2023-01-16 08:48:16 +01:00
|
|
|
if (window.Cypress) {
|
|
|
|
|
window.rendered = true;
|
|
|
|
|
}
|
2022-06-21 21:46:37 +02:00
|
|
|
</script>
|
2022-09-04 21:30:47 +02:00
|
|
|
</body>
|
2022-06-21 21:46:37 +02:00
|
|
|
</html>
|
