Generate awesome flows in markdown

Flow diagrams can help greatly to explain some flow, it works much better the just text. To generate visual flows from text (markdown), Knut Sveidqvist created Mermaid-js. It’s awesome, go check out the docs.

Example

Mermaid will turn this (markdown):

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

Into this basic flow:

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

Use Mermaid-js in Github Pages

To use it in Github Pages (or Jekyll), you’ll need to do some extra config.

Download the latest release

Go to mermaid-js release page and download the latest release.

Add javascript files to project

I downloaded Mermaid-js 8.9.2 release, and just took the dist\mermaid.min.js and dist\mermaid.min.js.map and copied them to assets\mermaid-8.9.2 (new) folder in my Jekyll project.

Code your graphs

To see the result, you’ll need to add some flow code to your page, like


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

Add the javascript file to your page

You’re then left to add the javascript to your page, you’ll only have to do this once. And you can do it anywhere. Add it to your main template if you draw a lot of flows or just to the pages where you want a flow.


<script src="/assets/mermaid-8.9.2/mermaid.min.js"></script>

Stephan van Rooij

Software architect with a passion for home automation.