cypress/platform/knsv.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
width: 100%;
display: flex;
flex-direction: column;
margin-left: 20px;
}
h1 {
color: grey;
}
.mermaid2,
.mermaid3 {
display: none;
}
.mermaid {
}
.mermaid svg {
border: 1px solid purple;
/* font-size: 18px !important; */
fontfamily: 'courier';
}
</style>
</head>
<body>
<pre class="mermaid" style="width: 50%">
%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("`The dog in **the** hog.(1).. a a a a *very long text* about it
Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
</pre
>
<pre class="mermaid" style="width: 50%">
classDiagram-v2
classA -- classB : Inheritance
classA -- classC : link
classC -- classD : link
classB -- classD
</pre>
<pre class="mermaid" style="width: 50%">
sequenceDiagram
Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
loop Loopy
Bob->>Alice: Pasten
end
</pre>
<pre class="mermaid" style="width: 50%">
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
b("`The dog in **the** hog.(1)
NL`") --"`1o **bold**`"--> c[new strings svg labels]
</pre>
<pre class="mermaid" style="width: 50%">
%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("`The dog in **the** hog.(1)
NL`") --"`1o **bold**`"--> c[new strings html labels]
</pre>
<pre class="mermaid" style="width: 50%">
%%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
</pre>
<script type="module">
// import mindmap from '../../packages/mermaid-mindmap/src/detector';
// import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
import mermaid from './mermaid.esm.mjs';
// await mermaid.registerExternalDiagrams([example]);
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'forest',
startOnLoad: true,
logLevel: 0,
flowchart: {
// defaultRenderer: 'elk',
useMaxWidth: false,
// htmlLabels: false,
htmlLabels: true,
},
// htmlLabels: false,
gantt: {
useMaxWidth: false,
},
sequence: {
wrap: true,
},
useMaxWidth: false,
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
// mermaid.test1('first_slow', 1200).then((r) => console.info(r));
// mermaid.test1('second_fast', 200).then((r) => console.info(r));
// mermaid.test1('third_fast', 200).then((r) => console.info(r));
// mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
</script>
</body>
</html>