Mermaid Gantt Chart

Gantt charts visualize project timelines, showing tasks, durations, and dependencies. Perfect for planning research phases and tracking progress.

Use Case

Use Gantt charts when you need to:

• Plan research phases and milestones
• Visualize project timelines
• Show task dependencies
• Track progress over time

Code

 1```mermaid
 2gantt
 3    title Research Project Timeline
 4    dateFormat YYYY-MM-DD
 5    section Phase 1
 6    Literature Review    :done, 2024-01-01, 14d
 7    Hypothesis Formation :active, 2024-01-15, 7d
 8    section Phase 2
 9    Experiment Design    :2024-01-22, 10d
10    Implementation       :2024-02-01, 21d
11```

Result:

Explanation

• dateFormat - Date format for tasks (YYYY-MM-DD recommended)
• section - Group related tasks
• Task format: Name :status, start, duration
• Status: done, active, crit (critical), or empty
• Duration: Xd (days), Xw (weeks), or end date

Examples

Example 1: Research Timeline

 1```mermaid
 2gantt
 3    title Research Project Timeline
 4    dateFormat YYYY-MM-DD
 5    
 6    section Discovery
 7    Initial Questions     :done, disc1, 2024-12-01, 3d
 8    Literature Review     :done, disc2, after disc1, 10d
 9    Problem Definition    :done, disc3, after disc2, 5d
10    
11    section Exploration
12    Baseline Implementation :active, exp1, 2024-12-19, 14d
13    Experiments            :exp2, after exp1, 21d
14    Analysis               :exp3, after exp2, 7d
15    
16    section Implementation
17    POC Development        :crit, impl1, 2025-01-20, 28d
18    Testing                :impl2, after impl1, 14d
19    Documentation          :impl3, after impl2, 7d
20```

Result:

Example 2: Milestone-Based

 1```mermaid
 2gantt
 3    title Development Milestones
 4    dateFormat YYYY-MM-DD
 5    
 6    section Setup
 7    Repository Setup      :milestone, 2024-12-01, 0d
 8    Environment Config    :done, 2024-12-01, 2d
 9    
10    section Development
11    Feature A             :done, 2024-12-03, 5d
12    Feature B             :active, 2024-12-08, 7d
13    Feature C             :2024-12-15, 5d
14    
15    section Release
16    Testing               :2024-12-20, 5d
17    Release v1.0          :milestone, 2024-12-25, 0d
18```

Result:

Notes

• Use milestone for zero-duration events
• crit highlights critical path tasks
• Task IDs (like disc1) enable after dependencies
• Sections help organize related tasks

Gotchas/Warnings

• ⚠️ Date format: Must match dateFormat exactly
• ⚠️ Dependencies: Use task IDs with after for dependencies
• ⚠️ Duration: Can use days (d), weeks (w), or end dates
• ⚠️ Updates: Remember to update status as project progresses

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js