How to create Gantt chart in MermaidJS

1. Install MermaidJS

You can install MermaidJS by including the MermaidJS library in your project or by installing it via npm.

npm i mermaid

2. Define the diagram

To create a Gantt chart, start the definition with gantt. Set a dateFormat, group tasks with section, and define each task as Name :status, id, start, duration. Use after otherId instead of a literal start date to chain a task after another one finishes.

gantt
    title Website Redesign
    dateFormat YYYY-MM-DD
    section Design
    Wireframes       :done,    des1, 2026-01-01, 5d
    Mockups          :active,  des2, after des1, 5d
    section Development
    Build frontend   :         dev1, after des2, 8d
    Build backend    :         dev2, after des2, 8d
    section Launch
    QA testing       :crit,    qa1, after dev1, 3d
    Deploy           :         deploy1, after qa1, 1d

Here, Mockups and the two Development tasks automatically start right after their dependency finishes (via after), instead of needing a manually computed date.

3. Task status and dependencies

Prefix a task with a status keyword to color it, and chain tasks with after:

Status	Syntax	Meaning
Done	`Task :done, id1, 2026-01-01, 3d`	Already completed (gray bar)
Active	`Task :active, id2, after id1, 3d`	Currently in progress (highlighted bar)
Default	`Task :id3, after id2, 3d`	Not started yet (default color)
Critical	`Task :crit, id4, after id3, 3d`	On the critical path (red bar)

4. Sections and date format

Use section Name to group related tasks into a labeled row-band (as shown for Design, Development, and Launch above). The dateFormat directive tells MermaidJS how to parse the literal start dates you provide, following day.js format tokens (e.g. YYYY-MM-DD).

5. Render the diagram

Once you have defined the diagram, you can render it on your webpage by including the MermaidJS library and calling the mermaid function with the diagram definition as a string. Here is an example of how to do this

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({
        startOnLoad: true
      });
    </script>
  </head>
  <body>
    <div class="mermaid">
      gantt
        title Website Redesign
        dateFormat YYYY-MM-DD
        section Design
        Wireframes       :done,    des1, 2026-01-01, 5d
        Mockups          :active,  des2, after des1, 5d
        section Development
        Build frontend   :         dev1, after des2, 8d
        Build backend    :         dev2, after des2, 8d
        section Launch
        QA testing       :crit,    qa1, after dev1, 3d
        Deploy           :         deploy1, after qa1, 1d
    </div>
  </body>
</html>

You can use this MermaidJS Playground Link to explore that particular example.