Mermaid is this diagramming tool that makes it easier to visual processes and database connections when you’re designing a system.

Jason Bellamy wrote this easy to use Mermaid plugin for Jekyll that is on GitHub.

It makes diagrams like this:

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

From this:


{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

Anyway, this is documentation for installing the plugin.

I added a few steps from Jason’s installation process because I’m not very bright, and it took me a while to get it to work. I figured the next time I want to install the plug-in this may stop me from wasting an hour.

Open the Jekyll _config.yml file to edit. I use vim.

vim _config.yml

Add Jekyll-mermaid to the plugins and a js library for mermaid

# Build settings
theme: minima (you might have a different theme)
plugins:
  - jekyll-feed
  - jekyll-mermaid

mermaid:
  src: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'

Restart the Jekyll server

bundle exec jekyll serve

Write your chart and be sure to include:


{% mermaid %} - at the beginning

<Chart code>

{% endmermaid %} - at the end

Then


{% mermaid %}
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
{% endmermaid %}

Turns into:

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

Go to the Mermaid website for documentation on creating diagrams.

Visit Emlekezik.com