Mermaid Gantt chart in Markdown to PDF

A project plan shows sections, dependencies, task states and milestones on a date axis that skips weekends. Wide charts are where screenshots of diagrams become unreadable.

Sections, after dependencies, done, active and critical states, milestones and an axis that skips weekends, for a bridge refurbishment.

Open PDFOpen in editorMarkdown file

Markdown source

Markdown · 31 lines
# Gantt charts

```mermaid
gantt
    title Harbor bridge refurbishment, 2026
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    excludes weekends

    section Design
    Structural survey           :done,    d1, 2026-02-02, 15d
    Detailed design             :done,    d2, after d1, 20d
    Design approved             :milestone, m1, after d2, 0d

    section Permits
    Navigation authority        :done,    p1, 2026-02-16, 25d
    Heritage consent            :active,  p2, 2026-03-02, 30d

    section Works
    Scaffold and containment    :         w1, after m1 p2, 10d
    Blast and repaint, span 1   :crit,    w2, after w1, 25d
    Bearing replacement         :crit,    w3, after w2, 12d
    Blast and repaint, span 2   :         w4, after w3, 25d
    Deck resurfacing            :         w5, after w4, 8d

    section Handover
    Load test                   :         h1, after w5, 3d
    Reopen to traffic           :milestone, m2, after h1, 0d
```

The time axis is sized from the task labels, so a long task name never runs off the chart.

Rendered pages

PDF · 1 page · 14 KB
  1. Gantt charts, page 1 of 1

The sample documents describe invented organizations in several countries. All names and figures are illustrative.

Mermaid diagrams in Markdown to PDF: every sampleIn the Markdown reference