Mermaid problem with axisFormat %H:%M

support
,
1

When using hugo to publish a Gantt diagram which only uses hours of the day (dates are ignored, this is to document tasks that run daily) we end up with a

gantt
    title Test title
    dateFormat H:mm
    axisFormat %H:%M
    section Test
    test label     :2014-01-01 6:11, 20m
    second task    :2014-01-01 6:20, 20m

On https://mermaid.live/ you get :

image
image1490×157 5.55 KB

but rendered with hugo it takes the current time of your browser and all the blue bars are squashed to the left.

Am I missing a configuration in the mermaid diagram ? Is this a bug ?

We’re currently generating with v0.117.0 but looking into upgrading to the latest version of hugo.

2

Missed the screenshot of the hugo rendered mermaid :

Screenshot from 2024-04-04 08-20-56
Screenshot from 2024-04-04 08-20-561853×513 21.9 KB

3

I am unable to reproduce the problem as described:

git clone --single-branch -b hugo-forum-topic-49162 https://github.com/jmooring/hugo-testing hugo-forum-topic-49162
cd hugo-forum-topic-49162
hugo server

https://gohugo.io/content-management/diagrams/#mermaid-diagrams

I suspect you are using an old version of mermaid.js, probably something before v9.3.0. The current version is v10.9.0. The test site above pulls in the latest with:

{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}