How to get graphs to render in Mermaid + Jekyll / GitLab Pages?

Question

I have a GitLab Pages project and trying to render graphs using Mermaid.

In the head.html I included this line ...

<script type="text/javascript" src="{{ '/assets/js/mermaid/mermaid.js' | absolute_url }}"></script>

And then placed the mermaid.js file in the myproj/assets/js/mermaid directory.

And in my *.md file I have:

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

Yet, I get no renderings.

I'm trying to use the method in the link below which seems to support only using JS, and therefore should work with GitLab pages, but I haven't found the file called mermaid.full.min.js in the repos, so ... maybe it's not supported, or has since changed up?

http://kkpattern.github.io/2015/05/15/Embed-Chart-in-Jekyll.html

Answer 1

As you're using Jekyll, so if you don't mind to use a plugin, I hope the below can help you do it easier.

jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, youtube, emoji, vimeo, dailymotion, etc.

https://github.com/jeffreytse/jekyll-spaceship

There are two ways to create a diagram in your Jekyll blog page:

```mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
```

or

@startmermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
@endmermaid

Code above would be parsed as: