AstroブログにMermaidを導入して動的なテーマ切り替えを実装した

pnpm add rehype-mermaid playwright mermaidCopy

// ...
import rehypeMermaid from "rehype-mermaid";

export default defineConfig({
  // ...
  markdown: {
    rehypePlugins: [[rehypeMermaid, { strategy: "pre-mermaid" }]],
    // ...
  },
});astro.config.mjsCopy

<pre class="mermaid">
graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server 1]
    B --> D[Server 2]
</pre>出力されるHTMLのイメージCopy

import mermaid from "mermaid";

// デフォルトのテーマを指定して初期化
mermaid.initialize({ theme: "dark", startOnLoad: false });
// ページが読み込まれるたびにMermaidのレンダリングを実行
document.addEventListener("astro:page-load", async () => {
  await mermaid.run();
});クライアントサイドスクリプトCopy

<pre class="mermaid">
graph TD 
    A[Client] --> B[Load Balancer]
    B --> C[Server 1]
    B --> D[Server 2]
</pre>
<pre class="mermaid" data-processed="true">
  <svg id="mermaid-1762685428736">...</svg>
</pre>描画前後のHTMLの比較Copy

import type { MermaidConfig } from "mermaid";

// ページ内のMermaid要素をすべて取得する
const getMermaidElements = (): NodeListOf<HTMLElement> =>
  document.querySelectorAll(".mermaid");

/**
 * 指定されたテーマでMermaidの図をレンダリングする
 */
export const renderDiagrams = async (
  theme: MermaidConfig["theme"],
  dark: boolean
) => {
  const elements = getMermaidElements();
  if (elements.length === 0) {
    return;
  }

  // 動的にmermaidをインポート
  const mermaid = (await import("mermaid")).default;

  mermaid.initialize({ theme, startOnLoad: false, darkMode: dark });
  await mermaid.run({ nodes: elements });
};

/**
 * レンダリング前のMermaidコードをdata-original-code属性に退避させる
 */
export const saveMermaidCodes = () => {
  const elements = getMermaidElements();
  for (const element of elements) {
    if (!element.hasAttribute("data-original-code")) {
      element.setAttribute("data-original-code", element.innerHTML);
    }
  }
};

/**
 * 描画済みのMermaid図をレンダリング前の状態（Mermaidコード）に戻す
 */
export const resetProcessedDiagrams = () => {
  const elements = getMermaidElements();
  for (const element of elements) {
    // data-processed属性がなければ未処理なのでスキップ
    if (!element.hasAttribute("data-processed")) {
      continue;
    }

    const originalCode = element.getAttribute("data-original-code");
    if (originalCode != null) {
      element.removeAttribute("data-processed");
      element.innerHTML = originalCode;
    }
  }
};src/utils/mermaid.tsCopy

...
<!-- mermaid diagram support -->
<script>
  import {
    resetProcessedDiagrams,
    saveMermaidCodes,
    renderDiagrams,
  } from "@/utils/mermaid";

  const loadMermaidDiagrams = async (theme: "light" | "dark") => {
    saveMermaidCodes();
    resetProcessedDiagrams();
    const dark = theme === "dark";
    await renderDiagrams(dark ? "dark" : "default", dark);
  };

  document.addEventListener("theme-changed", async ev => {
    const theme = ev.detail.theme;
    await loadMermaidDiagrams(theme);
  });

  document.addEventListener("astro:page-load", async () => {
    const storedTheme = localStorage.getItem("theme");
    if (storedTheme) {
      await loadMermaidDiagrams(storedTheme == "dark" ? "dark" : "light");
    } else {
      const preferedTheme = window.matchMedia("(prefers-color-scheme: dark)")
        .matches
        ? "dark"
        : "light";
      await loadMermaidDiagrams(preferedTheme);
    }
  });
</script>src/layouts/PostDetails.astro(テーマ切り替え部分抜粋)Copy

// SVG内の各要素に適用するスタイルをCSS変数で定義
const mermaidThemeCSS = `
.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
  fill: var(--mermaid-node-fill);
  stroke: var(--mermaid-node-stroke);
}
.label,
.nodeLabel {
  color: var(--mermaid-text-color);
}
/* ... SVGを構成する他の全セレクタに対しても同様の定義が必要 ... */
`

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [
        rehypeMermaid,
        {
          strategy: "inline-svg",
          mermaidConfig: {
            // themeをnullに設定し、themeCSSを有効化
            theme: "null",
            themeCSS: mermaidThemeCSS,
          },
        },
      ],
      // ...
});astro.config.mjs（イメージ）Copy

:root {
  --mermaid-node-fill: #f0f0f0;
  --mermaid-node-stroke: #333;
  --mermaid-text-color: #000;
}

:root.dark {
  --mermaid-node-fill: #333;
  --mermaid-node-stroke: #f0f0f0;
  --mermaid-text-color: #fff;
}global.css（イメージ）Copy