Mermaid diagram

Gantt Chart — free online editor

Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.

What is a Mermaid gantt chart?

Gantt charts schedule tasks against a calendar. Mermaid supports sections, task statuses (done / active / crit), durations expressed in days/weeks, dependencies via `after taskID`, and exclusion of weekends or specific dates.

When to use it

▸Plan a project roadmap
▸Communicate a release timeline
▸Visualize sprint commitments
▸Show task dependencies in a kickoff

Syntax in one paragraph

Header lines: `title …`, `dateFormat YYYY-MM-DD`, `excludes weekends`. Tasks: `Task : id, start, duration` or `Task : after otherId, 5d`. Add `done`, `active`, or `crit` before the id for status.

Example: Q1 product roadmap

gantt
    title Q1 Roadmap
    dateFormat YYYY-MM-DD
    excludes weekends

    section Design
        Discovery   : done,   d1, 2025-01-06, 5d
        Wireframes  : done,   d2, after d1,  4d
        UI Design   : active, d3, after d2,  7d

    section Development
        Backend API : dev1, 2025-01-20, 14d
        Frontend    : dev2, after d3,  14d
        Integration : dev3, after dev1, 5d

    section Launch
        QA          : qa1, after dev3, 7d
        Deploy      : qa2, after qa1,  2d

▶ Try this example in the editor

More Mermaid diagrams

Flowchart

A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.

Sequence Diagram

Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.

Class Diagram

Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.

ER Diagram

Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.

State Diagram

Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.

Pie Chart

Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.

Git Graph

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

Mindmap

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

Timeline

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes