<script defer type="text/javascript" src="<%- conf.js %>"></script>
<script>
  stellar.initPlugin(() => {
    const els = document.querySelectorAll('.mermaid');
    if (els.length > 0) {
      if (<%- conf.style_optimization === true %>) {
        utils.css(`<%- url_for('/css/plugins/mermaid.css') %>?v=<%- stellar_info('version') %>`);
      }
      const mermaid_config = {
        startOnLoad: false,
        theme:
          "<%- theme.style.prefers_theme %>" == "auto" &&
            window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "<%- conf.theme %>",
        logLevel: 3,
        flowchart: {
          useMaxWidth: false,
          htmlLabels: true,
          curve: "linear"
        },
        gantt: {
          axisFormat: "%Y/%m/%d"
        },
        sequence: {
          actorMargin: 50
        }
      }
      mermaid.initialize(mermaid_config);
      mermaid.run();
    }
  }, 'mermaid');
</script>
