Zooming of Mermaid content? #7199

bschollnick · 2024-05-20T13:55:29Z

bschollnick
May 20, 2024

Folks,

I have some very large mermaid diagrams, that I'd like to be able to zoom & preferably drag 'n move around the file.

Now, I've seen that github will natively add zoom & pan'n scan features to a mermaid diagram... But I haven't seen anything that'll work with mkdocs / mkdocs Material?

I did find this very small javascript at - https://jsfiddle.net/zu_min_com/2agy5ehm/26/, which uses the D3 javascript library.
I've attempted to make it work under mkdocs Material, and failed.

This is the reduced example where it works, stand-alone.

small_raw_example.txt

But If I try to add it to mkdocs, it doesn't work. I believe it's because the native mkdocs mermaid isn't being seen?

I tried loading the cdn version of mermaid as well, but that conflicted with the built-in mermaid. (It was worth a try!)

Anyone have any suggestions? Is there a way to make this work? I don't need this for every diagram....

- Benjamin

bschollnick · 2024-05-20T15:21:18Z

bschollnick
May 20, 2024
Author

The small example is this:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v6.min.js"></script>

<div class="mermaid" style="max-height: 350px;">
sequenceDiagram
     participant user
     participant app
     participant authentication system
     User->>App: Login Attempt
     App->>Authentication system: Authentication request
     Authentication System->>User: Login Request
     User->>Authentication system: ID, password
     Authentication system->>User: Authentication result display
     User->>App: Provide authentication results
     App->>Authentication system: Authentication result verification
     Authentication system->>App: Verification results
</div>

<script type="text/javascript">
window.addEventListener('load', function () {
  var svgs = d3.selectAll(".mermaid svg");
  svgs.each(function() {
    var svg = d3.select(this);
    svg.html("<g>" + svg.html() + "</g>");
    var inner = svg.select("g");
    var zoom = d3.zoom().on("zoom", function(event) {
      inner.attr("transform", event.transform);
    });
    svg.call(zoom);
  });
});
</script>
</body>

4 replies

alexvoss May 20, 2024
Collaborator Sponsor

Any chance you could turn this into a minimal reproduction so we can look at it in the context of Material for MkDocs?

bschollnick May 20, 2024
Author

Of course,
md_example.md

I can't paste the markdown in, the editor keeps trying to process the markdown... But the file contains the markdown I've been testing with.

kamilkrzyskow May 20, 2024
Collaborator

Minimal reproductions are MkDocs projects in an archive, not Markdown files ;)

As the mermaid.js diagrams rendered by the mkdocs-theme are put inside a "closed" shadow root, then they can't be modified via extra external JavaScript. I'm not even sure if it would work with an "open" shadow root.

Looking at the example from #7190 and looking at the diagram on GitHub:

https://github.com/squidfunk/mkdocs-material/blob/master/docs/reference/diagrams.md#using-flowcharts

the diagram crashes in Firefox (😅) and on Chromium it loads in an <iframe> tag:

We can see that they do some magic and put up a link to the diagram window:

https://viewscreen.githubusercontent.com/markdown/mermaid?docs_host=https%3A%2F%2Fdocs.github.com&color_mode=dark#874ed201-2f5e-4f80-92b1-3385c70da4de

I don't know if it can be hijacked to render other external mermaid diagram, not loaded via GitHub domain 🤔

At first glance this feature won't be easy to integrate in mkdocs-material

bschollnick May 20, 2024
Author

That was my fear. And if you really need a test bundle, I can arrange something, but it would be the config, and that single markdown page.

Would this be worth trying to escalate up to mermaid.js folks?? I assume that if they added the feature, it would be available for us in mkdocs material?

PLAYG0N · 2024-08-29T20:39:13Z

PLAYG0N
Aug 29, 2024

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!

1 reply

fornax-a Oct 30, 2024

Works very well for me so far, appreciate the effort to implement this plugin!

kdkiss · 2024-08-30T19:04:28Z

kdkiss
Aug 30, 2024

What about clickable mermaid elements? Have not been able to get it to work. I recon it's not integrated?

6 replies

kdkiss Sep 1, 2024

Maybe adding a config option for: mermaid.initialize({
securityLevel: 'loose',
}); would do the trick to enable clickable events?

PLAYG0N Sep 2, 2024

I looked into it and I think this functionality is already provided with the mermaid2 plugin. Docs

I could not get it to work but maybe you have more luck (or skill ;) ) than me.

kdkiss Sep 3, 2024

I actually did get it working yesterday. Will send you the code to get it working later today. If you're curious.

malanvaneck Sep 4, 2024

Please share @kdkiss

kdkiss Sep 5, 2024

Ok so I'm your plugin setup in the mkdocs.yml file so following:

plugins:
-- mermaid2:
arguments:
securityLevel: 'loose'

You can't use custom superfences though it somehow breaks it.

Here is an example how I used it. Sorry for lack of styling here am on my mobile phone.

'''markdown

'''mermaid
flowchart TD
A[Step 1] -- Action 1 --> B[Step 2]
B -- Action 2 --> C[Step 3]
C -- Action 3 --> D[Step 4]
D -- Action 4 --> E[Step 5]
click A callbackA "Step 1"
click B callbackB "Step 2"
click C callbackC "Step 3"
click D callbackD "Step 4"
click E callbackE "Step 5"
'''

'''

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zooming of Mermaid content? #7199

{{title}}

Replies: 3 comments 11 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Zooming of Mermaid content? #7199

Replies: 3 comments · 11 replies

bschollnick May 20, 2024 Author

alexvoss May 20, 2024 Collaborator Sponsor

bschollnick May 20, 2024 Author

kamilkrzyskow May 20, 2024 Collaborator

bschollnick May 20, 2024 Author

Replies: 3 comments 11 replies

bschollnick
May 20, 2024
Author

alexvoss May 20, 2024
Collaborator Sponsor

bschollnick May 20, 2024
Author

kamilkrzyskow May 20, 2024
Collaborator

bschollnick May 20, 2024
Author