web/_includes/mermaid.html

<!-- mermaid-js loader -->
<script type="text/javascript">
  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> */
      const mermaidList = document.getElementsByClassName('mermaid');

      [...mermaidList].forEach((elem) => {
        const svgCode = elem.previousSibling.children.item(0).innerHTML;
        elem.innerHTML = svgCode;
        elem.removeAttribute('data-processed');
      });

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

  (function () {
    let initTheme = 'default';
    const html = document.documentElement;

    if (
      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      initTheme = 'dark';
    }

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

    /* Create mermaid tag */
    const basicList = document.getElementsByClassName('language-mermaid');
    [...basicList].forEach((elem) => {
      const svgCode = elem.textContent;
      const backup = elem.parentElement;
      backup.classList.add('unloaded');
      /* create mermaid node */
      let mermaid = document.createElement('pre');
      mermaid.classList.add('mermaid');
      const text = document.createTextNode(svgCode);
      mermaid.appendChild(text);
      backup.after(mermaid);
    });

    mermaid.initialize(mermaidConf);
    window.addEventListener('message', updateMermaid);
  })();
</script>