Mermaid Gantt Charts

Mermaid Gantt Charts (gantt) are bar charts that visualize project schedules, timelines, task durations, and dependencies over time.

Gantt charts show tasks across a project timeline.

They are useful for:

project planning
development schedules
milestones
task dependencies

Basic Syntax

gantt
    title Website Launch Plan
    dateFormat YYYY-MM-DD

    section Development
    Coding  :done, 2026-01-01, 10d
    Testing :active, after Coding, 5d

Try this code ❯

Structural Configuration & Core Settings
At the top of the chart, you define global parameters like dates, formats, and axis views.

title : Sets the display name of your timeline.
dateFormat : Defines how dates are parsed in the backend code (e.g., YYYY-MM-DD).
axisFormat : Defines how dates display on the horizontal grid timeline (e.g., %m-%d for month-day).
tickInterval : Sets timeline grid markers (e.g., 1w for weekly grids, 1d for daily grids).
excludes : Skips specific days (like weekends or dates like 2026-12-25) so tasks don't count them as active duration.

Sections and Task States

Tasks are organized into logical groups using the section keyword. Every task line follows this format:
Task Name : [Modifiers], [Identifier], [Start Date], [End Date/Duration]

Task State Modifiers
You can apply status flags to color-code tasks automatically:

active : Highlights a task currently in progress.
done : Colors a task as fully completed.
crit : Outlines the block in red to mark it as part of the Critical Path.
milestone : Renders a standalone diamond shape at a single point in time instead of a bar.

Task Name : tag, start date, duration

Defining Start & Duration

Specific Dates: 2026-10-01, 2026-10-15
Relational Dependencies: Use the after keyword linked to another task's unique identifier (e.g., after task1).
Duration Shortcuts: Set length using shortcuts like 5d (5 days), 2w (2 weeks), or 4h (4 hours) instead of writing out an end date.

Tasks can also begin after another task.

Build :after Design, 5d

Sections Example

Use section to group tasks.

Example

gantt
    title Software Release Schedule
    dateFormat YYYY-MM-DD

    section Backend
    Design API :a1, 2026-01-01, 3d
    Build DB   :a2, after a1, 5d

    section Frontend
    UI Mockups  :b1, 2026-01-02, 4d
    Integration :b2, after a2 b1, 4d

Try this code ❯

Status Tags

Common task tags described in the source include:

done
active
crit
milestone

Example:

gantt
    title Project Plan
    dateFormat YYYY-MM-DD

    section Phase 1
    Design :done, 2024-01-01, 2d
    Build  :active, after Design, 5d
    Test   :crit, after Build, 3d

Try this code ❯

Comprehensive Project Timeline Example

Here is a complete development roadmap split into phases, utilizing milestones, dependencies, critical paths, and weekend exclusions:

Example

gantt
    title Software Development Lifecycle Roadmap
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d
    tickInterval 1w
    excludes    weekends

    section Discovery & Scoping
        Requirements Gathering :done, reqs, 2026-10-05, 7d
        Architecture Blueprint :active, arch, after reqs, 5d
        Project Kickoff        :milestone, after arch, 0d

    section Core Development
        Database Schema Setup  :crit, db, after arch, 4d
        Backend API Coding     :crit, api, after db, 10d
        Frontend UI Assembly   :ui, after arch, 12d

    section Testing & Deployment
        Integration Testing    :active, testing, after api, 5d
        Security Audit         :crit, audit, after testing, 3d
        Production Release     :milestone, after audit, 0d

Try this code ❯

Gantt Links

Tasks can be made clickable.

gantt
    section Milestones
    Launch :milestone, m1, 2026-02-01, 0d
    click m1 href "https://example.com"

Try this code ❯

Compact Layout and Display Tips

Compact Mode: If your timeline has many overlapping items and you want to conserve space vertically, add topAxis under your main configurations to render timeline headers at both the top and bottom.
Auto-Scheduling: If you leave out the start date completely but keep the duration (e.g., Coding Task : active, 5d), Mermaid automatically schedules that task to begin precisely where the previous task in that specific section ended.