Mermaid Module

[giscus[bot]]

Mermaid Module

Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.

https://hbstack.dev/modules/content/mermaid/

[FuadEfendi]

I spent few hours trying to make "gantt" work: it doesn't! I "googled" it, it seems the issue exists past few years already. Their online editor uses different approach wo in online editor it doesn't happen.

Here is example: https://securitiesexamprep.ca/1.-canadian-investment-marketplace/1.-canadian-securities-industry/1.5-financial-market-trends/1.5.3-social-and-economic-shifts/

This is diagram:

gantt
dateFormat  YYYY
section Population Shifts
Aging Baby Boomers :2003, 2023
Rise of Millennials :2010, 2023

Loading

It works fine in https://mermaid.live/edit

Google search shows that many other experience similar issues; but "mermaid" team is unaware: response is "it doesn't happen in live edit".

Workaround it to copy-paste generated SVG and modify it :) I tried to use "max-width: 100% !important; " - it makes it max witdth, but it just scales it (instead of widening).

Please let me know if you know how to fix. I compared with some other Hugo Themes, such as simplest "Book" theme, - same issue.

[razonyang]

Seems a style issue, will check later, track on hbstack/mermaid#159

[razonyang]

github.com/hbstack/mermaid@v0.2.2 should fix this, but still a problem on mobile, the official live editor has the same issue on mobile.

GitHub seems have a different way to handle this (iframe with external service I guess, which allow zooming, dragging...).

[FuadEfendi]

Wow it works thank you so much!!!