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/mermaid@8.8.0/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?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zooming of Mermaid content? #7199

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Zooming of Mermaid content? #7199

bschollnick May 20, 2024

Replies: 1 comment · 4 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

bschollnick
May 20, 2024

Replies: 1 comment 4 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