diff --git a/docs/syntax/gantt.html b/docs/syntax/gantt.html deleted file mode 100644 index 4a3156ac7..000000000 --- a/docs/syntax/gantt.html +++ /dev/null @@ -1,179939 +0,0 @@ - - - - - Gantt diagrams - - - - - - - - - -
-
- -

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. -

-
-

A note to users

-

- Gantt Charts will record each scheduled task as one continuous bar that extends from the - left to the right. The x axis represents time and the y records the different tasks and - the order in which they are to be completed. -

-

- It is important to remember that when a date, day, or collection of dates specific to a - task are "excluded", the Gantt Chart will accommodate those changes by extending an equal - number of days, towards the right, not by creating a gap inside the task. As shown here - -

-

- However, if the excluded dates are between two tasks that are set to start consecutively, - the excluded dates will be skipped graphically and left blank, and the following task will - begin after the end of the excluded dates. As shown here - -

-

- A Gantt chart is useful for tracking the amount of time it would take before a project is - finished, but it can also be used to graphically represent "non-working days", with a few - tweaks. -

-

- Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into - docs. -

- 
gantt
-    title A Gantt Diagram
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d
-

Syntax

- 
gantt
-    dateFormat  YYYY-MM-DD
-    title       Adding GANTT diagram functionality to mermaid
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
-    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
-    Functionality added                 :milestone, 2014-01-25, 0d
-
-    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 Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
-

- Tasks are by default sequential. A task start date defaults to the end date of the - preceding task. -

-

- A colon, :, separates the task title from its metadata. Metadata items are - separated by a comma, ,. Valid tags are active, - done, crit, and milestone. Tags are optional, but - if used, they must be specified first. After processing the tags, the remaining metadata - items are interpreted as follows: -

-
    -
  1. - If a single item is specified, it determines when the task ends. It can either be a - specific date/time or a duration. If a duration is specified, it is added to the start - date of the task to determine the end date of the task, taking into account any - exclusions. -
    2. -
  2. - If two items are specified, the last item is interpreted as in the previous case. The - first item can either specify an explicit start date/time (in the format specified by - dateFormat) or reference another task using - after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In the latter - case, the start date of the task will be set according to the latest end date of any - referenced task. -
    3. -
  3. - If three items are specified, the last two will be interpreted as in the previous case. - The first item will denote the ID of the task, which can be referenced using the - later <taskID> syntax. -
    4. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Metadata syntaxStart dateEnd dateID
<taskID>, <startDate>, <endDate>startdate as interpreted using dateformatendDate as interpreted using dateformattaskID
<taskID>, <startDate>, <length>startdate as interpreted using dateformatStart date + lengthtaskID
<taskID>, after <otherTaskId>, <endDate>End date of previously specified task otherTaskIDendDate as interpreted using dateformattaskID
<taskID>, after <otherTaskId>, <length>End date of previously specified task otherTaskIDStart date + lengthtaskID
<startDate>, <endDate>startdate as interpreted using dateformatenddate as interpreted using dateformatn/a
<startDate>, <length>startdate as interpreted using dateformatStart date + lengthn/a
after <otherTaskID>, <endDate>End date of previously specified task otherTaskIDenddate as interpreted using dateformatn/a
after <otherTaskID>, <length>End date of previously specified task otherTaskIDStart date + lengthn/a
<endDate>End date of preceding taskenddate as interpreted using dateformatn/a
<length>End date of preceding taskStart date + lengthn/a
-

- For simplicity, the table does not show the use of multiple tasks listed with the - after keyword. Here is an example of how to use it and how it's interpreted: -

- 
gantt
-    apple :a, 2017-07-20, 1w
-    banana :crit, b, 2017-07-23, 1d
-    cherry :active, c, after b a, 1d
-

Title

-

- 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, 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. -

