Option Title My Example Gantt Chart!
Option AxisTicks 6
Option TodayMarker On
Option Dependencies On

group super group
task task 1, t1, pending, 01-01-2022, 2M, , 80%
task task 2, t2, done, after t1, 1M, t1
task task 3, t3,, 2W after t1, 3W, t1 t2 t4
milestone jalon\n1, m1,, after t3, t3

group superGroup2
milestone jalon 2, m2,, 02-15-2022, t1
task task 4, t4, active, 1D after m2, 2W, m2 t2

The gantt plugin generates a SVG image of a gantt chart complete with tasks, milestones, and dependencies for usage in any project. The gantt is generate by parsing the text in a code markup with the gantt language. Each line represent a separate option, group, task, milestone, or event.

\```gantt
Option Title My Gantt Chart!

Group This is a Group
Task task 1, t1, , 01-01-2022, 2M
Task task 2, t2, done, after t1, 1M
\```

Option Title My Gantt Chart!

Group This is a Group
Task task 1, t1, done, 01-01-2022, 2M
Task task 2, t2, , after t1, 1M

The keywords are **not** case-sensitive.

All options need to start with an option keyword.

Displays the specified title at the top of the chart Default value: empty

title: Format
**option** **title** Text with spaces

Display a vertical line on the time axis representing today. Default value: Off

title: Format
**option** **todaymarker** On

Changes Default value: 6

title: Format
**option** **axisticks** number

Displays the dependencies Default value: Off

title: Format
**option** **dependencies** On

This is optional. You can organize your tasks by group. All tasks and milestones defined after this group will be part of it until another group is defined.

title: Format
**group** text as title of the group

\```gantt
Option Title My Gantt Chart!

Group This is a Group
Task task 1, t1, , 01-01-2022, 2M
Task task 2, t2, , after t1, 1M

Group This is another \nGroup
Task task 3, t3, , after t1, 2W
Milestone important \nmilestone, m1, , after t3
\```

Option Title My Gantt Chart!

Group This is a Group
Task task 1, t1, , 01-01-2022, 2M
Task task 2, t2, , after t1, 1M

Group This is another \nGroup
Task task 3, t3, , after t1, 2W
Milestone important \nmilestone, m1, , after t3

If the title of a **group**, **task** or **milestone** appear too long, you can inster a line break using the symbol **\n** as used on the example above.

A task something to do or complete within a specified timeframe. As such a task has a Start Date, an End Date, a Title, and a Completion status. In addition, a task may have dependencies, and a progress. When defining a task, each parameter must be separated by a comma following the format below.

The class can be a user-defined CSS class. By default, 4 class are defined, representing different task completion status:

• pending
• in-progress
• done
• critical

title: Format
**Task** title, identified, class, start date, end date, dependencies (optional), progress (optional)

\```gantt
option dependencies On

Group Harry's Tasks
Task My Task,                          t1,           done, 01-01-2022, 2M

Group Karine's Tasks
Task My Other Task #3342,                t2, in-progress,        after t1, 06-30-2022
Task Task With Dependency,  d3,         critical, 2W after t1, 5W, t1
Task Task With Progress      ,  tp1,    pending , 01-01-2022, 3M,      ,0% 

\```

option dependencies On

Group Harry's Tasks
Task My Task,            t1,           done, 01-01-2022, 2M

Group Karin's Tasks
Task My Other Task #3342,  t2, in-progress,        after t1, 06/30/2022
Task Task With Dependency,  d3,         critical, 2W after t1, 5W, t1
Task Task With Progress      ,  tp1,         pending, 01-01-2022, 3M,      ,0% 

Start date and end date may be either absolute, relative or a duratin.

The system automatically recognizes the date format automatically. These formats are IETF-compliant RFC 2822 timestamps, and also strings in a version of ISO8601.

A relative date is calculated on the fly using a delay after the end date of a previously defined task or milestone. The delay is optional. If the delay is not specified, the system assumes a delay of 0D. The delay format follows the same rules as the duration below.

title: Format
Duration **after** taskIdentified
or
**after** taskIdentified

2W after t1
or
after t2

A duration is a number followed by the symbol of unit with no space. The units are defined as follows:

Define to wich task or milestone this depends on. The tasks or milestones are identified by their identifier. If multiple are specified, they must be separated by a space. The dependency inherit the class (i.e. color and style) from the originating task or milestone.

Task Analyze Spreadsheet, AS18, , 2W after AS11, 5W, **AS05 milestone4**

Don't forget to enable Dependencies to display them. Otherwise they will not appear.

If the task depends on another task defined in the future, the link will not be displayed

The progress is simply a percentage number. As of now, the progress is purely informative. It is planned to make it visual.

A Milestone is similar to a task but do not have an end date. The milestone follows the same concepts as the task.

title: Format
**Milestone** title, identifier, class, start date, dependencies (optional), progress (optional)

Events allow interactions with the tasks. As of now, only 1 interaction is available: Go To. Events can be added to either tasks or milestones. An event is defined by the identifier of the triggering task or milestone, the type of the event and some argument depending on the type of the event.

title: Format
**click** taskId, EventType, arg

Navigate to another page within obsidian. The URL is obtained with a right click on the note from the obsidian file explorer, and use the command Copy obsidian URL.

title: Format
**click** taskIdentified, **goto**, URL

Not yet supported

To create a custom class, simply create a CSS snippet, create a class, and use-it directly in the gantt markdown.

.block-language-gantt .tasks rect.in-progress,
.block-language-gantt .milestones rect.in-progress,
.block-language-gantt .dependencies path.arrow-head.in-progress {
	fill: #ff9200;
}

.block-language-gantt .dependencies path.in-progress {
	stroke: #ff9200;
}

To customize the gantt, simply create a CSS snippet with your custom rules. You can use the following classes: All classes are under the master class block-language-gantt

• The Go To Event only allows navigation to other obsidian pages. External URLs are not allowed for security reasons.