kita/templates/partials/mermaid.html

<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";

  const initMermaid = (isDark) => {
    mermaid.initialize({
      theme: isDark ? "dark" : "default",
      startOnLoad: false,
    });
    mermaid.run();
  };

  // Add data-mermaid-code attribute on all mermaid block.
  document.querySelectorAll(".mermaid").forEach((element) => {
    element.setAttribute("data-mermaid-code", element.innerHTML);
  });

  // Re-render mermaid when theme changed.
  document.body.addEventListener("set-theme", (e) => {
    document.querySelectorAll(".mermaid").forEach((element) => {
      const mermaidCode = element.getAttribute("data-mermaid-code");
      if (mermaidCode != null) {
        element.removeAttribute("data-processed");
        element.innerHTML = mermaidCode;
      }
    });
    initMermaid(e.detail == "dark");
  });

  // The es module script will load defer, so the localStorage should already be set by script in header.
  // If this script is loaded first, the script in header will dispatch an event to re-render mermaid, it's works too.
  initMermaid(localStorage.getItem("dark") === "true");
</script>