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>

Answer 1

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:

Answer 2

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

Answer 3

Feb. 2022: Markdown pages support Mermaid (gist too).
As Jegors ?emisovs adds in the comments, this does not apply yet to GitHub pages, as illustrated by his example site.

See:

Include diagrams in your Markdown files with Mermaid

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. Maintained by Knut Sveidqvist, it supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart.

Working with Knut and also the wider community at CommonMark, we’ve rolled out a change that will allow you to create graphs inline using Mermaid syntax:

Answer 4

In addition to the other answer that mention the plugins. In a firm I work form asked to provide extention links to most supported browsers.

Here are the Mermaid extention that renders Mermaid on browser level, I have tested them all:

Mermaid diagram for documentation When you use mermaid to create diagrams in Gitlab, and in case the business moves with new Version Control provider like Github or Azure DevOps or others, in this case you need to install a browser plugins to make it possible to view the diagrams.

• Chrome -> GitHub + Mermaid
• Firefox -> GitHub + Mermaid
• Opera -> Extensions for Mermaid
• Edge -> Extensions for Mermaid

Answer 5

I assume this requirement is with Jekyll + Github Pages since Github Pages is mentioned.

There's plugins doing this, such as jekyll-spaceship. It supports a lot more rendering format.

In order to make the unsafe plugins works on Github Pages, you will need a Github Workflow Action jekyll-deploy-action.

BTW: The custom plugins (putting plugins in your _plugins folder) won't work with Github Pages, they are not the safe plugins. Github Pages locks the config to safe=true, even locally.

Answer 6

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

Answer 7

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