mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-25 00:44:10 +02:00
128 lines
4.2 KiB
HTML
128 lines
4.2 KiB
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/6.5.2/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>
|