wails/docs/src/components/Mermaid.astro

---
export interface Props {
  title?: string;
}

const { title = "" } = Astro.props;
---

<script>
  import mermaid from "mermaid";

  // Postpone mermaid initialization
  mermaid.initialize({ startOnLoad: false });

  function extractMermaidCode() {
    // Find all mermaid components
    const mermaidElements = document.querySelectorAll("figure.expandable-diagram");

    mermaidElements.forEach((element) => {
      // Find the code content in the details section
      const codeElement = element.querySelector("details pre code");
      
      if (!codeElement) return;
      
      // Extract the text content
      let code = codeElement.textContent || "";
      
      // Clean up the code
      code = code.trim();
      
      // Construct the `pre` element for the diagram code
      const preElement = document.createElement("pre");
      preElement.className = "mermaid not-prose";
      preElement.innerHTML = code;
      
      // Find the diagram content container and override its content
      const diagramContainer = element.querySelector(".diagram-content");
      if (diagramContainer) {
        diagramContainer.innerHTML = "";
        diagramContainer.appendChild(preElement);
      }
    });
  }

  // Wait for the DOM to be fully loaded
  document.addEventListener("DOMContentLoaded", async () => {
    extractMermaidCode();
    mermaid.initialize({ startOnLoad: true });
  });
</script>

<figure class="expandable-diagram">
  <figcaption>{title}</figcaption>
  <div class="diagram-content">Loading diagram...</div>
  <details>
    <summary>Source</summary>
    <pre><code><slot /></code></pre>
  </details>
</figure>