2.4 KB107 lines
Blame
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Mindmap Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 div.mermaid {
10 /* font-family: 'trebuchet ms', verdana, arial; */
11 font-family: 'Courier New', Courier, monospace !important;
12 }
13 </style>
14 </head>
15
16 <body>
17 <h1>Mindmap diagram demo</h1>
18 <pre class="mermaid">
19 mindmap
20 root
21 child1((Circle))
22 grandchild 1
23 grandchild 2
24 child2(Round rectangle)
25 grandchild 3
26 grandchild 4
27 child3[Square]
28 grandchild 5
29 ::icon(mdi mdi-fire)
30 gc6((grand<br/>child 6))
31 ::icon(mdi mdi-fire)
32 gc7((grand<br/>grand<br/>child 8))
33 </pre>
34
35 <h2>Mindmap with root wrapping text and a shape</h2>
36 <pre class="mermaid">
37 mindmap
38 root[A root with a long text that wraps to keep the node size in check]
39 </pre>
40
41 <script type="module">
42 import mermaid from './mermaid.esm.mjs';
43
44 const ALLOWED_TAGS = [
45 'a',
46 'b',
47 'blockquote',
48 'br',
49 'dd',
50 'div',
51 'dl',
52 'dt',
53 'em',
54 'foreignObject',
55 'h1',
56 'h2',
57 'h3',
58 'h4',
59 'h5',
60 'h6',
61 'h7',
62 'h8',
63 'hr',
64 'i',
65 'li',
66 'ul',
67 'ol',
68 'p',
69 'pre',
70 'span',
71 'strike',
72 'strong',
73 'table',
74 'tbody',
75 'td',
76 'tfoot',
77 'th',
78 'thead',
79 'tr',
80 ];
81 mermaid.parseError = function (err, hash) {
82 // console.error('Mermaid error: ', err);
83 };
84 mermaid.initialize({
85 theme: 'base',
86 startOnLoad: true,
87 logLevel: 0,
88 flowchart: {
89 useMaxWidth: false,
90 htmlLabels: true,
91 },
92 gantt: {
93 useMaxWidth: false,
94 },
95 useMaxWidth: false,
96 });
97 function callback() {
98 alert('It worked');
99 }
100 mermaid.parseError = function (err, hash) {
101 console.error('In parse error:');
102 console.error(err);
103 };
104 </script>
105 </body>
106</html>
107