zoom / pan for mermaid diagrams

[haneul]

Context

No response

Description

Now github provides a control for zooming / panning diagrams from mermaidjs. That's quite helpful for showing a large diagrams. Can we have something similar with mkdocs material? See example from https://github.com/squidfunk/mkdocs-material/blob/master/docs/reference/diagrams.md#using-flowcharts

Related links

• Requesting a change

Use Cases

Many users use mkdocs for showing diagrams, so it would be helpful.

Visuals

No response

Before submitting

• [X] I have read and followed the change request guidelines.
• [X] I have verified that my idea is a change request and not a bug report.
• [X] I have ensured that, to the best knowledge, my idea will benefit the entire community.
• [X] I have included relevant links to the documentation, related issues and discussions to underline the need for my idea.

[squidfunk]

Thanks for suggesting. The mkdocs-glightbox plugin already supports zooming and panning of images, and since the underlying glightbox library supports arbitrary inline content, it should be extendable to Mermaid.js diagrams without problems. Thus, this change request is better implemented in mkdocs-glightbox. Closing as out-of-scope.

[alexeych0]

Seems unfair. glitchbox operates with images, not diagrams. It looks like it should be the standalone plugin like it's done for docsify: https://github.com/corentinleberre/docsify-mermaid-zoom

[squidfunk]

You are invited to write a third-party plugin or JavaScript extension. Feel free to share it here, it you do! ☺️

[datnguye]

Hey folks, is there any updates on the official supported zoom & pan here, or any recommended plugin for it?

Thanks a lot!

[55Cancri]

I need zoom and pan for a large mermaid diagram embedded in notion

[PLAYG0N]

Hi all

This bothered me for too long so I made my own plugin. You can check it out here. Let me know if anything doesn't work.

Note: This plugin is still in beta!

Hope this helps!