4.2 KB128 lines
Blame
1<html>
2 <head>
3 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
4 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
5 <link
6 rel="stylesheet"
7 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
8 />
9 <link
10 href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
11 rel="stylesheet"
12 />
13 <link
14 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
15 rel="stylesheet"
16 />
17 <style>
18 body {
19 /* background: rgb(221, 208, 208); */
20 /* background:#333; */
21 font-family: 'Arial';
22 /* font-size: 18px !important; */
23 width: 100%;
24 display: flex;
25 flex-direction: column;
26 margin-left: 20px;
27 }
28 h1 {
29 color: grey;
30 }
31 .mermaid2,
32 .mermaid3 {
33 display: none;
34 }
35 .mermaid {
36 }
37 .mermaid svg {
38 border: 1px solid purple;
39 /* font-size: 18px !important; */
40 fontfamily: 'courier';
41 }
42 </style>
43 </head>
44 <body>
45 <pre class="mermaid" style="width: 50%">
46 %%{init: {"flowchart": {"htmlLabels": true}} }%%
47 flowchart LR
48 b("`The dog in **the** hog.(1).. a a a a *very long text* about it
49 Word!
50
51 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
52
53 </pre
54 >
55 <pre class="mermaid" style="width: 50%">
56 classDiagram-v2
57
58 classA -- classB : Inheritance
59 classA -- classC : link
60 classC -- classD : link
61 classB -- classD
62 </pre>
63 <pre class="mermaid" style="width: 50%">
64 sequenceDiagram
65 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
66 loop Loopy
67 Bob->>Alice: Pasten
68 end
69 </pre>
70 <pre class="mermaid" style="width: 50%">
71 %%{init: {"flowchart": {"htmlLabels": false}} }%%
72 flowchart LR
73 b("`The dog in **the** hog.(1)
74 NL`") --"`1o **bold**`"--> c[new strings svg labels]
75 </pre>
76 <pre class="mermaid" style="width: 50%">
77 %%{init: {"flowchart": {"htmlLabels": true}} }%%
78 flowchart LR
79 b("`The dog in **the** hog.(1)
80 NL`") --"`1o **bold**`"--> c[new strings html labels]
81 </pre>
82 <pre class="mermaid" style="width: 50%">
83 %%{init: {"flowchart": {"htmlLabels": true}} }%%
84 flowchart LR
85 b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
86 </pre>
87 <script type="module">
88 // import mindmap from '../../packages/mermaid-mindmap/src/detector';
89 // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
90 import mermaid from './mermaid.esm.mjs';
91 // await mermaid.registerExternalDiagrams([example]);
92 mermaid.parseError = function (err, hash) {
93 // console.error('Mermaid error: ', err);
94 };
95 mermaid.initialize({
96 // theme: 'forest',
97 startOnLoad: true,
98 logLevel: 0,
99 flowchart: {
100 // defaultRenderer: 'elk',
101 useMaxWidth: false,
102 // htmlLabels: false,
103 htmlLabels: true,
104 },
105 // htmlLabels: false,
106 gantt: {
107 useMaxWidth: false,
108 },
109 sequence: {
110 wrap: true,
111 },
112 useMaxWidth: false,
113 });
114 function callback() {
115 alert('It worked');
116 }
117 mermaid.parseError = function (err, hash) {
118 console.error('In parse error:');
119 console.error(err);
120 };
121 // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
122 // mermaid.test1('second_fast', 200).then((r) => console.info(r));
123 // mermaid.test1('third_fast', 200).then((r) => console.info(r));
124 // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
125 </script>
126 </body>
127</html>
128