5
1

More than 3 years have passed since last update.

Jekyllでmermaidを使ってダイアグラムを描く

Posted at

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が有効になるようにされています。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1