search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.79k stars 6.08k forks source link

Gantt: Create a hard border between section name and timeline #5396

Open ross-spencer opened 3 months ago

ross-spencer commented 3 months ago

Description

When using long section names they encroach on the timeline.

Steps to reproduce

Define sections with long names.

Screenshots

No response

Code Sample

gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27
gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27

Setup

Suggested Solutions

As these are two different parts of the diagram a hard border that ensures that the timeline starts after the longest section name seems like it might be more idiomatic.

Additional Context

One workaround is to create a single 0-duration task before everything else, but it takes a bit of calibrating.

E.g.

gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section  
    🟢    :a0, 2024-02-26, 2024-02-26 
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27
gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section  
    🟢    :a0, 2024-02-26, 2024-02-26 
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27

I've read through the gantt docs and the issues on this repo but haven't found anything to suggest better control of the sections, e.g. using quotes. Trying this doesn't seem to work.