com.wallstop-studios.unity-helpers/_includes/mermaid.html

Treasure chest of Unity developer tools

<!-- Mermaid.js for diagram rendering -->
<!-- Supports light/dark theme switching -->
<!-- Using pinned version 11.4.0 for stability -->
<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.esm.min.mjs";

  // Get current theme
  function getCurrentTheme() {
    return document.documentElement.getAttribute("data-theme") || "dark";
  }

  // Get mermaid theme based on site theme
  function getMermaidTheme(siteTheme) {
    return siteTheme === "dark" ? "dark" : "default";
  }

  // Initialize mermaid with theme-aware configuration
  // Note: startOnLoad is false - we manually call mermaid.run() after DOMContentLoaded
  function initMermaid() {
    const currentTheme = getCurrentTheme();
    mermaid.initialize({
      startOnLoad: false,
      theme: getMermaidTheme(currentTheme),
      securityLevel: "loose",
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true
      },
      sequence: {
        useMaxWidth: true
      }
    });
  }

  // Re-render mermaid diagrams with new theme
  window.updateMermaidTheme = async function (newTheme) {
    const diagrams = document.querySelectorAll(".mermaid");
    if (diagrams.length === 0) return;

    // Re-initialize with new theme
    mermaid.initialize({
      startOnLoad: false,
      theme: getMermaidTheme(newTheme),
      securityLevel: "loose",
      flowchart: {
        useMaxWidth: true,
        htmlLabels: true
      },
      sequence: {
        useMaxWidth: true
      }
    });

    // Re-render each diagram
    for (let i = 0; i < diagrams.length; i++) {
      const diagram = diagrams[i];
      let originalCode = diagram.getAttribute("data-original-code");

      // Store original code on first render
      if (!originalCode) {
        const code = diagram.textContent || diagram.innerText;
        if (code.trim()) {
          diagram.setAttribute("data-original-code", code.trim());
          originalCode = code.trim();
        }
      }

      if (originalCode) {
        diagram.removeAttribute("data-processed");
        diagram.textContent = originalCode;
      }
    }

    // Re-run mermaid
    await mermaid.run();
  };

  // Initialize and render mermaid diagrams after DOM is ready
  // Single render point to avoid duplicate diagram IDs
  document.addEventListener("DOMContentLoaded", function () {
    // Initialize mermaid configuration
    initMermaid();

    // Store original mermaid code before first render
    const diagrams = document.querySelectorAll(".mermaid");
    diagrams.forEach(function (diagram) {
      const code = diagram.textContent || diagram.innerText;
      if (code.trim() && !diagram.getAttribute("data-original-code")) {
        diagram.setAttribute("data-original-code", code.trim());
      }
    });

    // Single explicit render call
    mermaid.run();
  });
</script>