{%- comment -%}
Render Mermaid diagrams in docs pages.

Markdown ```mermaid fenced blocks are emitted by Kramdown as
<pre><code class="language-mermaid">…</code></pre>, but Mermaid only
auto-renders elements with class="mermaid". This snippet rewrites the
pre/code nodes into div.mermaid before initialising the library.

Loaded as an ES module from the jsDelivr CDN so we don't have to vendor
the library into the repo. Pinned to a major version for cache stability.
{%- endcomment -%}
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';

  document.querySelectorAll('pre > code.language-mermaid').forEach((code) => {
    const div = document.createElement('div');
    div.className = 'mermaid';
    div.textContent = code.textContent;
    code.parentElement.replaceWith(div);
  });

  mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
  mermaid.run();
</script>