some styling issues, but it works

src/components/blog/MermaidRenderer.tsx

@@ -0,0 +1,51 @@
+import { onMount } from "solid-js";
+import mermaid from "mermaid";
+
+// Initialize mermaid once
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "dark",
+  securityLevel: "loose",
+  fontFamily: "monospace",
+  themeVariables: {
+    darkMode: true,
+    primaryColor: "#2c2f40",
+    primaryTextColor: "#b5c1f1",
+    primaryBorderColor: "#739df2",
+    lineColor: "#739df2",
+    secondaryColor: "#3e4255",
+    tertiaryColor: "#505469"
+  }
+});
+
+export default function MermaidRenderer() {
+  onMount(() => {
+    // Find all mermaid diagrams and render them
+    const mermaidPres = document.querySelectorAll('pre[data-type="mermaid"]');
+
+    mermaidPres.forEach(async (pre, index) => {
+      const code = pre.querySelector("code");
+      if (!code) return;
+
+      const content = code.textContent || "";
+      if (!content.trim()) return;
+
+      try {
+        const id = `mermaid-${index}-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg } = await mermaid.render(id, content);
+
+        // Replace the pre/code with rendered SVG
+        const wrapper = document.createElement("div");
+        wrapper.className = "mermaid-rendered";
+        wrapper.innerHTML = svg;
+        pre.replaceWith(wrapper);
+      } catch (err) {
+        console.error("Failed to render mermaid diagram:", err);
+        // Keep the original code block if rendering fails
+        pre.classList.add("mermaid-error");
+      }
+    });
+  });
+
+  return null;
+}