How to enable clicking on svg (mermaid) and render in new tab?

[selvavm]

Hi,

I am a newbie to mkdocs and mkdocs-material. When I have a big mermaid chart, it is too tiny to see. So, I made a hack javascript code which adds a click event to the SVG and when clicked, opens a new tab only with the SVG (a full-screen experience). The script is working in a dummy HTML but not in mkdocs-materials. The click event is not registered and thus, the function is not executed. Do you how I can add this event after svg elements are created?

content of extra.js:

var svgs = document.getElementsByTagName("svg"); 
for(var i=0; i<svgs.length; i++){ 
 svgs[i].onclick = function(){ 
   // grab your svg element
   const svg = svgs[i];//document.querySelector("svg");
   // convert to a valid XML source
   const as_text = new XMLSerializer().serializeToString(svg);
   // store in a Blob
   const blob = new Blob([as_text], { type: "image/svg+xml" });
   // create an URI pointing to that blob
   const url = URL.createObjectURL(blob);
   const win = open(url);
   // so the Garbage Collector can collect the blob
   win.onload = (evt) => URL.revokeObjectURL(url);
 } 
}

[facelessuser]

Personally, I prefer to disable useMaxWidth in the config for Mermaid diagrams as I prefer that my diagrams do not scale within their parent element, I rather them overflow with a scrollbar. This usually removes the need for an expanding version of the SVG, at least for me.

As an example, I have a fairly large Mermaid rendering here that just overflows: https://facelessuser.github.io/coloraide/colors/#color-space-map.

I'm not sure what Material does out of the box, but I'm currently still using a custom solution for my diagrams. IIRC, you can adjust the config in Mermaid using a special header at the beginning of your diagram, so you could adjust useMaxWidth on the fly, then it would just be a matter of using some CSS.

This, of course, assumes that the overflow approach is preferable to the scaled approach with a zoomed option.

[selvavm]

Thanks, @facelessuser. It depends on how we see the diagram (especially while deep-diving). I like the scroll bar solution but we soon miss the holistic picture :(

[selvavm]

Hi @squidfunk. I am finally able to implement this using mkdocs-mermaid2-plugin by using the callback argument like below. I figured out, in mkdocs-material, we are doing shadow-dom (closed) so I am not able to grab the mermaid diagram and apply customization.

arguments:
      securityLevel: 'loose'
      mermaid:
        callback: ^myMermaidCallbackFunction

How do you see the same support in your repo? Maybe we can hardcode this (at least for securitylevel it doesn't matter) so we can leverage the callback of mermaid. Let me know your opinion and I can try making a PR (I am novice but I can try :))

[squidfunk]

Shadow DOM is necessary to work around Mermaid's ID pollution problem, see mermaid-js/mermaid#1318. Other than that, support for this is currently not planned. I'm happy to review a PR, but I can't pinpoint what would be necessary to pull this off.