- 
gantt
-    dateFormat HH:mm
-    axisFormat %H:%M
-    Initial milestone : milestone, m1, 17:49, 2m
-    Task A : 10m
-    Task B : 5m
-    Final milestone : milestone, m2, 18:08, 4m
-

Setting dates

-

- dateFormat defines the format of the date input of your - gantt elements. How these dates are represented in the rendered chart - output are defined by axisFormat. -

-

Input date format

-

- The default input date format is YYYY-MM-DD. You can define your custom - dateFormat. -

- 
dateFormat YYYY-MM-DD
-
-

The following formatting options are supported:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
InputExampleDescription
YYYY20144 digit year
YY142 digit year
Q1..4Quarter of year. Sets month to first month in quarter.
M MM1..12Month number
MMM MMMMJanuary..DecMonth name in locale set by dayjs.locale()
D DD1..31Day of month
Do1st..31stDay of month with ordinal
DDD DDDD1..365Day of year
X1410715640.579Unix timestamp
x1410715640579Unix ms timestamp
H HH0..2324 hour time
h hh1..1212 hour time used with a A.
a Aam pmPost or ante meridiem
m mm0..59Minutes
s ss0..59Seconds
S0..9Tenths of a second
SS0..99Hundreds of a second
SSS0..999Thousandths of a second
Z ZZ+12:00Offset from UTC as +-HH:mm, +-HHmm, or Z
-

- More info in: - https://day.js.org/docs/en/parse/string-format/ -

-

Output date format on the axis

-

- The default output date format is YYYY-MM-DD. You can define your custom - axisFormat, like 2020-Q1 for the first quarter of the year 2020. -

- 
axisFormat %Y-%m-%d
-
-

The following formatting strings are supported:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FormatDefinition
%aabbreviated weekday name
%Afull weekday name
%babbreviated month name
%Bfull month name
%cdate and time, as "%a %b %e %H:%M:%S %Y"
%dzero-padded day of the month as a decimal number [01,31]
%espace-padded day of the month as a decimal number [ 1,31]; equivalent to %_d
%Hhour (24-hour clock) as a decimal number [00,23]
%Ihour (12-hour clock) as a decimal number [01,12]
%jday of the year as a decimal number [001,366]
%mmonth as a decimal number [01,12]
%Mminute as a decimal number [00,59]
%Lmilliseconds as a decimal number [000, 999]
%peither AM or PM
%Ssecond as a decimal number [00,61]
%U - week number of the year (Sunday as the first day of the week) as a decimal number - [00,53] -
%wweekday as a decimal number [0(Sunday),6]
%W - week number of the year (Monday as the first day of the week) as a decimal number - [00,53] -
%xdate, as "%m/%d/%Y"
%Xtime, as "%H:%M:%S"
%yyear without century as a decimal number [00,99]
%Yyear with century as a decimal number
%Ztime zone offset, such as "-0700"
%%a literal "%" character
-

- More info in: - https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format -

-

Axis ticks (v10.3.0+)

-

- The default output ticks are auto. You can custom your tickInterval, like - 1day or 1week. -

- 
tickInterval 1day
-
-

The pattern is:

- 
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
-
-

- More info in: - https://github.com/d3/d3-time#interval_every -

-

- Week-based tickIntervals start the week on sunday by default. If you wish to - specify another weekday on which the tickInterval should start, use the - weekday option: -

