Add support for draw.io diagram rendering

[SilasBerger]

Add support for SSR- or live-rendering draw.io diagrams from a draw.io a XML object in the codebase.

Under the hood, a *.drawio file looks like this:

<mxfile host="Electron" modified="2024-01-12T18:06:35.819Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.18 Chrome/120.0.6099.199 Electron/28.1.2 Safari/537.36" etag="GFLFRjP3Gb1FHmmebjOb" version="22.1.18" type="device">
  <diagram name="Page-1" id="zg5J133Pvn5T79VbdHT6">
    <mxGraphModel dx="984" dy="718" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="OexC0P_dEvz_FHYpmvae-2" value="Edit in draw.io desktop app" style="shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" vertex="1" parent="1">
          <mxGeometry x="80" y="310" width="200" height="40" as="geometry" />
        </mxCell>
        <mxCell id="OexC0P_dEvz_FHYpmvae-3" value="Save XML in repo" style="shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
          <mxGeometry x="260" y="310" width="150" height="40" as="geometry" />
        </mxCell>
        <mxCell id="OexC0P_dEvz_FHYpmvae-4" value="Render live or during build" style="shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
          <mxGeometry x="390" y="310" width="190" height="40" as="geometry" />
        </mxCell>
        <mxCell id="OexC0P_dEvz_FHYpmvae-5" value="Profit" style="shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="560" y="310" width="90" height="40" as="geometry" />
        </mxCell>
        <mxCell id="OexC0P_dEvz_FHYpmvae-6" value="Happy person" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;" vertex="1" parent="1">
          <mxGeometry x="670" y="290" width="30" height="60" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Let's say we have a content page Some-Topic/Some-Article.mdx. We could then store a draw.io diagram under Some-Topic/assets/myDiagram.drawio. The MDX page might looks something like this:

# Some Article
Here's a diagram to visualize this concept:
::drawio[assets/myDiagram.drawio]

The ::drawio leaf directive implementation would then make a call to the draw.io renderer (most likely at build time) and replace the directive with the resulting image.