MermanDraw
Open Editor

Mermaid exampleGantt

Software Project Gantt Chart with Dependencies and Milestone

A project Gantt chart lays tasks on a calendar and shows which ones wait on others. Project managers keep it in the status report; engineering leads use it to spot the critical path before it slips.

  • project gantt chart mermaid
  • gantt with dependencies
  • mermaid milestone gantt
  • software project timeline
Software Project Gantt Chart with Dependencies and Milestone2027-01-172027-01-242027-01-312027-02-072027-02-142027-02-21Stakeholder interviews Requirements sign-off Wireframes Visual design CMS integration Frontend implementation QA and launch DiscoveryDesignBuildWebsite redesign
Open in editor → 13 linesrenders in GitHub, Notion, Obsidian

Mermaid code

gantt
    title Website redesign
    dateFormat YYYY-MM-DD
    section Discovery
    Stakeholder interviews   :done, disc1, 2027-01-11, 5d
    Requirements sign-off    :milestone, m1, 2027-01-18, 0d
    section Design
    Wireframes               :active, des1, after m1, 10d
    Visual design            :des2, after des1, 10d
    section Build
    Frontend implementation  :dev1, after des2, 15d
    CMS integration          :dev2, after des1, 20d
    QA and launch            :dev3, after dev1, 5d

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Gantt guide.

What this diagram shows

Every task line is Name :tags, id, start, duration. Stakeholder interviews is tagged done, Wireframes is active, and Requirements sign-off is a milestone with zero duration. The after keyword chains tasks by id, so Visual design starts when des1 ends and CMS integration runs in parallel with it because it also depends only on des1. The chart recomputes when any duration changes, which is the main reason to prefer it over a drawn timeline.

How to adapt it

  • Change dateFormat and the first start date; every other task derives its position from after dependencies.
  • Add crit to the tags of tasks on the critical path, for example :crit, dev1, after des2, 15d, to color them red.
  • Use excludes weekends after dateFormat so five-day tasks span a calendar week.
  • Add axisFormat %b %d to label the axis with month and day instead of full dates.

FAQ

How do I make a task depend on two earlier tasks?

List both ids after the keyword: after dev1 dev2. The task starts when the later of the two finishes. Mermaid 10.3 and newer support this; older renderers only read the first id.

Why does the milestone need a duration of 0d?

Every task line needs a duration or an end date. 0d keeps the line valid while the milestone tag draws it as a diamond instead of a bar.