mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
59264a33d7
1. Added a Gantt diagram that demonstrates to users that hashtages and semicolons can be added to titles, sections, and task data. Changes to gantt.spec.js 1. Added unit tests to ensure that semicolons and hashtags didn't break the functionality of the gantt diagram when used in titles, sections or task data. Changes to /parser/gantt.spec.js 1. Added rendering tests to ensure that semicolons and hashtags in titles, sections, and task data didn't break the rendering of Gantt diagrams.
241 lines
6.5 KiB
HTML
241 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Gantt | Mermaid Quick Test Page</title>
|
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
|
<style>
|
|
div.mermaid {
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Gantt chart diagram demos</h1>
|
|
<!-- accDescription Tasks for Q4 -->
|
|
<pre class="mermaid">
|
|
gantt
|
|
title A Gantt Diagram
|
|
accTitle: A simple sample gantt diagram
|
|
accDescr: 2 sections with 2 tasks each, from 2014
|
|
dateFormat YYYY-MM-DD
|
|
section Section
|
|
A task :a1, 2014-01-01, 30d
|
|
Another task :after a1 , 20d
|
|
section Another
|
|
Task in sec :2014-01-12 , 12d
|
|
another task : 24d
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
title #; Gantt Diagrams Allow Semicolons and Hashtags #;!
|
|
accTitle: A simple sample gantt diagram
|
|
accDescr: 2 sections with 2 tasks each, from 2014
|
|
dateFormat YYYY-MM-DD
|
|
section #;Section
|
|
#;A task :a1, 2014-01-01, 30d
|
|
#;Another task :after a1 , 20d
|
|
section #;Another
|
|
Task in sec :2014-01-12 , 12d
|
|
another task : 24d
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
title Airworks roadmap
|
|
dateFormat YYYY-MM-DD
|
|
axisFormat %m-%d %a
|
|
excludes weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
|
|
includes 2021-10-09
|
|
|
|
section Airworks 3.4.1
|
|
开发 :b, 2021-10-07, 5d
|
|
测试 :after b, 4d
|
|
OK :milestore
|
|
section Airworks 3.4.2
|
|
开发 :a, 2021-10-09, 4d
|
|
测试 :after a, 4d
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
title Exclusive end dates (Manual date should end on 3d)
|
|
dateFormat YYYY-MM-DD
|
|
axisFormat %d
|
|
section Section1
|
|
2 Days: 1, 2019-01-01,2d
|
|
Manual Date: 2, 2019-01-01,2019-01-03
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
title Inclusive end dates (Manual date should end on 4th)
|
|
dateFormat YYYY-MM-DD
|
|
axisFormat %d
|
|
inclusiveEndDates
|
|
section Section1
|
|
2 Days: 1, 2019-01-01,2d
|
|
Manual Date: 2, 2019-01-01,2019-01-03
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
title Hide today marker (vertical line should not be visible)
|
|
dateFormat Z
|
|
axisFormat %d/%m
|
|
todayMarker off
|
|
section Section1
|
|
Today: 1, 08-08-09-01:00, 5min
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
|
dateFormat Z
|
|
axisFormat %d/%m
|
|
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
|
section Section1
|
|
Today: 1, 08-08-09-01:00, 5min
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
axisFormat %d/%m
|
|
title Adding GANTT diagram to mermaid
|
|
excludes weekdays 2014-01-10
|
|
|
|
section A section
|
|
Completed task :done, des1, 2014-01-06,2014-01-08
|
|
Active task :active, des2, 2014-01-09, 3d
|
|
Future task : des3, after des2, 5d
|
|
Future task2 : des4, after des3, 5d
|
|
|
|
section Critical tasks
|
|
Completed task in the critical line :crit, done, 2014-01-06,24h
|
|
Implement parser and jison :crit, done, after des1, 2d
|
|
Create tests for parser :crit, active, 3d
|
|
Future task in critical line :crit, 5d
|
|
Create tests for renderer :2d
|
|
Add to mermaid :1d
|
|
|
|
section Documentation
|
|
Describe gantt syntax :active, a1, after des1, 3d
|
|
Add gantt diagram to demo page :after a1 , 20h
|
|
Add another diagram to demo page :doc1, after a1 , 48h
|
|
|
|
section Clickable
|
|
Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10
|
|
Calling a Callback (look at the console log) :cl2, after cl1, 3d
|
|
|
|
click cl1 href "https://mermaidjs.github.io/"
|
|
click cl2 call ganttTestClick("test", test, test)
|
|
|
|
section Last section
|
|
Describe gantt syntax :after doc1, 3d
|
|
Add gantt diagram to demo page : 20h
|
|
Add another diagram to demo page : 48h
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
axisFormat %d/%m
|
|
title GANTT diagram with multiline section titles
|
|
excludes weekdays 2014-01-10
|
|
|
|
section A section<br>multiline
|
|
Completed task : done, des1, 2014-01-06,2014-01-08
|
|
Active task : active, des2, 2014-01-09, 3d
|
|
Future task : des3, after des2, 5d
|
|
Future task2 : des4, after des3, 5d
|
|
|
|
section Critical tasks<br />multiline
|
|
Completed task in the critical line : crit, done, 2014-01-06, 24h
|
|
Implement parser and jison : crit, done, after des1, 2d
|
|
Create tests for parser : crit, active, 3d
|
|
Future task in critical line : crit, 5d
|
|
Create tests for renderer : 2d
|
|
Add to mermaid : 1d
|
|
|
|
section Documentation<br />multiline
|
|
Describe gantt syntax : active, a1, after des1, 3d
|
|
Add gantt diagram to demo page : after a1, 20h
|
|
Add another diagram to demo page : doc1, after a1, 48h
|
|
|
|
section Last section<br />multiline
|
|
Describe gantt syntax : after doc1, 3d
|
|
Add gantt diagram to demo page : 20h
|
|
Add another diagram to demo page : 48h
|
|
</pre>
|
|
<hr />
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
displayMode: compact
|
|
---
|
|
gantt
|
|
title GANTT compact
|
|
dateFormat HH:mm:ss
|
|
axisFormat %Hh%M
|
|
|
|
section DB Clean
|
|
Clean: 12:00:00, 10m
|
|
Clean: 12:30:00, 12m
|
|
Clean: 13:00:00, 8m
|
|
Clean: 13:30:00, 9m
|
|
Clean: 14:00:00, 13m
|
|
Clean: 14:30:00, 10m
|
|
Clean: 15:00:00, 11m
|
|
|
|
section Sessions
|
|
A: 12:00:00, 63m
|
|
B: 12:30:00, 12m
|
|
C: 13:05:00, 12m
|
|
D: 13:06:00, 33m
|
|
E: 13:15:00, 55m
|
|
F: 13:20:00, 12m
|
|
G: 13:32:00, 18m
|
|
H: 13:50:00, 20m
|
|
I: 14:10:00, 10m
|
|
</pre>
|
|
<hr />
|
|
|
|
<script>
|
|
function ganttTestClick(a, b, c) {
|
|
console.log('a:', a);
|
|
console.log('b:', b);
|
|
console.log('c:', c);
|
|
}
|
|
function testClick(nodeId) {
|
|
console.log('clicked', nodeId);
|
|
let originalBgColor = document.querySelector('body').style.backgroundColor;
|
|
document.querySelector('body').style.backgroundColor = 'yellow';
|
|
setTimeout(function () {
|
|
document.querySelector('body').style.backgroundColor = originalBgColor;
|
|
}, 100);
|
|
}
|
|
</script>
|
|
|
|
<script type="module">
|
|
import mermaid from './mermaid.esm.mjs';
|
|
mermaid.initialize({
|
|
logLevel: 3,
|
|
securityLevel: 'loose',
|
|
gantt: { axisFormat: '%m/%d/%Y' },
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|