Skip to main content

Gantt Diagram

A Gantt chart is a type of bar chart that illustrates a project schedule, named after its popularizer, Henry Gantt (1861–1919), who designed such a chart around the years 1910–1915. Modern Gantt charts also show the dependency relationships between activities and the current schedule status.


The syntax and layout logic of Gantt diagrams is based on Mermaid 8.14, but there are some subtle differences.

Simple Demo

  title Gantt example

  dateFormat YYYY-MM-DDTHH
  axisFormat MM-DD
  axisInterval 1w

  section Develop Prototype
  "Write grammar"       : t-a, 2022-2-17, 2022-2-23
  "Write artist"        : t-b, 2022-2-23, 2022-3-15

  %% the day I started typing the docs
  markDate 2022-3-15T20

  section Documentation
  "Write docs"          : t-c, 2022-3-15, 5d

  section Optimize
  "Add axisInterval" : 2022-3-28, 2022-4-04

  section Release
  "Release" : milestone, 2022-4-06, 0d

Set attributes

titleTitle of the diagramtitle My day
dateFormatThe format you use to specify time and datedateFormat YYYY-MM-DD
axisFormatThe format to display axis labelsaxisFormat hh:mm:ss
axisIntervalTime interval between two labels in the axis, if not specified, this can be inferred from axisFormataxisInterval 1w

Date and time format

Pintora uses dayjs to parse and format date and time, for more details please refer to dayjs docs.

YY18Two-digit year
YYYY2018Four-digit year
M1-12The month, beginning at 1
MM01-12The month, 2-digits
MMMJan-DecThe abbreviated month name
MMMMJanuary-DecemberThe full month name
D1-31The day of the month
DD01-31The day of the month, 2-digits
d0-6The day of the week, with Sunday as 0
ddSu-SaThe min name of the day of the week
dddSun-SatThe short name of the day of the week
ddddSunday-SaturdayThe name of the day of the week
H0-23The hour
HH00-23The hour, 2-digits
h1-12The hour, 12-hour clock
hh01-12The hour, 12-hour clock, 2-digits
m0-59The minute
mm00-59The minute, 2-digits
s0-59The second
ss00-59The second, 2-digits
SSS000-999The millisecond, 3-digits
Z+05:00The offset from UTC, ±HH:mm
ZZ+0500The offset from UTC, ±HHmm
aam pm

Time Interval

The time interval setting consists of number and format.

axisInterval 1d
axisInterval 2w
axisInterval 30m

The supported time formats are as follows.

  • y, year
  • M, month
  • w, week, this is an addition to dayjs format
  • d, day
  • h, hour
  • m, minute
  • s, second

Add Tasks

  %% group tasks with 'section' sentence
  section Normal tasks
  "With start and end" : 2022-3-15, 2022-3-16
  "With start and duration" : 2022-3-16, 2d
  "With only duration" : 1d

  section Ids and Relations
  "With id" : task-1, 2022-3-15, 2d
  "After another task" : after task-1, 3d

Override config

You can override diagarm config through @param directive.

All available configs can be seen in the Config page.

  @param barHeight 20
    "gantt": {
      "barBackground": "#F2C1C1",
      "sectionBackgrounds": ["#ccdd77", "#EAF4AF", null],
      "sectionLabelColor": "#00000"
  section One
  "Task A" : 2022-3-15, 2022-3-16
  "Task B" : 1d

  section Two
  "Task C" : 1d

  section Three
  "Task D" : 1d