Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Render mermaid on github pages with simple code

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:9
Comments:6

Top GitHub Comments

14reactions

yk-liucommented, Dec 22, 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

3reactions

fulldecentcommented, Jul 22, 2020

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.

Top Results From Across the Web

How to make GitHub Pages Markdown support mermaid ...

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in ...

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

Mermaid Diagrams on GitHub ep 240 - YouTube

Mermaid allows for simple diagrams in Markdown and now it is supported on GitHub !

GitHub Diagrams with Mermaid | Blog

To get started using Mermaid all you need to do is create a code-fenced area using triple-backtick syntax and specify that your language...

Mermaid | Diagramming and charting tool

Create diagrams and visualizations using text and code. ... JavaScript based diagramming and charting tool that renders ... View on GitHub. Mermaid ......