mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-03 12:25:22 +01:00
Prettier
This commit is contained in:
Sidharth Vinod
106
docs/gantt.md
106
docs/gantt.md
@@ -1,4 +1,5 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
|
||||
|
||||
# Gantt diagrams
|
||||
|
||||
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
|
||||
@@ -127,35 +128,35 @@ It is possible to set multiple dependencies separated by space:
|
||||
|
||||
### Title
|
||||
|
||||
The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole.
|
||||
The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
|
||||
|
||||
### Section statements
|
||||
|
||||
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
|
||||
|
||||
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*.
|
||||
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.
|
||||
|
||||
### Milestones
|
||||
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49,2min
|
||||
taska2 : 10min
|
||||
taska3 : 5min
|
||||
taska3 : 5min
|
||||
Final milestone : milestone, m2, 18:14, 2min
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49,2min
|
||||
taska2 : 10min
|
||||
taska3 : 5min
|
||||
taska3 : 5min
|
||||
Final milestone : milestone, m2, 18:14, 2min
|
||||
```
|
||||
|
||||
@@ -254,13 +255,13 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri
|
||||
### Classes used
|
||||
|
||||
Class | Description
|
||||
\--- | ---
|
||||
grid.tick | Styling for the Grid Lines
|
||||
grid.path | Styling for the Grid's borders
|
||||
.taskText | Task Text Styling
|
||||
\--- | ---
|
||||
grid.tick | Styling for the Grid Lines
|
||||
grid.path | Styling for the Grid's borders
|
||||
.taskText | Task Text Styling
|
||||
.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right.
|
||||
.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left.
|
||||
todayMarker | Toggle and Styling for the "Today Marker"
|
||||
.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left.
|
||||
todayMarker | Toggle and Styling for the "Today Marker"
|
||||
|
||||
### Sample stylesheet
|
||||
|
||||
@@ -276,11 +277,11 @@ todayMarker | Toggle and Styling for the "Today Marker"
|
||||
|
||||
#tag {
|
||||
color: white;
|
||||
background: #FA283D;
|
||||
background: #fa283d;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding:3px 6px;
|
||||
padding: 3px 6px;
|
||||
margin-left: -80px;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -294,20 +295,20 @@ todayMarker | Toggle and Styling for the "Today Marker"
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-width: 10px;
|
||||
border-bottom-color: #FA283D;
|
||||
border-bottom-color: #fa283d;
|
||||
top: -20px;
|
||||
}
|
||||
.taskText {
|
||||
fill:white;
|
||||
text-anchor:middle;
|
||||
fill: white;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.taskTextOutsideRight {
|
||||
fill:black;
|
||||
text-anchor:start;
|
||||
fill: black;
|
||||
text-anchor: start;
|
||||
}
|
||||
.taskTextOutsideLeft {
|
||||
fill:black;
|
||||
text-anchor:end;
|
||||
fill: black;
|
||||
text-anchor: end;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -332,12 +333,12 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co
|
||||
|
||||
```javascript
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin:25,
|
||||
barHeight:20,
|
||||
barGap:4,
|
||||
topPadding:75,
|
||||
sidePadding:75
|
||||
}
|
||||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding: 75,
|
||||
sidePadding: 75,
|
||||
};
|
||||
```
|
||||
|
||||
### Possible configuration params:
|
||||
@@ -354,39 +355,32 @@ It is possible to bind a click event to a task. The click can lead to either a j
|
||||
click taskId call callback(arguments)
|
||||
click taskId href URL
|
||||
|
||||
* taskId is the id of the task
|
||||
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
- taskId is the id of the task
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
||||
Beginner's tip—a full example using interactive links in an html context:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
<div class="mermaid">
|
||||
gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||
Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href
|
||||
"https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click
|
||||
cl3 call printTask()
|
||||
</div>
|
||||
|
||||
section Clickable
|
||||
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||
Print arguments :cl2, after cl1, 3d
|
||||
Print task :cl3, after cl2, 3d
|
||||
|
||||
click cl1 href "https://mermaidjs.github.io/"
|
||||
click cl2 call printArguments("test1", "test2", test3)
|
||||
click cl3 call printTask()
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var printArguments = function(arg1, arg2, arg3) {
|
||||
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
|
||||
}
|
||||
var printTask = function(taskId) {
|
||||
alert('taskId: ' + taskId);
|
||||
}
|
||||
var config = {
|
||||
startOnLoad:true,
|
||||
securityLevel:'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
<script>
|
||||
var printArguments = function (arg1, arg2, arg3) {
|
||||
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
|
||||
};
|
||||
var printTask = function (taskId) {
|
||||
alert('taskId: ' + taskId);
|
||||
};
|
||||
var config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user