diff --git a/actions/publish-single-page-docs/src/template.js b/actions/publish-single-page-docs/src/template.js
index a2fe92d..3c4a653 100644
--- a/actions/publish-single-page-docs/src/template.js
+++ b/actions/publish-single-page-docs/src/template.js
@@ -219,7 +219,10 @@ body { margin: 0; font-family: var(--font-sans); color: var(--text-body); }
   font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mp-doc pre.mermaid svg { max-width: 100%; height: auto; }
+/* margin-inline:auto, not the parent's text-align. Mermaid sets display:block on
+   the <svg> it swaps in, and a block box ignores text-align — so a diagram
+   narrower than the column sat flush left. */
+.mp-doc pre.mermaid svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
 
 /* ── Footnotes (GFM) ──────────────────────────────────────────────────────── */
 .mp-doc .footnotes {
diff --git a/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css b/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css
index 35f6104..7242cc4 100644
--- a/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css
+++ b/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css
@@ -173,7 +173,10 @@ body { margin: 0; font-family: var(--font-sans); color: var(--text-body); }
   font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mp-doc pre.mermaid svg { max-width: 100%; height: auto; }
+/* margin-inline:auto, not the parent's text-align. Mermaid sets display:block on
+   the <svg> it swaps in, and a block box ignores text-align — so a diagram
+   narrower than the column sat flush left. */
+.mp-doc pre.mermaid svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
 
 /* ── Footnotes (GFM) ──────────────────────────────────────────────────────── */
 .mp-doc .footnotes {
diff --git a/tests/fixtures/single-page-bundle/release-process/assets/doc.css b/tests/fixtures/single-page-bundle/release-process/assets/doc.css
index 35f6104..7242cc4 100644
--- a/tests/fixtures/single-page-bundle/release-process/assets/doc.css
+++ b/tests/fixtures/single-page-bundle/release-process/assets/doc.css
@@ -173,7 +173,10 @@ body { margin: 0; font-family: var(--font-sans); color: var(--text-body); }
   font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mp-doc pre.mermaid svg { max-width: 100%; height: auto; }
+/* margin-inline:auto, not the parent's text-align. Mermaid sets display:block on
+   the <svg> it swaps in, and a block box ignores text-align — so a diagram
+   narrower than the column sat flush left. */
+.mp-doc pre.mermaid svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
 
 /* ── Footnotes (GFM) ──────────────────────────────────────────────────────── */
 .mp-doc .footnotes {