Rendering mermaid gantt chart in issue

When rendering the following mermaid gantt chart in an issue on gitlab I get the following result:

gantt
    title FAR Planning
    dateFormat  YYYY-MM-DD

    section Deadlines
        Delivery TRR pack 1           :milestone, 2021-12-17, 0d
        Delivery TRR pack 2 (backup)  :milestone, 2021-12-23, 0d
        Test Readiness Review (TRR)   :milestone, 2022-01-14, 0d
        Delivery Test Report          :milestone, 2022-01-21, 0d
        Test Review Board (TRB)       :milestone, 2022-01-28, 0d
        Delivery FAR Document Pack    :milestone, 2022-02-09, 0d
        FAR kick-off                  :milestone, 2022-02-11, 0d
    section Work focus
        Writing test procedures high priority                            :2021-12-02, 2021-12-17
        Additional writing test procedures high priority                 :2021-12-17, 2021-12-23
        Executing tests and reporting low priority                       :2021-12-02, 2021-12-23
        Writing FAR document pack low priority                           :2021-12-02, 2022-01-21
        Executing tests and reporting high priority                      :2021-12-23, 2022-01-14
        Executing tests and reporting high priority (TRR comments)       :2022-01-14, 2022-01-21
        Writing FAR document pack high priority                          :2022-01-21, 2022-02-09

    section Holidays
        ROB closed: 2021-12-25, 2022-01-02
        Bram : 2021-12-13, 2022-01-02
        Bram : 2022-01-29, 2022-02-06

image1738×878 92.3 KB

Compared to the rendering in the mermaid online editor there is a rather big difference. Is this a bug? There is a big problem with the location of the milestones i.e. the location on the gantt is different from the location set in the definition.

image2212×800 84.5 KB

I run this on the gitlab.com version. I tried other exampled provided by mermaid and they give the same strange results.

It may be that GitLab has fallen behind the latest version of mermaid, but have you tried changing the theme in your diagram?

Changing the theme is possible, but does not seem to change the positioning of milestones.

I want to point out that my biggest problem is the wrong position of the milestones i.e. the date as set in the description and shown in the rendered gantt are different.

%%{init: {'theme':'base'}}%%
gantt
    title FAR Planning
    dateFormat  YYYY-MM-DD

    section Deadlines
        Delivery TRR pack 1           :milestone, 2021-12-17, 0d
        Delivery TRR pack 2 (backup)  :milestone, 2021-12-23, 0d
        Test Readiness Review (TRR)   :milestone, 2022-01-14, 0d
        Delivery Test Report          :milestone, 2022-01-21, 0d
        Test Review Board (TRB)       :milestone, 2022-01-28, 0d
        Delivery FAR Document Pack    :milestone, 2022-02-09, 0d
        FAR kick-off                  :milestone, 2022-02-11, 0d
    section Work focus
        Writing test procedures high priority                            :2021-12-02, 2021-12-17
        Additional writing test procedures high priority                 :2021-12-17, 2021-12-23
        Executing tests and reporting low priority                       :2021-12-02, 2021-12-23
        Writing FAR document pack low priority                           :2021-12-02, 2022-01-21
        Executing tests and reporting high priority                      :2021-12-23, 2022-01-14
        Executing tests and reporting high priority (TRR comments)       :2022-01-14, 2022-01-21
        Writing FAR document pack high priority                          :2022-01-21, 2022-02-09

    section Holidays
        ROB closed: 2021-12-25, 2022-01-02
        Bram : 2021-12-13, 2022-01-02
        Bram : 2022-01-29, 2022-02-06

image2008×886 99.1 KB

That is odd. According to this comment GitLab is using Mermaid version 8.13, which is a recent build, so I guess this must be a bug somewhere in GitLab?

There are quite a few open issues that mention Mermaid so you might be able to find the one that caused your bug and upvote it, or raise a new issue.