Mermaid: Render mermaid on github pages with simple code

Created on 21 Dec 2018 · 4Comments · Source: mermaid-js/mermaid

I have been trying to find a way to render mermaid in markdown simply by using

 ```mermaid
 # some mermaid code
 ```

in markdown, and use javascript in the page to render it.

I tried many solutions and faild. One of the solution I found is to use code from here but that's not correct. I am wondering if the author of this awesome js can give me a solution to acheive that and add that to the documentation?

Also I could not find the docs folder @knsv mensioned in #215.

Source

yk-liu

❤4 🎉2 👍2

Most helpful comment

I found the solution. Just put everything after <body>.

<!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>

it works great on my site. If anyone need the source code, you can see these two files. _include/mermaid.html and _layout/post.html

yk-liu on 22 Dec 2018

❤5 🎉5 👍3

All 4 comments

I have a similar request related to GitHub Pages. The HTML rendered by Jekyll, when it encounters a code block such as the above, looks like

<code class="language-mermaid">
# some mermaid code
</code>

Would it be possible for mermaid to replace such a code tag with a diagram?

tewarid on 21 Dec 2018

😄1

I posted a mermaid code here. I included some js to convert it but failed, the js was like the file

{% if page.mermaid == true %}
<!-- <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> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
    startOnLoad:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>
{% endif %}

PS: I have little knowledge or experience about javascript. The code was inspired by TexT jekyll theme. I tried to contact the author of TexT but he never replied...

yk-liu on 22 Dec 2018

I found the solution. Just put everything after <body>.

<!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>

it works great on my site. If anyone need the source code, you can see these two files. _include/mermaid.html and _layout/post.html

yk-liu on 22 Dec 2018

❤5 🎉5 👍3

Please update broken link.

That approach can be improved so that JS is injected only that page actually has Mermaid code in it.

The <code class="language-mermaid"> approach is preferred because it is compatible with Typora.