4.2 KB129 lines
Blame
1<!doctype html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 .mermaid2 {
10 display: none;
11 }
12 </style>
13 </head>
14 <body>
15 <div style="display: flex">
16 <pre id="FirstLine" class="mermaid">
17 graph TB
18 Function-->URL
19 click Function clickByFlow "Add a div"
20 click URL "/info.html" "Visit <strong>mermaid docs</strong>"
21 </pre>
22 <pre id="FirstLine" class="mermaid2">
23 graph TB
24 1Function-->2URL
25 click 1Function clickByFlow "Add a div"
26 click 2URL "/info.html" "Visit <strong>mermaid docs</strong>"
27 </pre>
28
29 <pre id="FirstLine" class="mermaid2">
30 classDiagram
31 class Test
32 class ShapeLink
33 link ShapeLink "/info.html" "This is a tooltip for a link"
34 class ShapeCallback
35 callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
36 </pre>
37 <pre id="FirstLine" class="mermaid">
38 classDiagram-v2
39 class ShapeCallback
40 callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
41 </pre>
42 <pre id="FirstLine" class="mermaid">
43 classDiagram-v2
44 class ShapeLink
45 link ShapeLink "/info.html" "This is a tooltip for a link"
46 </pre>
47 </div>
48
49 <pre class="mermaid2">
50 gantt
51 dateFormat YYYY-MM-DD
52 axisFormat %d/%m
53 title Adding GANTT diagram to mermaid
54 excludes weekdays 2014-01-10
55
56 section A section
57 Completed task :done, des1, 2014-01-06,2014-01-08
58 Active task :active, des2, 2014-01-09, 3d
59 Future task : des3, after des2, 5d
60 Future task2 : des4, after des3, 5d
61
62 section Critical tasks
63 Completed task in the critical line :crit, done, 2014-01-06,24h
64 Implement parser and jison :crit, done, after des1, 2d
65 Create tests for parser :crit, active, 3d
66 Future task in critical line :crit, 5d
67 Create tests for renderer :2d
68 Add to mermaid :1d
69
70 section Documentation
71 Describe gantt syntax :active, a1, after des1, 3d
72 Add gantt diagram to demo page :after a1 , 20h
73 Add another diagram to demo page :doc1, after a1 , 48h
74
75 section Clickable
76 Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
77 Calling a Callback (look at the console log) :cl2, after cl1, 3d
78 Calling a Callback with args :cl3, after cl1, 3d
79
80 click cl1 href "/info.html"
81 click cl2 call clickByGantt()
82 click cl3 call clickByGantt("test1", test2, test3)
83
84 section Last section
85 Describe gantt syntax :after doc1, 3d
86 Add gantt diagram to demo page : 20h
87 Add another diagram to demo page : 48h
88 </pre>
89
90 <script type="module">
91 import mermaid from './mermaid.esm.mjs';
92 function clickByFlow(elemName) {
93 const div = document.createElement('div');
94 div.className = 'created-by-click';
95 div.style = 'padding: 20px; background: green; color: white;';
96 div.innerText = 'Clicked By Flow';
97
98 document.getElementsByTagName('body')[0].appendChild(div);
99 }
100 function clickByGantt(arg1, arg2, arg3) {
101 const div = document.createElement('div');
102 div.className = 'created-by-gant-click';
103 div.style = 'padding: 20px; background: green; color: white;';
104 div.innerText = 'Clicked By Gant';
105 if (arg1) {
106 div.innerText += ' ' + arg1;
107 }
108 if (arg2) {
109 div.innerText += ' ' + arg2;
110 }
111 if (arg3) {
112 div.innerText += ' ' + arg3;
113 }
114
115 document.getElementsByTagName('body')[0].appendChild(div);
116 }
117 function clickByClass() {
118 const div = document.createElement('div');
119 div.className = 'created-by-class-click';
120 div.style = 'padding: 20px; background: purple; color: white;';
121 div.innerText = 'Clicked By Class';
122
123 document.getElementsByTagName('body')[0].appendChild(div);
124 }
125 mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
126 </script>
127 </body>
128</html>
129