5.9 KB169 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 "/empty.html" "Visit <strong>mermaid docs</strong>"
21 </pre>
22 <pre id="FirstLine" 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 id="FirstLine" class="mermaid">
29 flowchart TB
30 Function-->URL
31 click Function clickByFlow "Add a div"
32 click URL "/empty.html" "Visit <strong>mermaid docs</strong>" _self
33 </pre>
34 <pre id="FirstLine" class="mermaid">
35 flowchart TB
36 1Function--->2URL
37 click 1Function clickByFlow "Add a div"
38 click 2URL "/empty.html" "Visit <strong>mermaid docs</strong>" _self
39 </pre>
40
41 <pre id="FirstLine" 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 id="FirstLine" 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 id="FirstLine" class="mermaid">
99 graph TB
100 FunctionArg-->URL
101 click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
102 click URL "/empty.html" "Visit <strong>mermaid docs</strong>"
103 </pre>
104 <pre id="FirstLine" class="mermaid">
105 flowchart TB
106 FunctionArg-->URL
107 click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
108 click URL "/empty.html" "Visit <strong>mermaid docs</strong>"
109 </pre>
110
111 <pre id="FirstLine" 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 id="FirstLine" 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 type="module">
129 import mermaid from './mermaid.esm.mjs';
130 function clickByFlow(elemName) {
131 const div = document.createElement('div');
132 div.className = 'created-by-click';
133 div.style = 'padding: 20px; background: green; color: white;';
134 div.innerText = 'Clicked By Flow';
135
136 document.getElementsByTagName('body')[0].appendChild(div);
137 }
138 function clickByFlowArg(argument) {
139 const div = document.createElement('div');
140 div.className = 'created-by-click-2';
141 div.style = 'padding: 20px; background: green; color: white;';
142 div.innerText = 'Clicked By Flow: ' + argument;
143
144 document.getElementsByTagName('body')[0].appendChild(div);
145 }
146 function clickByGantt(arg1, arg2, arg3) {
147 const div = document.createElement('div');
148 div.className = 'created-by-gant-click';
149 div.style = 'padding: 20px; background: green; color: white;';
150 div.innerText = 'Clicked By Gant';
151 if (arg1) div.innerText += ' ' + arg1;
152 if (arg2) div.innerText += ' ' + arg2;
153 if (arg3) div.innerText += ' ' + arg3;
154
155 document.getElementsByTagName('body')[0].appendChild(div);
156 }
157 function clickByClass(arg) {
158 const div = document.createElement('div');
159 div.className = 'created-by-class-click';
160 div.style = 'padding: 20px; background: purple; color: white;';
161 div.innerText = 'Clicked By Class' + (arg ? arg : '');
162
163 document.getElementsByTagName('body')[0].appendChild(div);
164 }
165 mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
166 </script>
167 </body>
168</html>
169