title: How to make GitHub Pages Markdown support mermaid diagram?
body: <p>I am hoping to use mermaid in GitHub-pages, with simple commit and push. </p>
  
  <p>In other words, I am hoping to wirte in my markdown file like this</p>
  
  <pre><code>```mermaid
  graph LR
     A --&gt; B
     A --&gt;C
     C --&gt;D
  ``` 
  </code></pre>
  
  <p>and add some js on my _layouts/post.html to somehow transform this to a mermaid graph.</p>
  
  <p>I have found this <a href="https://github.com/kitian616/jekyll-TeXt-theme" rel="noreferrer">theme</a> 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 <a href="https://github.com/kitian616/jekyll-TeXt-theme/blob/master/_includes/markdown-enhancements/mermaid.html" rel="noreferrer">file</a>, which is simply</p>
  
  <pre><code>&lt;script&gt;
   window.Lazyload.js('{{ _sources.mermaid }}', function() {
     mermaid.initialize({
       startOnLoad: true
     });
     mermaid.init(undefined, '.language-mermaid');
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>In my _include/mermaid.html, I replaced <code>{{ _sources.mermaid }}</code> to the mermaid cdn</p>
  
  <pre><code>&lt;script&gt;
   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');
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>it still won't work. In my post, it was shown as regular code blocks, not a mermaid diagram.</p>
  
  <p>Edit: In chrome developer's view, I don't see any connections made to the link <code>https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js</code>.</p>
  
  <p>And I tried this code, a connection to mermaid wes made in <code>network</code> tag in developer view, but the mermaid diagram still doesn't work</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var config = {
      startOnReady:true,
      theme: 'forest',
      flowchart:{
              useMaxWidth:false,
              htmlLabels:true
          }
  };
  mermaid.initialize(config);
  mermaid.init(undefined, '.language-mermaid');
  &lt;/script&gt;
  </code></pre>