gitlabjekyllmermaidgitlab-pages

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


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


Solution

  • 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:

    enter image description here