2.9 KB84 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
53 click cl1 href "/empty.html"
54 click cl2 call clickByGantt("test", test, test)
55
56 section Last section
57 Describe gantt syntax :after doc1, 3d
58 Add gantt diagram to demo page : 20h
59 Add another diagram to demo page : 48h
60 </pre>
61
62 <script type="module">
63 import mermaid from './mermaid.esm.mjs';
64 function clickByFlow(elemName) {
65 const div = document.createElement('div');
66 div.className = 'created-by-click';
67 div.style = 'padding: 20px; background: green; color: white;';
68 div.innerText = 'Clicked By Flow';
69
70 document.getElementsByTagName('body')[0].appendChild(div);
71 }
72 function clickByGantt(elemName) {
73 const div = document.createElement('div');
74 div.className = 'created-by-gant-click';
75 div.style = 'padding: 20px; background: green; color: white;';
76 div.innerText = 'Clicked By Gant';
77
78 document.getElementsByTagName('body')[0].appendChild(div);
79 }
80 mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', logLevel: 1 });
81 </script>
82 </body>
83</html>
84