add mermaid to github pages

  • using cdn to load mermaid js, we need to load the write the initialisation script after the body section

    • else it won’t properly load

here’s the code

<!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;C
    </div>
</body>

<script>
    var config = {
        startOnLoad:true,
        theme: 'default',
        flowchart:{
                useMaxWidth:false,
                htmlLabels:true
            }
    };
    mermaid.initialize(config);
    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>

</html>

References

Metadata

  • topic:: 00 Coding00 Coding
    #MOC / for programming language, coding guide and libraries focusing on data analytics and html/css
  • updated:: 2022-08-12 Private or Broken Links
    The page you're looking for is either not available or private!
  • reviewed:: 2022-08-12 Private or Broken Links
    The page you're looking for is either not available or private!
  • #Reference