Rendering Mermaid diagram with Pan and Zoom ability on mkdocs pages

[premthebuilder]

Hi, I just started using mermaid for our documentation using mkdocs recently and I am loving it. But one of issues that keeps me from using it to document large workflow diagrams that don't fit in a single page view is the lack of ability to pan and zoom, like the one you have with mermaid live editor

I searched through the issues/discussions and don't see any way to do this, so raising this issue. Hopefully we get enough support for this to make it a priority. Meanwhile I will take a shot at implementing it myself and submit a PR.
But please let me know if there a way to get this already. Thanks!

[github-actions]

Thank you for your contribution! This is very appreciated.

[fralau]

Thanks for your issue (and for your patience).

I am aware of that problem. The reason why it is not solved yet, is that it is a question that involves several components of the MkDocs ecosystem.

Mkdocs-Mermaid2 is essentially Python, though there are Javascript and css parts in it. Those were generally contributed by others.

I am putting in copy the maintainers of Mermaid's live editor (@sidharthv96 and @knsv). Who knows, they might have some ideas, or suggest someone who could help?

[fralau]

Just in case, I am also putting the maintainer of the Material theme in the loop (@squidfunk) as the subject might interest him.

I am not sure that Mkdocs-Mermaid2 is the exact place where the problem should be solved, but perhaps a multilateral discussion could lead us somewhere?

[fralau]

Actually this is a subject discussed at the level of the mermaid library (mermaid-js/mermaid#1860)