- 
gantt
-  tickInterval 1week
-  weekday monday
- 
`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
-
-

Output in compact mode

-

- The compact mode allows you to display multiple tasks in the same row. Compact mode can be - enabled for a gantt chart by setting the display mode of the graph via preceeding YAML - settings. -

- 
---
-displayMode: compact
----
-gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :a2, 2014-01-20, 25d
-    Another one      :a3, 2014-02-10, 20d
-

Comments

-

- Comments can be entered within a gantt chart, which will be ignored by the parser. - Comments need to be on their own line and must be prefaced with %% (double - percent signs). Any text after the start of the comment to the next newline will be - treated as a comment, including any diagram syntax. -

- 
gantt
-    title A Gantt Diagram
-    %% This is a comment
-    dateFormat YYYY-MM-DD
-    section Section
-        A task          :a1, 2014-01-01, 30d
-        Another task    :after a1, 20d
-    section Another
-        Task in Another :2014-01-12, 12d
-        another task    :24d
-

Styling

-

- Styling of the Gantt diagram is done by defining a number of CSS classes. During - rendering, these classes are extracted from the file located at - src/diagrams/gantt/styles.js -

-

Classes used

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
grid.tickStyling for the Grid Lines
grid.pathStyling for the Grid's borders
.taskTextTask Text Styling
.taskTextOutsideRightStyling for Task Text that exceeds the activity bar towards the right.
.taskTextOutsideLeftStyling for Task Text that exceeds the activity bar, towards the left.
todayMarkerToggle and Styling for the "Today Marker"
-

Sample stylesheet

- 
.grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.grid path {
-  stroke-width: 0;
-}
-
-#tag {
-  color: white;
-  background: #fa283d;
-  width: 150px;
-  position: absolute;
-  display: none;
-  padding: 3px 6px;
-  margin-left: -80px;
-  font-size: 11px;
-}
-
-#tag:before {
-  border: solid transparent;
-  content: ' ';
-  height: 0;
-  left: 50%;
-  margin-left: -5px;
-  position: absolute;
-  width: 0;
-  border-width: 10px;
-  border-bottom-color: #fa283d;
-  top: -20px;
-}
-.taskText {
-  fill: white;
-  text-anchor: middle;
-}
-.taskTextOutsideRight {
-  fill: black;
-  text-anchor: start;
-}
-.taskTextOutsideLeft {
-  fill: black;
-  text-anchor: end;
-}
-
-

Today marker

-

- You can style or hide the marker for the current date. To style it, add a value for the - todayMarker key. -

- 
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
-
-

To hide the marker, set todayMarker to off.

- 
todayMarker off
-
-

Configuration

-

It is possible to adjust the margins for rendering the gantt diagram.

-

- This is done by defining the ganttConfig part of the configuration object. - How to use the CLI is described in the - mermaidCLI page. -

-

- mermaid.ganttConfig can be set to a JSON string with config parameters or the - corresponding object. -

- 
mermaid.ganttConfig = {
-  titleTopMargin: 25,
-  barHeight: 20,
-  barGap: 4,
-  topPadding: 75,
-  sidePadding: 75,
-};
-
-

Possible configuration params:

- - - - - - - - - - - - - - - - - - - - -
ParamDescriptionDefault value
mirrorActorTurns on/off the rendering of actors below the diagram as well as above itfalse
bottomMarginAdj - Adjusts how far down the graph ended. Wide borders styles with css could generate - unwanted clipping which is why this config param exists. - 1
-

Interaction

-

- It is possible to bind a click event to a task. The click can lead to either a javascript - callback or to a link which will be opened in the current browser tab. - Note: This functionality is disabled when using - securityLevel='strict' and enabled when using - securityLevel='loose'. -

- 
click taskId call callback(arguments)
-click taskId href URL
-
- -

Beginner's tip—a full example using interactive links in an html context:

- 
<body>
-  <pre 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()
-  </pre>
-
-  <script>
-    const printArguments = function (arg1, arg2, arg3) {
-      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
-    };
-    const printTask = function (taskId) {
-      alert('taskId: ' + taskId);
-    };
-    const config = {
-      startOnLoad: true,
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-
-

Examples

-

Bar chart (using gantt chart)

- 
gantt
-    title Git Issues - days since last update
-    dateFormat X
-    axisFormat %s
-    section Issue19062
-    71   : 0, 71
-    section Issue19401
-    36   : 0, 36
-    section Issue193
-    34   : 0, 34
-    section Issue7441
-    9    : 0, 9
-    section Issue1300
-    5    : 0, 5
-
-
- - - - -