GitHub Pagesは、静的なウェブサイトのホスティングサービスです。
GitHub Pagesのデフォルトの静的サイトジェネレータはJekyllで、JekyllのソースリポジトリをGitHubにあげておけば、リポジトリが更新されるたびに、自動的にそのソースリポジトリからウェブサイトを再生成してくれます。JekyllではMarkdownでコンテンツを書くことができます。
mermaidを用いると、フローチャートやUMLなどのダイアグラムなどの図の構成や属性をプレーンテキストでMarkdownのコンテンツ内に書き、生成されたHTMLに図を描画することができます。mermaidのサイトにmermaidの記述と生成された図のサンプルがあります。
Jekyllでmermaidを有効にする簡単な方法を調べたところ、参考になるリポジトリがありました。このリポジトリのmermaid.htmlを、_include
内に置きます。そして、mermaidを使用したいページのレイアウトで、</body>
の後で、mermaid.html
をインクルードします。。
{% include mermaid.html %}
参考リポジトリでは、mermaid.html
のパスが異なりますが、post.html
のこの部分です。また、Front matterで、mermaid: true
と指定されたページのみmermaidが有効になるようにされています。