Skip to content
SayDiagramSayDiagram

Learn

Gantt chart syntax

Learn titles, dateFormat, sections, tasks, and after dependencies used in the Product launch plan template.

On this page7 sections
  1. Syntax cheatsheet
  2. 1.Start a Gantt chart
  3. 2.Tasks with dates and durations
  4. 3.Group tasks into sections
  5. 4.Dependencies with after
  6. 5.Put it together: Product launch plan
  7. Check your level

Syntax cheatsheet

Quick reference for this diagram type

ConceptSyntax
Declaregantt
Titletitle Product launch plan
DatesdateFormat YYYY-MM-DD
Sectionsection Design
TaskResearch :a1, 2026-07-01, 5d
DependencySpecs :a2, after a1, 5d
  1. 1

    Start a Gantt chart

    Begin with gantt, then add a title and dateFormat so Mermaid knows how to parse dates.

    Gantt charts are Preview-only in SayDiagram — Present reveals tasks step by step.

    gantt
  title Plan
  dateFormat YYYY-MM-DD
  section Work
  Task :a1, 2026-07-01, 7d
    Expand
  2. 2

    Tasks with dates and durations

    A task line is a name, a colon, then an id, a start date, and a duration (for example 5d for five days).

    Keep ids short and unique — later tasks can depend on them.

    gantt
  title Sprint
  dateFormat YYYY-MM-DD
  section Build
  Design :a1, 2026-07-01, 5d
  Develop :a2, 2026-07-06, 10d
    Expand
  3. 3

    Group tasks into sections

    Use section followed by a name to group related tasks (Design, Build, Ship).

    A new section starts when you declare another section line.

    gantt
  title Launch
  dateFormat YYYY-MM-DD
  section Design
  Research :a1, 2026-07-01, 5d
  section Build
  Develop :b1, 2026-07-06, 10d
    Expand
  4. 4

    Dependencies with after

    Instead of a hard start date, use after taskId so a task starts when its dependency finishes.

    List tasks in dependency order so Present and Mermaid stay easy to follow.

    • Tip: You can also mark milestones with 0d duration when you need a checkpoint on the axis.
    gantt
  title Launch
  dateFormat YYYY-MM-DD
  section Design
  Research :a1, 2026-07-01, 5d
  Specs :a2, after a1, 5d
  section Build
  Develop :b1, after a2, 10d
    Expand
  5. 5

    Put it together: Product launch plan

    Combine sections, dated tasks, and after links into the Examples gallery template.

    • Tip: Present mode reveals one task per slide — ideal for walking a launch plan with stakeholders.
    gantt
  title Product launch plan
  dateFormat YYYY-MM-DD
  section Design
  Research     :a1, 2026-07-01, 5d
  Wireframes   :a2, after a1, 5d
  section Build
  Develop MVP  :b1, after a2, 14d
  QA           :b2, after b1, 5d
  section Ship
  Soft launch  :c1, after b2, 3d
  Public launch :c2, after c1, 7d
    Expand

Check your level

80% or higher certifies this lesson. You'll get 3–5 random questions from a larger bank.

Back to examples