krata/_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> */
    };

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

    mermaid.initialize(mermaidConf);

    window.addEventListener("message", updateMermaid);
  });
</script>