{%- macro mermaid_js(
url="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.0.2/mermaid.esm.min.mjs"
) -%}
<script type="module">
  document.addEventListener("DOMContentLoaded", async () => {
    const diagrams = document.querySelectorAll(".jp-Mermaid > pre.mermaid");
    // do not load mermaidjs if not needed
    if (!diagrams.length) {
      return;
    }
    const mermaid = (await import("{{ url }}")).default;

    mermaid.initialize({
      maxTextSize: 100000,
      startOnLoad: false,
      fontFamily: window
        .getComputedStyle(document.body)
        .getPropertyValue("--jp-ui-font-family"),
      theme: document.querySelector("body[data-jp-theme-light='true']")
        ? "default"
        : "dark",
    });

    let _nextMermaidId = 0;

    function makeMermaidImage(svg) {
      const img = document.createElement('img');
      const maxWidth = svg.match(/max-width: (\d+)/);
      if (maxWidth && maxWidth[1]) {
        const width = parseInt(maxWidth[1]);
        if (width && !Number.isNaN(width) && Number.isFinite(width)) {
          img.width = width;
        }
      }
      img.setAttribute('src', `data:image/svg+xml,${encodeURIComponent(svg)}`);
      return img;
    }

    async function makeMermaidError(text) {
      let errorMessage = '';
      try {
        await mermaid.parse(text);
      } catch (err) {
        errorMessage = `${err}`;
      }

      const result = document.createElement('details');
      const summary = document.createElement('summary');
      const pre = document.createElement('pre');
      const code = document.createElement('code');
      code.innerText = text;
      pre.appendChild(code);
      summary.appendChild(pre);
      result.appendChild(summary);

      const warning = document.createElement('pre');
      warning.innerText = errorMessage;
      result.appendChild(warning);
      return result;
    }

    async function renderOneMarmaid(src) {
      const id = `jp-mermaid-${_nextMermaidId++}`;
      const parent = src.parentNode;
      let raw = src.textContent.trim();
      const el = document.createElement("div");
      el.style.visibility = "hidden";
      document.body.appendChild(el);
      let result = null;
      try {
        const { svg } = await mermaid.render(id, raw, el);
        result = makeMermaidImage(svg);
      } catch (err) {
        parent.classList.add("jp-mod-warning");
        result = await makeMermaidError(raw);
      } finally {
        el.remove();
      }
      parent.classList.add("jp-RenderedMermaid");
      parent.appendChild(result);
    }

    void Promise.all([...diagrams].map(renderOneMarmaid));
  });
</script>
<style>
  .jp-RenderedMarkdown .jp-Mermaid:not(.jp-RenderedMermaid) {
    display: none;
  }
  .jp-RenderedMarkdown .jp-RenderedMermaid.jp-mod-warning {
    width: auto;
    padding: 10px;
    border: var(--jp-border-width) solid var(--jp-warn-color2);
    border-radius: var(--jp-border-radius);
    color: var(--jp-ui-font-color1);
    font-size: var(--jp-ui-font-size1);
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .jp-RenderedMarkdown .jp-RenderedMermaid.jp-mod-warning details > pre {
    margin-top: 1em;
  }
  .jp-RenderedMarkdown .jp-RenderedMermaid.jp-mod-warning summary {
    color: var(--jp-warn-color2);
  }
  .jp-RenderedMarkdown .jp-RenderedMermaid.jp-mod-warning summary > pre {
    display: inline-block;
  }
  .jp-RenderedMermaid > .mermaid {
    display: none;
  }
</style>
<!-- End of mermaid configuration -->
{%- endmacro %}