How to make GitHub Pages Markdown support mermaid diagram?

Question

I am hoping to use mermaid in GitHub-pages, with simple commit and push.

In other words, I am hoping to wirte in my markdown file like this

```mermaid
graph LR
   A --> B
   A -->C
   C -->D
```

and add some js on my _layouts/post.html to somehow transform this to a mermaid graph.

I have found this theme claims that it supports such thing. But this theme looks way too heavy for me, the js were just too much, so I thought I could only use this file, which is simply

<script>
 window.Lazyload.js('{{ _sources.mermaid }}', function() {
   mermaid.initialize({
     startOnLoad: true
   });
   mermaid.init(undefined, '.language-mermaid');
 });
</script>

In my _include/mermaid.html, I replaced {{ _sources.mermaid }} to the mermaid cdn

<script>
 window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() {
   mermaid.initialize({
     startOnLoad: true
   });
   mermaid.init(undefined, '.language-mermaid');
 });
</script>

it still won't work. In my post, it was shown as regular code blocks, not a mermaid diagram.

Edit: In chrome developer's view, I don't see any connections made to the link https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js.

And I tried this code, a connection to mermaid wes made in network tag in developer view, but the mermaid diagram still doesn't work

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
    startOnReady:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>

water liu · Accepted Answer · 2019-04-03T23:10:36.060

I found the solution.

<!DOCTYPE html>
<html lang="en">
   <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
    </head>
  
<body>
 <pre><code class="language-mermaid">graph LR
A--&gt;B
</code></pre>

<div class="mermaid">graph LR
A--&gt;B
</div>
 
</body>
<script>
var config = {
    startOnLoad:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>

</html>

score 3 · Answer 2 · answered Jun 22 '20 at 15:20

If you're using Jekyll, and you don't mind to use a plugin, I think 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:

score 1 · Answer 3 · answered Dec 21 '18 at 11:27

1

The URL you tried to use does not exist. This is a correct URL:

https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

answered Dec 21 '18 at 11:27

Lajos Arpad

45,912
26
82
148

sorry, I updated the link but the result is still not right. – water liu Dec 21 '18 at 11:50
@waterliu is the code inside the function executing at all? – Lajos Arpad Dec 21 '18 at 12:23
sorry I have no idea what that means... I have little knowledge about js. I can only say that this is all the js in my post. No other – water liu Dec 21 '18 at 12:27
@waterliu insert a command of debugger; as the first operation of the function of the code you have given. Open the dev tools of your browser and load your page. If the code inside the function is executed, then your code should jump right into it. In the dev tools in the Sources tab check your Javascript. Is it refreshed? – Lajos Arpad Dec 21 '18 at 12:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185611/discussion-between-water-liu-and-lajos-arpad). – water liu Dec 21 '18 at 12:46

score 1 · Answer 4 · answered Nov 05 '20 at 10:21

1

I solved it buy installing Github Mermaid extensioin in the browser. Actually, they have support for Chrome, Opera & Firefox.

I am using Chrome: https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe?hl=en

answered Nov 05 '20 at 10:21

Hafed Gabroun

29
7

score 0 · Answer 5 · answered Feb 05 '20 at 15:55

I was having a similar problem and ended up just going with a custom jekyll plugin. If you are able to use custom plugins, the following will replace the markdown code blocks for mermaid with elements.

Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')
  # only process if we deal with a markdown file
  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/```mermaid([^`]+?)```/, '<div class="mermaid">\1</div>')
    post.content = newContent
  end
end

How to make GitHub Pages Markdown support mermaid diagram?

5 Answers5