MermaidをGithub Pagesでも使う

2023年 5月 3日

GitHub PagesでもMermaidが使いたくなったので備忘録。単刀直入には<header>に以下を追加。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: false });
  await mermaid.run({
    querySelector: 'pre > code.language-mermaid', // GitHub Flavored Markdownに合わせる
  });
</script>

詳しくは、Using mermaid.run に書いてあるが簡単に理解を残しておくと･･･

  mermaid.initialize({ startOnLoad: false });

初期化時に自動でmermaid.run()を走らせないようにしています。

  await mermaid.run({
    querySelector: 'pre > code.language-mermaid', // GitHub Flavored Markdownに合わせる
  });

手動でmermaid.run()させるときに、オプションとして変換すべきタグがデフォルトのpre.mermaidではなくpre > code.language-mermaidなのを伝えています。 querySelector形式で伝えられるのは便利ですね！