2.7 KB112 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 import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
44 // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
45
46 // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
47 // await mermaid.registerExternalDiagrams([mermaidMindmap]);
48
49 const ALLOWED_TAGS = [
50 'a',
51 'b',
52 'blockquote',
53 'br',
54 'dd',
55 'div',
56 'dl',
57 'dt',
58 'em',
59 'foreignObject',
60 'h1',
61 'h2',
62 'h3',
63 'h4',
64 'h5',
65 'h6',
66 'h7',
67 'h8',
68 'hr',
69 'i',
70 'li',
71 'ul',
72 'ol',
73 'p',
74 'pre',
75 'span',
76 'strike',
77 'strong',
78 'table',
79 'tbody',
80 'td',
81 'tfoot',
82 'th',
83 'thead',
84 'tr',
85 ];
86 mermaid.parseError = function (err, hash) {
87 // console.error('Mermaid error: ', err);
88 };
89 mermaid.initialize({
90 theme: 'base',
91 startOnLoad: true,
92 logLevel: 0,
93 flowchart: {
94 useMaxWidth: false,
95 htmlLabels: true,
96 },
97 gantt: {
98 useMaxWidth: false,
99 },
100 useMaxWidth: false,
101 });
102 function callback() {
103 alert('It worked');
104 }
105 mermaid.parseError = function (err, hash) {
106 console.error('In parse error:');
107 console.error(err);
108 };
109 </script>
110 </body>
111</html>
112