ai-agent-book/extras/mermaid-init.js

/**
 * Mermaid loader for MkDocs Material.
 *
 * Material's `navigation.instant` swaps page content without a full reload,
 * so Mermaid must be (re-)initialized after every page swap. We hook into
 * both the initial load and Material's custom `document-subscriber` event.
 *
 * The mermaid.js runtime itself is loaded via mkdocs.yml `extra_javascript`
 * with `defer`, so it's available by the time this script runs.
 */
(function () {
  function isMermaidReady() {
    return typeof window.mermaid !== 'undefined';
  }

  function renderAll() {
    if (!isMermaidReady()) return;
    try {
      window.mermaid.initialize({
        startOnLoad: false,
        theme: document.documentElement.getAttribute('data-md-color-scheme') === 'slate'
          ? 'dark'
          : 'default',
        securityLevel: 'loose',     // allow $ in labels, e.g. $web_search
        flowchart: { curve: 'basis', useMaxWidth: true },
      });
      window.mermaid.run({ querySelector: '.mermaid:not([data-processed])' });
    } catch (e) {
      console.warn('[mermaid] render failed:', e);
    }
  }

  // Re-render whenever Material swaps to a new page.
  document.addEventListener('DOMContentLoaded', renderAll);
  document$.subscribe(renderAll);   // `document$` is provided by Material

  // Re-theme when the user toggles light/dark.
  new MutationObserver(renderAll)
    .observe(document.documentElement,
      { attributes: true, attributeFilter: ['data-md-color-scheme'] });
})();