T03: Gantt Chart Structure

5.3.1 What Is a Gantt Chart?

A Gantt chart is a time-based visualization used for:

• Project planning

• Task scheduling

• Timeline tracking

• Milestone management

• Dependency coordination

Unlike:

• Flowcharts → show process flow

• State diagrams → show lifecycle states

Gantt charts focus on time and duration.

In Mermaid, every Gantt chart begins with:

---

5.3.2 Basic Gantt Structure

Minimum structure:

Key components:

• title → chart heading

• dateFormat → required for parsing dates

• section → logical grouping

• Task → name of activity

• start date, duration → schedule definition

---

5.3.3 Defining Date Format

The dateFormat directive is mandatory.

Example:

Common formats:

• YYYY-MM-DD

• YYYY/MM/DD

• DD-MM-YYYY

Choose one and remain consistent.

---

5.3.4 Defining Tasks

Task syntax:

Task Name : startDate, duration

Example:

3d = 3 days You can also use:

• 2w (2 weeks)

• 6h (6 hours)

---

5.3.5 Multiple Sections

Sections group related tasks.

Example:

Sections improve readability in complex plans.

---

5.3.6 Task Dependencies

You can make a task start after another finishes.

Syntax:

Task B : after Task A, duration

Example:

Here:

• “Run Tests” begins after “Compile Code” completes.

Dependencies help model realistic scheduling.

---

5.3.7 Using IDs for Tasks

For clarity and reuse:

id1 : Task Name, start, duration

Example:

IDs are helpful for complex dependencies.

---

5.3.8 Milestones

Milestones represent key events with zero duration.

Syntax:

Task Name : milestone, date

Example:

gantt
    title Release Plan
    dateFormat YYYY-MM-DD

    section Release
    Development Complete : milestone, 2026-06-15

Milestones visually mark:

• Go-live dates

• Review deadlines

• Deployment events

---

5.3.9 Marking Task Status

Mermaid allows marking tasks as:

• done

• active

• crit (critical)

Example:

This helps communicate project health.

---

5.3.10 Full Example — SaaS Product Roadmap

This represents:

• Logical grouping

• Dependency chaining

• Status tracking

• Milestone marking

---

5.3.11 Managing Long Projects

For multi-month projects:

• Use weekly durations (w)

• Keep sections minimal

• Break large tasks into phases

• Use milestones strategically

Avoid cluttering with too many micro-tasks.

---

5.3.12 Common Mistakes

1. Forgetting dateFormat

2. Using inconsistent date format

3. Creating circular dependencies

4. Overloading one section

5. Mixing time units inconsistently

Incorrect:

Task A : 2026/01/01, 5d
Task B : 2026-01-06, 3d

Choose one date format and stick to it.

---

5.3.13 Refactoring Example (Hands-On)

Start simple:

Now improve with dependency and milestone:

Notice:

• Dependency added

• Milestone defined

• Timeline clarity improved

---

5.3.14 Hands-On Exercise

Design a Mobile App Launch Timeline:

Sections:

• Design

• Development

• Testing

• Marketing

• Launch

Requirements:

• At least one dependency

• At least one milestone

• At least one critical task

• Use consistent date format

Focus on clarity, not micro-detail.

---

5.3.15 Best Practices

• Keep task names concise

• Use dependencies for realism

• Avoid unnecessary complexity

• Use milestones sparingly

• Maintain consistent date formatting

• Highlight only truly critical tasks

Gantt charts should communicate schedule at a glance.

---

5.3.16 Key Takeaways

Gantt chart structure in Mermaid includes:

• gantt declaration

• title and dateFormat

• section grouping

• Task definitions

• Duration specification

• Dependencies

• Milestones

• Status markers

Gantt charts are ideal for:

• Project roadmaps

• Sprint planning

• Release schedules

• Product development timelines

With this, you now understand:

• State diagrams for lifecycle modeling

• Gantt charts for time-based planning

In the next chapter, we will move into Advanced Usage and Integration, where we explore theming, embedding, and automation techniques in Mermaid.