Mermaid Gantt Charts

Gantt charts in Mermaid are a quick way to visualize a work plan, iterations, task dependencies, and milestones directly in a FlowEra knowledge base article.

Basic Syntax

gantt
    title Release v2.0
    dateFormat YYYY-MM-DD

    section Backend
    Auth API         :done, auth, 2024-01-01, 2024-01-07
    WebSocket Server :done, ws, 2024-01-06, 5d
    Database         :active, db, 2024-01-10, 7d

    section Frontend
    UI Design        :done, ui, 2024-01-01, 5d
    React Components :active, react, after ui, 10d
    API Integration  :api-int, after db, 5d

    section QA
    Testing          :testing, after api-int, 5d
    Deploy           :milestone, deploy, after testing, 0d

Basic Gantt chart

Date Formats

Format	Example
`YYYY-MM-DD`	`2024-03-15`
`DD/MM/YYYY`	`15/03/2024`

You can also use relative durations: 5d, 2w, 1m.

Task Types

Keyword	Description
`done`	Completed task
`active`	Currently in progress
`crit`	Critical path
`milestone`	Milestone (point in time)

Combined with a comma: done, crit.

Dependencies

Use named tasks with the after keyword:

gantt
    title Task Dependencies
    dateFormat YYYY-MM-DD

    section Backend
    API Design  :done, api-design, 2024-01-01, 2d
    API Impl    :api-impl, after api-design, 5d
    API Tests   :api-tests, after api-impl, 2d

    section Frontend
    Components  :fe, after api-design, 7d
    Integration :integration, after api-impl, after fe, 3d

Excluding Weekends

gantt
    title Sprint 1
    dateFormat YYYY-MM-DD
    excludes weekends

    section Tasks
    Task A  :2024-01-01, 5d
    Task B  :after Task A, 3d

Example: Sprint Plan

gantt
    title Sprint 23 — Knowledge Base Module
    dateFormat YYYY-MM-DD
    excludes weekends

    section Planning
    Backlog Grooming  :done, grooming, 2024-03-04, 1d
    Sprint Planning   :done, planning, 2024-03-05, 1d

    section Development
    Tiptap Editor     :done, editor, 2024-03-06, 3d
    Mermaid Plugin    :done, mermaid, after editor, 2d
    Collaboration     :active, crit, collab, after mermaid, 4d
    Offline Mode      :offline, after collab, 3d

    section QA & Deploy
    Code Review       :cr, after offline, 1d
    QA Testing        :crit, qa, after cr, 2d
    Deploy to Staging :milestone, staging, after qa, 0d
    Deploy to Prod    :milestone, crit, prod, 2024-03-25, 0d

Sprint plan Gantt chart