Scrolling horizontally Mermaid graphs #7860
-
I'm using Mermaid's Gantt graphs for creating a time line graph. It allows to show the overlapping of complex historical events. It works much better than Time-line graphs. The problem is that the longer my time periods are, the smaller the labels and texts describing the facts become, and they will become illegible. My question is how to create a horizontal scroll bar just for the Mermaid graph, so that I focus on smaller periods and see them bigger on the screen. I want to see the parallelism between facts in different places at the same time. So I read this chart mainly vertically. Any way to increase the size of the graph without resizing the site is welcome. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Hello @pajaro1966, You could look into the 3rd party mkdocs plugin to add support for zooming in Mermaid diagrams: Or you could try setting up Gantt timelines from the Neoteroi package, which do support horizontal lines and styling, however I'm not sure if they're ideal for your use case: |
Beta Was this translation helpful? Give feedback.
Hello @pajaro1966,
Mermaid diagrams in the Material theme by default don't support zooming in etc., and due to them being in a shadow root they can't be styled to add a horizontal scroll bar🤔. I haven't looked into the docs of Mermaid to see possible configuration settings for the Gantt timelines, so perhaps I'm missing something.
You could look into the 3rd party mkdocs plugin to add support for zooming in Mermaid diagrams:
Or you could try setting up Gantt timelines from the Neoteroi package, which do support horizontal lines and styling, however I'm not sure if they're ideal for your use case: