Feature Request: Time Axis Breaks in Gantt Charts

[Frank-Uwe]

Proposal

First of all, I’m a big fan of Mermaid! It’s an amazing tool that has made visualizing project timelines and processes so much easier and more accessible. I use it extensively, and it’s become a core part of my documentation and planning workflows. Thank you to everyone contributing to this project!

Feature Summary:

Introduce support for time axis breaks in Gantt charts to allow users to visually omit extended periods of inactivity, enhancing readability for long-term projects.

Problem Statement:

In projects with tasks spanning multiple years, Gantt charts often include lengthy periods with no activity. Currently, Mermaid's Gantt charts display these inactive periods in full, leading to excessive horizontal space usage and reduced clarity. A feature enabling users to collapse these inactive periods would make the charts more concise and easier to interpret.

Proposed Solution:

Implement a mechanism to define and render time axis breaks in Gantt charts. This could involve:
Syntax Addition: Allow users to specify date ranges to omit. For example:

 gantt
      title Project Timeline
      dateFormat YYYY-MM-DD

      section Phase 1
      Task A :a1, 2023-01-01, 30d

      %% Omit period between 2023-02-01 and 2024-01-01
      axisBreak 2023-02-01, 2024-01-01

      section Phase 2
      Task B :a2, 2024-01-01, 30d

Visual Representation: Display a clear indicator (e.g., a zigzag line or gap) on the time axis to denote the omitted period.

Benefits:

1. Improved Readability: Condensing inactive periods makes Gantt charts more concise and easier to understand.
2. Efficient Space Utilization: Reducing unnecessary horizontal space allows for better use of screen real estate, especially for long-term projects

Example

Syntax Addition: Allow users to specify date ranges to omit. For example:

 gantt
      title Project Timeline
      dateFormat YYYY-MM-DD

      section Phase 1
      Task A :a1, 2023-01-01, 30d

      %% Omit period between 2023-02-01 and 2024-01-01
      axisBreak 2023-02-01, 2024-01-01

      section Phase 2
      Task B :a2, 2024-01-01, 30d

Screenshots

No response