Feature Request: Support Mermaid (markdown) graph diagrams in .md files

Mermaid is a very clever way to use Markdown syntax to create useful graph diagrams. 

Please add the feature to github markdown to support Mermaid. 

More info about Mermaid is available at the link below: 

https://mermaidjs.github.io/

There is also an interactive editor so you can see how cool it is. 

https://mermaidjs.github.io/mermaid-live-editor/

291 Likes

Hi @mmmurf,

Thanks for this feedback! We’re always working to improve GitHub, Mermaid looks like a very cool project thank you for sharing, I’ve logged your feature request in our internal feature request list.

Though I can’t guarantee anything or share a timeline for this, I can tell you that it’s been shared with the appropriate teams for consideration.

Please let me know if you have any other questions.

Cheers!

32 Likes

Hi @mmmurf, I’ve created a browser extension that provides Mermaid rendering in GitHub. It’s free and open source: https://github.com/BackMarket/github-mermaid-extension

27 Likes

@andreagriffiths11 What is the progress on this? We are waiting 4 years for this feature https://github.com/github/markup/issues/533

GitLab has this feature and many others. At this moment work efficiency is higher if using gitlab and seriously considering abandoning github.

25 Likes

The browser extension is cool. However, it’d be nice if GitHub supported something like this (Mermaid, PlantUML, something they come with on their own that accomplishes the same thing) because (1) we shouldn’t have to share private work with a third-party in order to achieve the desired end-result (2) if it were enabled in GitHub itself, we wouldn’t have to depend on folks having a plugin installed (3) it would likely also work as a way to embed into GitHub pages.

Having this feature in GitHub itself would be a game changer.

16 Likes

Assuming we will add diagrams just like in GitLab with

```mermaid
graph TD;
    A-->B;
```

All you gotta ask GitHub developers to do is to import Mermaid lib and add this code:

var config = {
    startOnLoad:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('pre[lang=mermaid] > code'));

I did this using Chrome, and works. Of course it has to be tested for other browsers.

Latest version of Mermaid can be found here:

https://cdnjs.com/libraries/mermaid

BTW I made a quite ugly solution in my repo, by adding this first line to the README.md file:

to load the diagrams, copy [this snippet](mermaid.txt?raw=true) and paste/run in your browser console

And then I create a file called mermaid.txt that basically contains the minified mermaid code, plus the JS snippet above.

13 Likes

Pretty interested by this feature too.

7 Likes

Looking for this as well - especially since implementation is pretty straightforward.

1 Like

Mermaid now support Class Diagram & State Diagram

https://mermaid-js.github.io/mermaid/#/classDiagram

https://mermaid-js.github.io/mermaid/#/stateDiagram

4 Likes

Also eagerly awaiting this feature. 

5 Likes

Plus one for mermaid and KaTeX

:mermaid:‍♀:mermaid:‍♀:mermaid:‍♀:mermaid:‍♀:mermaid:‍♀:mermaid:‍♀:mermaid:‍♀
ƛΦθƛΦθƛΦθƛΦθƛΦθ

1 Like

Hello,

Any update on Mermaid support?

Thank you

I wonder how many eons it will take for GitHub to implement this extremely useful feature, which is even very easy to implement, as the rendering can be done solely with JavaScript, no server side part being needed.

So far I only seen censorship as the https://github.com/github/markup/issues/533 was locked even without putting one last comment that would redirect visitors to this thread. Mainly the locking means “we got tired to get notified about others asking for it, redirect them to /dev/null (support)”.

7 Likes

FWIW while trying to find a way to add mermaid to github I found this pre-alpha project https://github.com/neenjaw/mermaid-markdown-test

1 Like

This would be great, I switched to gitlab because of this and the fact that gitlab has many more great features.

3 Likes

Thanks I just downloaded it

You are right. It’s not the same I guess, but I start somewhere.

You are right. It’s not the same I guess, but I have to start somewhere.

mermaid integration would be much apprecied.

Since I’m using github to share graph theory with my students, I have to use third parties and it’s annoying.

2 Likes

I just tried to use Mermaid.

Sadly still not supported on GitHub

@andreagriffiths11 wrote:

Hi @mmmurf,

 

Thanks for this feedback! We’re always working to improve GitHub, Mermaid looks like a very cool project thank you for sharing, I’ve logged your feature request in our internal feature request list.

 

Though I can’t guarantee anything or share a timeline for this, I can tell you that it’s been shared with the appropriate teams for consideration.

 

Please let me know if you have any other questions.

Cheers!

.