web/_includes/mermaid.html

<!--
  mermaid-js loader
-->

<script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>

<script>
  (function () {

    function updateMermaid(event) {
      if (event.source === window && event.data &&
        event.data.direction === ModeToggle.ID) {

        const mode = event.data.message;

        if (typeof mermaid === "undefined") {
          return;
        }

        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
        let config = {theme: expectedTheme};

        /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
        $(".mermaid").each(function () {
          let svgCode = $(this).prev().children().html();
          $(this).removeAttr("data-processed");
          $(this).html(svgCode);
        });

        mermaid.initialize(config);
        mermaid.init(undefined, ".mermaid");
      }
    }

    let initTheme = "default";

    if ($("html[data-mode=dark]").length > 0
      || ($("html[data-mode]").length == 0
        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
      initTheme = "dark";
    }

    let mermaidConf = {
      theme: initTheme  /* <default|dark|forest|neutral> */
    };

    /* Create mermaid tag */
    $("pre").has("code.language-mermaid").each(function () {
      let svgCode = $(this).children().html();
      $(this).addClass("unloaded");
      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
    });

    mermaid.initialize(mermaidConf);

    window.addEventListener("message", updateMermaid);
  })();

</script>