6.5 KB241 lines
Blame
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Gantt | Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 div.mermaid {
10 font-family: 'Courier New', Courier, monospace !important;
11 }
12 </style>
13 </head>
14
15 <body>
16 <h1>Gantt chart diagram demos</h1>
17 <!-- accDescription Tasks for Q4 -->
18 <pre class="mermaid">
19 gantt
20 title A Gantt Diagram
21 accTitle: A simple sample gantt diagram
22 accDescr: 2 sections with 2 tasks each, from 2014
23 dateFormat YYYY-MM-DD
24 section Section
25 A task :a1, 2014-01-01, 30d
26 Another task :after a1 , 20d
27 section Another
28 Task in sec :2014-01-12 , 12d
29 another task : 24d
30 </pre>
31 <hr />
32
33 <pre class="mermaid">
34 gantt
35 title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
36 accTitle: A simple sample gantt diagram
37 accDescr: 2 sections with 2 tasks each, from 2014
38 dateFormat YYYY-MM-DD
39 section #;Section
40 #;A task :a1, 2014-01-01, 30d
41 #;Another task :after a1 , 20d
42 section #;Another
43 Task in sec :2014-01-12 , 12d
44 another task : 24d
45 </pre>
46 <hr />
47
48 <pre class="mermaid">
49 gantt
50 title Airworks roadmap
51 dateFormat YYYY-MM-DD
52 axisFormat %m-%d %a
53 excludes weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
54 includes 2021-10-09
55
56 section Airworks 3.4.1
57 开发 :b, 2021-10-07, 5d
58 测试 :after b, 4d
59 OK :milestore
60 section Airworks 3.4.2
61 开发 :a, 2021-10-09, 4d
62 测试 :after a, 4d
63 </pre>
64 <hr />
65
66 <pre class="mermaid">
67 gantt
68 title Exclusive end dates (Manual date should end on 3d)
69 dateFormat YYYY-MM-DD
70 axisFormat %d
71 section Section1
72 2 Days: 1, 2019-01-01,2d
73 Manual Date: 2, 2019-01-01,2019-01-03
74 </pre>
75 <hr />
76
77 <pre class="mermaid">
78 gantt
79 title Inclusive end dates (Manual date should end on 4th)
80 dateFormat YYYY-MM-DD
81 axisFormat %d
82 inclusiveEndDates
83 section Section1
84 2 Days: 1, 2019-01-01,2d
85 Manual Date: 2, 2019-01-01,2019-01-03
86 </pre>
87 <hr />
88
89 <pre class="mermaid">
90 gantt
91 title Hide today marker (vertical line should not be visible)
92 dateFormat Z
93 axisFormat %d/%m
94 todayMarker off
95 section Section1
96 Today: 1, 08-08-09-01:00, 5min
97 </pre>
98 <hr />
99
100 <pre class="mermaid">
101 gantt
102 title Style today marker (vertical line should be 5px wide and half-transparent blue)
103 dateFormat Z
104 axisFormat %d/%m
105 todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
106 section Section1
107 Today: 1, 08-08-09-01:00, 5min
108 </pre>
109 <hr />
110
111 <pre class="mermaid">
112 gantt
113 dateFormat YYYY-MM-DD
114 axisFormat %d/%m
115 title Adding GANTT diagram to mermaid
116 excludes weekdays 2014-01-10
117
118 section A section
119 Completed task :done, des1, 2014-01-06,2014-01-08
120 Active task :active, des2, 2014-01-09, 3d
121 Future task : des3, after des2, 5d
122 Future task2 : des4, after des3, 5d
123
124 section Critical tasks
125 Completed task in the critical line :crit, done, 2014-01-06,24h
126 Implement parser and jison :crit, done, after des1, 2d
127 Create tests for parser :crit, active, 3d
128 Future task in critical line :crit, 5d
129 Create tests for renderer :2d
130 Add to mermaid :1d
131
132 section Documentation
133 Describe gantt syntax :active, a1, after des1, 3d
134 Add gantt diagram to demo page :after a1 , 20h
135 Add another diagram to demo page :doc1, after a1 , 48h
136
137 section Clickable
138 Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
139 Calling a Callback (look at the console log) :cl2, after cl1, 3d
140
141 click cl1 href "https://mermaidjs.github.io/"
142 click cl2 call ganttTestClick("test", test, test)
143
144 section Last section
145 Describe gantt syntax :after doc1, 3d
146 Add gantt diagram to demo page : 20h
147 Add another diagram to demo page : 48h
148 </pre>
149 <hr />
150
151 <pre class="mermaid">
152 gantt
153 dateFormat YYYY-MM-DD
154 axisFormat %d/%m
155 title GANTT diagram with multiline section titles
156 excludes weekdays 2014-01-10
157
158 section A section<br>multiline
159 Completed task : done, des1, 2014-01-06,2014-01-08
160 Active task : active, des2, 2014-01-09, 3d
161 Future task : des3, after des2, 5d
162 Future task2 : des4, after des3, 5d
163
164 section Critical tasks<br />multiline
165 Completed task in the critical line : crit, done, 2014-01-06, 24h
166 Implement parser and jison : crit, done, after des1, 2d
167 Create tests for parser : crit, active, 3d
168 Future task in critical line : crit, 5d
169 Create tests for renderer : 2d
170 Add to mermaid : 1d
171
172 section Documentation<br />multiline
173 Describe gantt syntax : active, a1, after des1, 3d
174 Add gantt diagram to demo page : after a1, 20h
175 Add another diagram to demo page : doc1, after a1, 48h
176
177 section Last section<br />multiline
178 Describe gantt syntax : after doc1, 3d
179 Add gantt diagram to demo page : 20h
180 Add another diagram to demo page : 48h
181 </pre>
182 <hr />
183
184 <pre class="mermaid">
185 ---
186 displayMode: compact
187 ---
188 gantt
189 title GANTT compact
190 dateFormat HH:mm:ss
191 axisFormat %Hh%M
192
193 section DB Clean
194 Clean: 12:00:00, 10m
195 Clean: 12:30:00, 12m
196 Clean: 13:00:00, 8m
197 Clean: 13:30:00, 9m
198 Clean: 14:00:00, 13m
199 Clean: 14:30:00, 10m
200 Clean: 15:00:00, 11m
201
202 section Sessions
203 A: 12:00:00, 63m
204 B: 12:30:00, 12m
205 C: 13:05:00, 12m
206 D: 13:06:00, 33m
207 E: 13:15:00, 55m
208 F: 13:20:00, 12m
209 G: 13:32:00, 18m
210 H: 13:50:00, 20m
211 I: 14:10:00, 10m
212 </pre>
213 <hr />
214
215 <script>
216 function ganttTestClick(a, b, c) {
217 console.log('a:', a);
218 console.log('b:', b);
219 console.log('c:', c);
220 }
221 function testClick(nodeId) {
222 console.log('clicked', nodeId);
223 let originalBgColor = document.querySelector('body').style.backgroundColor;
224 document.querySelector('body').style.backgroundColor = 'yellow';
225 setTimeout(function () {
226 document.querySelector('body').style.backgroundColor = originalBgColor;
227 }, 100);
228 }
229 </script>
230
231 <script type="module">
232 import mermaid from './mermaid.esm.mjs';
233 mermaid.initialize({
234 logLevel: 3,
235 securityLevel: 'loose',
236 gantt: { axisFormat: '%m/%d/%Y' },
237 });
238 </script>
239 </body>
240</html>
241