javascriptjekyllgithub-pagesmermaid

How to make GitHub Pages Markdown support mermaid diagram?


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>

Solution

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