3

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

Ender
  • 1,652
  • 2
  • 25
  • 50

1 Answers1

3

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

J.T.
  • 864
  • 9
  • 17
  • 1
    Excellent, works locally. Just took a bit of work. Much thanks. – Ender Jun 28 '20 at 01:14
  • Though this does help to render diagrams locally, it doesn't work with Github/GitLab pages as I'd need to render them locally and push the static files which is what I'd like to not have to do. – Ender Jun 28 '20 at 01:34