gistfile1.txt

https://www.gem.wiki/Test_ObservableOwnershipTree
https://www.gem.wiki/Test_ObservableOwnershipTree_large

widget code

<script src="https://unpkg.com/@panzoom/[email protected]/dist/panzoom.min.js"></script>
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    console.log("here")
    const drawDiagram = async function () {
      var element = document.getElementById("mermaid-graph");
      console.log(element)
      const binGraphDefinition = atob("<!--{$data|escape:'javascript'}-->");
      const graphDefinition= new TextDecoder().decode(Uint8Array.from(binGraphDefinition, (m) => m.codePointAt(0)));

      console.log(graphDefinition)
      const { svg } = await mermaid.render('mermaid-svg', graphDefinition);
      console.log(svg)
      element.innerHTML = svg;
      var svg_element = document.getElementById("mermaid-svg");

      let width = parseFloat(svg_element.style['max-width']) * 0.8
      svg_element.style.margin = 'auto'
      if (width < 1600) {
          svg_element.style.width = width + "px"
          svg_element.style.margin = 'auto'
          element.style.display = 'flex'
          element.scrollTop = element.scrollHeight
      } else {
          element.style.height = "500px"
          let panzoom = Panzoom(svg_element, {"maxScale": 20})
          svg_element.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)
          window.panzoom = panzoom
          
      }
    };

    drawDiagram();
  </script>

  <pre id="mermaid-graph" style="max-height: 800px; background-color:white"></pre>