Skip to content
Mermaid Flow Player

Gantt Charts

Animate project timelines, highlighting tasks and sections.

Project Timeline

Section titled “Project Timeline”
live live example
gantt title Project Timeline dateFormat YYYY-MM-DD section Planning Requirements : a1, 2024-01-01, 10d Design : a2, after a1, 15d section Development Frontend : b1, after a2, 20d Backend : b2, after a2, 25d section Testing QA : c1, after b2, 10d UAT : c2, after c1, 5d 
<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';


  const player = createFlowPlayer({
    root: document.getElementById('gantt-diagram'),
    dim: 'others'
  });


  await player.ready();
  const idx = player.index();
  // Gantt charts index tasks and sections
  await player.play(player.path(...idx.nodes.keys()));
</script>

Web Component:

<script src="https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.js"></script>


<mermaid-flow-player controls theme="light">
gantt
  title Project Timeline
  dateFormat  YYYY-MM-DD
  section Planning
  Requirements : a1, 2024-01-01, 10d
  Design       : a2, after a1, 15d
  section Development
  Frontend     : b1, after a2, 20d
  Backend      : b2, after a2, 25d
  section Testing
  QA           : c1, after b2, 10d
  UAT          : c2, after c1, 5d
</mermaid-flow-player>

Sprint Planning

Section titled “Sprint Planning”
live live example
gantt title Sprint 12 dateFormat YYYY-MM-DD section Auth Login page : done, auth1, 2024-03-01, 3d OAuth integration : active, auth2, after auth1, 5d section Dashboard Layout : dash1, after auth1, 4d Charts : dash2, after dash1, 3d section API Endpoints : api1, 2024-03-01, 6d Documentation : api2, after api1, 2d

Release Schedule

Section titled “Release Schedule”
live live example
gantt title Release v2.0 dateFormat YYYY-MM-DD section Milestones Alpha : milestone, m1, 2024-04-01, 0d Beta : milestone, m2, 2024-05-01, 0d RC : milestone, m3, 2024-05-15, 0d GA : milestone, m4, 2024-06-01, 0d section Work Core features : a1, 2024-03-01, 30d Bug fixes : a2, after a1, 14d Docs : a3, after a2, 14d Polish : a4, after a3, 14d

Programmatic Control

Section titled “Programmatic Control”
<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';


  const player = createFlowPlayer({
    root: document.getElementById('gantt'),
    dim: 'others'
  });


  await player.ready();


  // Animate through tasks sequentially
  await player.play([
    { type: 'node', id: 'a1', state: 'active', note: 'Requirements phase' },
    { type: 'node', id: 'a2', state: 'active', note: 'Design phase' },
    { type: 'node', id: 'b1', state: 'active', note: 'Frontend development' },
    { type: 'node', id: 'b2', state: 'active', note: 'Backend development' },
    { type: 'node', id: 'c1', state: 'success', note: 'Testing complete' },
  ], { speed: 1.5 });
</script>

Other Diagram Types

Section titled “Other Diagram Types”