Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Ground Controller Lvl 1
Message 1 of 14

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/

13 Replies
Highlighted
Community Manager
Message 2 of 14

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

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!


Best,
AndreaG

Mark helpful posts with Accept as Solution to help other users locate important info. Don't forget to give Kudos for great content!

Highlighted
Copilot Lvl 2
Message 3 of 14

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

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

Highlighted
Ground Controller Lvl 1
Message 4 of 14

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

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

Highlighted
Ground Controller Lvl 1
Message 5 of 14

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

Hello,

 

Any update on Mermaid support?

 

Thank you

Highlighted
Ground Controller Lvl 1
Message 6 of 14

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

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

 

Highlighted
Copilot Lvl 2
Message 7 of 14

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

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.

Highlighted
Ground Controller Lvl 1
Message 8 of 14

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

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.

Highlighted
Ground Controller Lvl 1
Message 9 of 14

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

Pretty interested by this feature too.

Highlighted
Copilot Lvl 3
Message 10 of 14

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