Mermaid diagram panning/zooming

[RavenLiquid]

I'm trying to integrate mermaid diagrams, but large diagrams (especially sequence) are unusable due to the lac of scaling options. I've seen some options else where but I don't know how to use them with DocFX. One solution uses markdown-it, but this is not available in markdig.

Now I only seem to have a choice between unreadable or so large it does not fit the screen and adds horizontal scollbars (useMaxWidth).

Is there another way to add panning and scaling? This does not seem like a weird feature.

I've seen some suggestions using svg-pan-zoom or panzoom but I don't know how to integrate this in DocFX for Mermaid diagrams.

[paulushub]

When you inspect the rendered mermaid diagram in DocFX page, you will see some similar to the following format

<pre class="mermaid">
    <svg aria-roledescription="..." role="..." style="..." viewBox="..." 
              xmlns:xlink="..." xmlns="..." width="100%" id="mermaid-1743076728729">
    ...
    </svg>
</pre>

I have not done it, but from the above output, you can

1. query the html dom for the <pre class="mermaid"> tags,
2. get the child svg element, and
3. pass it to the svg-pan-zoom or panzoom.