Mermaid is a great tool to display diagrams.

To configure Mermaid for Jekyll is like adding dependency on JS library as presented here

Add JavaScript library

Create mermaid.html file in _includes folder as follows:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Include added file

The example is for Minima theme. Update custom-head.html in _includes folder by adding inclusion statement at the bottom:

{% if page.mermaid %}
  {% include mermaid.html %}
{% endif %}

Use Mermaid

  • Then include Mermaid in front matter on the page:
---
layout: post
title:  "Mermaid"
date:   2020-01-05
mermaid: true
---
  • Add a script with div class name=mermaid:
<div class="mermaid">
flowchart LR
    A[coffee] --> B{tasty?};
    B-- Yes -->C[Happy]
    B-- No -->D(Sad);
</div>

The result is as below:

flowchart LR A[coffee] --> B{tasty?}; B-- Yes -->C[Happy] B-- No -->D(Sad);