Change the file extension of your post file from .md to .mdx and import all of your diagrams at the top of the file:

---
title: 'Blog Post Title'
.
.
.
---
import TestDiagram from "./comm-diagram-test.svg"
import TestDiagram2 from "./comm-diagram-test-2.svg"
.
.
.

Render them in $\LaTeX$ using quiver or some other tool

Then use upmath by rendering as html, viewing the source by following the link, and saving the page with ctrl + s as an svg.

In the global.css file, add the following at the bottom of the file:

.diagram {
  width: 100%;
  margin: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
  fill: currentColor;
}

.diagram path,
.diagram line,
.diagram polyline,
.diagram polygon {
  stroke: currentColor;
  fill: none;
}

Finally, inline the diagrams

<TestDiagram class="diagram" />
<TestDiagram2 class="diagram" />

Some text between

To place two diagrams next to each other, add this to the end of the global.css file

.diagram-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

and add them like this:

<div class="diagram-row">
  <TestDiagram class="diagram" />
  <TestDiagram2 class="diagram" />
</div>

Don’t forget to add how you customized the width in Layout.astro