A Gantt Chart<\/strong> is a project management visualization tool used to map project schedules, task durations, and critical path milestones along a horizontal timeline. By representing work packages as bars and structural dependencies as sequential flows, it allows teams to track progress, identify potential bottlenecks, and communicate deadlines effectively.<\/p>\n With Mermaid.js<\/strong>, you define your project schedule using a declarative, text-based syntax. The engine automatically calculates relative bar offsets, handles date-based grid axis scaling, and renders completion percentages, allowing you to generate professional project roadmaps directly inside your documentation.<\/p>\n To design a valid, fully runnable project schedule in Mermaid, you must master the timeline configuration, task declarations, section grouping, and milestone markers.<\/p>\n You initialize a Gantt canvas on line one using the Tasks are defined by their status (active, done, or crit), a display label, an internal ID, and a time duration. You can specify a duration using days (Core Syntax Guide: Elements and Constructs<\/h2>\n
1. Initializing the Gantt Timeline<\/h3>\n
gantt<\/code> keyword. Every Gantt chart requires a title, a date format definition, and a specific start date to anchor the timeline grid.<\/p>\ngantt\r\n title Project Alpha Schedule\r\n dateFormat YYYY-MM-DD\r\n axisFormat %Y-%m-%d\r\n excludes weekends<\/code><\/pre>\n2. Defining Tasks and Durations<\/h3>\n
d<\/code>), hours (h<\/code>), or specific start\/end dates.<\/p>\n\n
done<\/code>: Completed work package.<\/li>\nactive<\/code>: Current, in-progress work.<\/li>\ncrit<\/code>: Critical path task (renders in a distinct highlight color).<\/li>\n<\/ul>\n