3.1 KB89 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 </head>
9 <body>
10 <pre id="FirstLine" class="mermaid">
11 graph TB
12 Function1-->URL1
13 click Function1 clickByFlow "Add a div"
14 click URL1 "/empty.html" "Visit <strong>mermaid docs</strong>"
15 </pre>
16 <pre id="FirstLine" class="mermaid">
17 graph TB
18 1Function-->2URL
19 click 1Function clickByFlow "Add a div"
20 click 2URL "/empty.html" "Visit <strong>mermaid docs</strong>"
21 </pre>
22
23 <pre class="mermaid">
24 gantt
25 dateFormat YYYY-MM-DD
26 axisFormat %d/%m
27 title Adding GANTT diagram to mermaid
28 excludes weekdays 2014-01-10
29
30 section A section
31 Completed task :done, des1, 2014-01-06,2014-01-08
32 Active task :active, des2, 2014-01-09, 3d
33 Future task : des3, after des2, 5d
34 Future task2 : des4, after des3, 5d
35
36 section Critical tasks
37 Completed task in the critical line :crit, done, 2014-01-06,24h
38 Implement parser and jison :crit, done, after des1, 2d
39 Create tests for parser :crit, active, 3d
40 Future task in critical line :crit, 5d
41 Create tests for renderer :2d
42 Add to mermaid :1d
43
44 section Documentation
45 Describe gantt syntax :active, a1, after des1, 3d
46 Add gantt diagram to demo page :after a1 , 20h
47 Add another diagram to demo page :doc1, after a1 , 48h
48
49 section Clickable
50 Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
51 Calling a Callback (look at the console log) :cl2, after cl1, 3d
52 Calling a Callback with args :cl3, after cl1, 3d
53
54 click cl1 href "/empty.html"
55 click cl2 call clickByGantt()
56 click cl3 call clickByGantt("test1", test2, test3)
57
58 section Last section
59 Describe gantt syntax :after doc1, 3d
60 Add gantt diagram to demo page : 20h
61 Add another diagram to demo page : 48h
62 </pre>
63
64 <script type="module">
65 import mermaid from './mermaid.esm.mjs';
66 function clickByFlow(elemName) {
67 const div = document.createElement('div');
68 div.className = 'created-by-click';
69 div.style = 'padding: 20px; background: green; color: white;';
70 div.innerText = 'Clicked By Flow';
71
72 document.getElementsByTagName('body')[0].appendChild(div);
73 }
74 function clickByGantt(arg1, arg2, arg3) {
75 const div = document.createElement('div');
76 div.className = 'created-by-gant-click';
77 div.style = 'padding: 20px; background: green; color: white;';
78 div.innerText = 'Clicked By Gant';
79 if (arg1) div.innerText += ' ' + arg1;
80 if (arg2) div.innerText += ' ' + arg2;
81 if (arg3) div.innerText += ' ' + arg3;
82
83 document.getElementsByTagName('body')[0].appendChild(div);
84 }
85 mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
86 </script>
87 </body>
88</html>
89