Add support for mermaid js diagrams

[robinbaeurle]

Hi, Based on https://github.com/squidfunk/mkdocs-material/issues/5208.

Is it possible to add an option to support mermaid js diagrams in the same way as images are supported?

GitHub is also able to display markdown in a way that the mermaid js diagrams become zoomable: https://github.com/squidfunk/mkdocs-material/blob/master/docs/reference/diagrams.md#using-flowcharts

BR

[hellowac]

tks @blueswen

[blueswen]

Hi @robinbaeurle @hellowac ,

Since the compiled result of the Mermaid diagram is not an image, our plugins can't open it in lightbox like an image.

I spent some time investigating how GitHub implements the zoomable feature for Mermaid diagrams. They have a unique pipeline and script to add this viewer feature, as described in Include diagrams in your Markdown files with Mermaid. Regrettably, I haven't been able to identify the public package they use for the Mermaid viewer. If you know of any exceptional Mermaid viewer plugins, I would love to create another MkDocs plugin to implement this feature.

[AndBondStyle]

I'm using kroki.io and mkdocs-kroki-plugin and it works great together with this plugin