Gantt Charts

Gantt charts visualize project schedules, showing tasks, their durations, and dependencies over time. They are essential for project planning, tracking milestones, and communicating timelines to stakeholders.

Basic Example

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Requirements    :a1, 2024-01-01, 14d
    Design          :a2, after a1, 7d
    section Phase 2
    Development     :a3, after a2, 21d
    Testing         :a4, after a3, 14d

What You Get

Mermaid Studio provides comprehensive support for Gantt charts:

• Syntax highlighting for tasks, dates, and sections
• Inlay hints showing calculated dates and durations inline
• Code completion for keywords and task references
• Rename refactoring to update task IDs safely
• Code folding to collapse sections
• Formatting to clean up task definitions
• Inspections for detecting date conflicts and invalid references
• Quote handler for string literals

Quick Syntax Reference

gantt
    title My Project
    dateFormat YYYY-MM-DD

    section Planning
    Task 1          :t1, 2024-01-01, 7d
    Task 2          :t2, after t1, 5d

    section Execution
    Milestone       :milestone, m1, after t2, 0d
    Task 3          :active, t3, after m1, 10d
    Task 4          :crit, t4, after t3, 14d

Key elements:

• title - Set the chart title
• dateFormat - Specify date format (e.g., YYYY-MM-DD)
• section - Group related tasks
• :id, start, duration - Define task timing
• after taskId - Create dependencies
• crit, active, done - Task status markers

For complete syntax details, see the Mermaid Gantt documentation.