fix: switch Mermaid to client-side rendering for Vercel compatibility

Author: zzq0826

astro.config.ts

@@ -71,7 +71,7 @@ export default defineConfig({
     remarkPlugins: [remarkMath, remarkGfm],
     rehypePlugins: [
       rehypeSlug,
-      [rehypeMermaid, { strategy: "img-png" }],
+      [rehypeMermaid, { strategy: "pre-mermaid" }],
       [
         rehypeAutolinkHeadings,
         {

src/components/HeadCommon.astro

@@ -20,6 +20,12 @@ import "../styles/design-system/global-styles.css"
 <!-- Scrollable a11y code helper -->
 <script src="/make-scrollable-code-focusable.js" is:inline></script>
 
+<!-- Mermaid.js for client-side rendering -->
+<script type="module">
+  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"
+  mermaid.initialize({ startOnLoad: true, theme: "default" })
+</script>
+
 <!-- Google Tag Manager -->
 <!-- <script type="text/javascript">
   ;(function (w, d, s, l, i) {

src/styles/index.css

@@ -419,3 +419,7 @@ h2.heading {
 .mermaid-diagram > img {
   height: auto;
 }
+
+.mermaid {
+  background: transparent;
+}