Skip to main content

Mermaid 11.15.0

Mermaid Gantt chart cheat sheet

Use a Gantt chart to show dated work, overlaps and dependencies. Choose a timeline for narrative events without task durations, or a sequence diagram for messages between systems.

Build this in Gantt Chart Maker →

Quick start

Give each task a stable id; the next task can start when that id finishes.

Mermaid
Open in editor → 
gantt
  title Documentation release
  dateFormat YYYY-MM-DD
  todayMarker off
  section Preparation
  Outline :done, outline, 2026-10-05, 2d
  Review :active, review, after outline, 3d
  Publish :milestone, publish, after review, 0d

Loading…

Syntax reference

Syntax reference
SyntaxMeaning
gantt / title / sectionStart the diagram, name it and group task rows.
dateFormat YYYY-MM-DD / axisFormat %d %bInput uses Day.js date tokens; axis labels use D3 time-format tokens.
tickInterval 1week / weekday mondaySet tick spacing; weekday sets the start day for weekly ticks.
weekend friday / excludes weekends, 2026-10-12Choose Friday–Saturday weekends; excluded days extend duration-based tasks.
includes 2026-10-10An explicit included date overrides an exclusion. Use dates, not weekday names.
inclusiveEndDatesTreat explicitly supplied end dates as inclusive.
todayMarker off / todayMarker stroke:#0070f3,stroke-width:2pxHide or style the line for the current date.
Task :id, start, end / Task :id, start, 2dSeparate labels from metadata with a colon, then use commas between fields.
after a b / until c dStart after the latest referenced finish; end at the earliest referenced start.
500ms / 30s / 30m / 4h / 3d / 2w / 1M / 1yDuration units are case-sensitive: m means minutes, M means months. Decimals work.
done / active / crit / milestone / vertPut tags before the id. A milestone is a point; vert is a chart-wide marker without a row.
click id href "https://example.com" / click id call callback()Links and callbacks depend on host security settings; strict previews disable interaction.
topAxis / config.gantt.topAxis / config.gantt.displayMode: compactShow a top axis and pack non-overlapping tasks into shared rows.
%% / accTitle: / accDescr:Comments and accessible diagram descriptions.

Working days and axis labels

Exclusions skip working time, extending a duration rather than splitting its bar. Includes restore individual dates. Explicit end dates keep their supplied boundary; use inclusiveEndDates when the last date should count.

Mermaid
Open in editor → 
gantt
  dateFormat YYYY-MM-DD
  axisFormat %d %b
  tickInterval 1week
  weekday monday
  excludes weekends, 2026-10-12
  includes 2026-10-10
  todayMarker off
  section Writing
  Handbook :handbook, 2026-10-09, 4d
  Proofread :proof, after handbook, 2d

Loading…

Task ids, after and until

Use ids rather than labels for references. Multiple after ids wait for the latest finish. Until ends at the earliest start of its referenced tasks; keep every referenced task defined and avoid circular dependencies.

Mermaid
Open in editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Release
  Signoff :milestone, signoff, 2026-10-15, 0d
  Editing :edit, 2026-10-05, until signoff
  Testing :test, 2026-10-07, 3d
  Package :package, after edit test, 1d

Loading…

Status tags, milestones and vertical markers

Combine crit with done or active to highlight important work. A zero-duration milestone sits at its start date; a nonzero milestone is placed halfway through its duration. Vert spans the chart without occupying a task row.

Mermaid
Open in editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Delivery
  Draft :done, draft, 2026-10-05, 2d
  Validate :crit, active, validate, after draft, 3d
  Deadline :vert, deadline, 2026-10-09, 0d
  Approval :milestone, approval, after validate, 0d

Loading…

Task links and host security

Click attaches a URL or a JavaScript callback to a task id. A host must permit interaction; this site uses strict rendering, so the diagram below is deliberately non-interactive. Do not loosen security for untrusted diagram source.

Mermaid
Open in editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Notes
  Read guide :guide, 2026-10-05, 2d
  click guide href "https://themarkdowner.com"

Loading…

Compact layout and a top axis

Put configuration in YAML frontmatter before gantt. Compact mode shares rows where possible; it is a layout setting, not a resource allocation algorithm. The legacy %%{init: ...}%% directive is also supported, but frontmatter is easier to maintain.

Mermaid
Open in editor → 
---
config:
  gantt:
    displayMode: compact
    topAxis: true
---
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Tasks
  First pass :first, 2026-10-05, 2d
  Second pass :second, after first, 2d

Loading…

Common mistakes

Mixing date token systems

YYYY-MM-DD belongs in dateFormat; %d %b belongs in axisFormat. Changing the axis does not change how task dates are parsed.

Inventing a duration unit

An invalid duration may silently become zero length. Keep valid suffixes and check the rendered end date.

Using a nonexistent directive

There is no dates directive. Set dateFormat on its own line.

Invalid syntax — corrected example below

gantt
  dates YYYY-MM-DD
Mermaid
Open in editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Check
  Verify :check, 2026-10-05, 1d

Loading…

Limitations

  • This is a schedule visualization, not a project engine: Mermaid does not calculate a critical path or enforce resource capacity.
  • Exclusions affect duration arithmetic; explicitly supplied end dates do not automatically move.
  • Task click actions are disabled under strict security.

Frequently Asked Questions

How do I skip weekends?
Use excludes weekends. Add weekend friday for Friday–Saturday weekends, and includes with a specific date to restore a working day.
How do I link two tasks?
Give the first task an id and use after followed by that id as the second task’s start. Multiple ids wait for the latest finish.
Can I print this reference?
Use the browser’s Print action and select PDF. Controls disappear while code and rendered diagrams remain.