To render beautiful graphs, sequence and Gantt diagrams and flowcharts via code, we can use the Mermaid library.

Jekyll has a plugin to to simplify the creation of mermaid diagrams and flowcharts in your posts and pages.

However, for safety reasons, if you want github automatically transform your post into web pages, you can’t use a plugin.

We will make mermaid work on github pages without plugin.

Steps

  • Dowload release version of Mermaid.

  • Make a dir in your github pages project, such as /mermaid.

  • Copy all files in mermaid/dist folder to your /mermaid directory.

  • Open your github pages project /layout/post.html, add following code:

<script src="/mermaid/mermaid.min.js"></script>
<link rel="stylesheet" href="/mermaid/mermaid.css">
<script>mermaid.initialize({startOnLoad:true});</script>

You can also change href="/mermaid/mermaid.css" to href="mermaid.dark.css" or href="mermaid.forest.css".

Everything done, you can use mermaid graphs in your posts now:

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

Then you would see:

graph TD; A-->B; A-->C; B-->D; C-->D;

References

Adding graphs via Mermaid

Embed Mermaid Charts in Jekyll without Plugin

Mermaid Doc