5.8 KB171 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 class="mermaid">
17 graph TB
18 FunctionTest1-->URLTest1
19 click FunctionTest1 clickByFlow "Add a div"
20 click URLTest1 "/empty.html" "Visit <strong>mermaid docs</strong>"
21 </pre>
22 <pre class="mermaid">
23 graph TB
24 1Function--->2URL
25 click 1Function clickByFlow "Add a div"
26 click 2URL "/empty.html" "Visit <strong>mermaid docs</strong>"
27 </pre>
28 <pre class="mermaid">
29 flowchart TB
30 FunctionTest2-->URLTest2
31 click FunctionTest2 clickByFlow "Add a div"
32 click URLTest2 "/empty.html" "Visit <strong>mermaid docs</strong>" _self
33 </pre>
34 <pre class="mermaid">
35 flowchart TB
36 10Function--->20URL
37 click 10Function clickByFlow "Add a div"
38 click 20URL "/empty.html" "Visit <strong>mermaid docs</strong>" _self
39 </pre>
40
41 <pre class="mermaid">
42 classDiagram
43 class ShapeLink
44 link ShapeLink "/empty.html" "This is a tooltip for a link"
45 class ShapeCallback
46 callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
47 </pre>
48 <pre class="mermaid">
49 classDiagram-v2
50 class ShapeLink2
51 link ShapeLink2 "/empty.html" "This is a tooltip for a link"
52 class ShapeCallback2
53 callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
54 </pre>
55 </div>
56
57 <pre class="mermaid">
58 gantt
59 dateFormat YYYY-MM-DD
60 axisFormat %d/%m
61 title Adding GANTT diagram to mermaid
62 excludes weekdays 2014-01-10
63
64 section A section
65 Completed task :done, des1, 2014-01-06,2014-01-08
66 Active task :active, des2, 2014-01-09, 3d
67 Future task : des3, after des2, 5d
68 Future task2 : des4, after des3, 5d
69
70 section Critical tasks
71 Completed task in the critical line :crit, done, 2014-01-06,24h
72 Implement parser and jison :crit, done, after des1, 2d
73 Create tests for parser :crit, active, 3d
74 Future task in critical line :crit, 5d
75 Create tests for renderer :2d
76 Add to mermaid :1d
77
78 section Documentation
79 Describe gantt syntax :active, a1, after des1, 3d
80 Add gantt diagram to demo page :after a1 , 20h
81 Add another diagram to demo page :doc1, after a1 , 48h
82
83 section Clickable
84 Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
85 Calling a Callback (look at the console log) :cl2, after cl1, 3d
86 Calling a Callback with args :cl3, after cl1, 3d
87
88 click cl1 href "/empty.html"
89 click cl2 call clickByGantt()
90 click cl3 call clickByGantt("test1", test2, test3)
91
92 section Last section
93 Describe gantt syntax :after doc1, 3d
94 Add gantt diagram to demo page : 20h
95 Add another diagram to demo page : 48h
96 </pre>
97 <div style="display: flex">
98 <pre class="mermaid">
99 graph TB
100 FunctionArgTest2-->URL
101 click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
102 click URL "/empty.html" "Visit <strong>mermaid docs</strong>"
103 </pre>
104 <pre class="mermaid">
105 flowchart TB
106 2FunctionArg-->URL
107 click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
108 click URL "/empty.html" "Visit <strong>mermaid docs</strong>"
109 </pre>
110
111 <pre class="mermaid">
112 classDiagram
113 class ShapeLink
114 link ShapeLink "/empty.html" "This is a tooltip for a link"
115 class ShapeCallback
116 click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
117 </pre>
118
119 <pre class="mermaid">
120 classDiagram-v2
121 class ShapeLink2
122 link ShapeLink2 "/empty.html" "This is a tooltip for a link"
123 class ShapeCallback2
124 click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
125 </pre>
126 </div>
127
128 <script>
129 function clickByFlow(elemName) {
130 const div = document.createElement('div');
131 div.className = 'created-by-click';
132 div.style = 'padding: 20px; background: green; color: white;';
133 div.innerText = 'Clicked By Flow';
134
135 document.getElementsByTagName('body')[0].appendChild(div);
136 }
137 function clickByFlowArg(argument) {
138 const div = document.createElement('div');
139 div.className = 'created-by-click-2';
140 div.style = 'padding: 20px; background: green; color: white;';
141 div.innerText = 'Clicked By Flow: ' + argument;
142
143 document.getElementsByTagName('body')[0].appendChild(div);
144 }
145 function clickByGantt(arg1, arg2, arg3) {
146 const div = document.createElement('div');
147 div.className = 'created-by-gant-click';
148 div.style = 'padding: 20px; background: green; color: white;';
149 div.innerText = 'Clicked By Gant';
150 if (arg1) div.innerText += ' ' + arg1;
151 if (arg2) div.innerText += ' ' + arg2;
152 if (arg3) div.innerText += ' ' + arg3;
153
154 document.getElementsByTagName('body')[0].appendChild(div);
155 }
156 function clickByClass(arg) {
157 const div = document.createElement('div');
158 div.className = 'created-by-class-click';
159 div.style = 'padding: 20px; background: purple; color: white;';
160 div.innerText = 'Clicked By Class' + (arg ? arg : '');
161
162 document.getElementsByTagName('body')[0].appendChild(div);
163 }
164 </script>
165 <script type="module">
166 import mermaid from './mermaid.esm.mjs';
167 mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
168 </script>
169 </body>
170</html>
171