Mermaid support

[davidolrik]

I would love to have support for Mermaid diagrams in markdown blocks, everywhere you have markdown support, but also when viewing a file with the .mermaid extension.

[tyson-benson]

There seems to be plenty of community interest for this request going back to 2015. Would love to see this taken up by the GitHub team as I want a better way to display, collaborate on and store diagrams in my repo. (This is not an answer, just voicing my support)

P.S. Someone has come up with a browser extension, but I'd really like to see first-class support added to github.

[davidstaheli]

Mermaid support is now on GitHub's near-term roadmap: github/roadmap#372

[jasonwilliams]

Hey @davidstaheli

its great to see Mermaid support in Github. Is there support for it to respect the color-scheme when switching to darkmode?
Its a bit jarring seeing a bright white graph when using Github's dark background.

I didn't want to raise it as i wasn't sure if it's already being looked into

[davidstaheli]

Hi, @jasonwilliams. Thanks for asking. I'm with you on how the bright white background can be jarring in darkmode. We should have support for darkmode when this releases soon. Some charts don't look great in darkmode. You'll still be able to override the background color in your Markdown. After the initial release, we plan to tweak the Mermaid theme that GitHub uses so that it more closely matches the GitHub UI. You too can modify that theme (if you wish) in Markdown. Thanks for bringing this up!

[numbsafari]

I'm currently in a design documentation writing phase. When this lands, it's gonna feel like Christmas.

We're all rooting for you!

[jasonwilliams]

Thanks for your reply @davidstaheli i will look forward to this change!

[davidstaheli]

Mermaid support was released today! 🎉

• Blog post: Include diagrams in your Markdown files with Mermaid

Possible improvements to it are already lining up, such as a better default theme and gist support. We'd love to hear any of your suggestions or feedback.

[bdubaut]

That's amazing 🎉 ! Adding github wiki support would be amazing, as this is usually where project documentation goes!

[astout]

Yes, the Wiki was the first place I tried to add it and was confused that it wasn't working. Please add mermaid support to the Wiki.

[dmarcoux]

I gave this a try and somehow it doesn't render correctly on Firefox 96.0.1. The text isn't rendered in boxes of a flow chart. On Chromium, it's just fine. Here's an example:

flowchart LR;
    NotificationComponent --> NotificationNotifiableLinkComponent;
    NotificationComponent --> NotificationMarkButtonComponent;
    NotificationComponent --> NotificationAvatarsComponent;
    NotificationComponent --> NotificationActionDescriptionComponent;
    NotificationComponent --> NotificationExcerptComponent;

Loading

[davidolrik]

Looks fine in Firefox 97.0 (9722.2.2) on macOS

[dmarcoux]

I think it has something to do with the iframe. On page load, the flow chart is missing text. When right-clicking on the flow chat, then This Frame and Reload Frame, it's displayed correctly.

[jrobbins-LiveData]

The Actors popup-menu feature of sequence diagrams does not work when displayed by GitHub. Here's a repo showing the issue: https://github.com/LiveData-Inc/mermaid-actor-menus-issue.

Here's another site displaying the same Mermaid markdown, working, with the expected behavior circled in red.

Since the svg has the <g class="actorPopupMenu" ... elements, I am assuming that the problem is tha the Mermaid diagram's JavaScript code is somehow not activated when loading in the iframe?

That said, the console in Chrome does display this:

mermaid-actor-menus-issue:1 Autofocus processing was blocked because a document already has a focused element.
mermaid.esm.min.mjs:2 Dashboard @ https://dashboard.contoso.com/alice
mermaid.esm.min.mjs:2 Wiki @ https://wiki.contoso.com/alice
mermaid.esm.min.mjs:2 Dashboard @ https://dashboard.contoso.com/john
mermaid.esm.min.mjs:2 Wiki @ https://wiki.contoso.com/john

suggesting that the Mermaid JavaScript code is running, but somehow its event listeners aren't getting wired up to the diagram?

[bskinn]

This is really a cool feature -- thank you for implementing!!!

As a further feature request on it -- it may be YAGNI, or wontfix for e.g. security reasons, but I could see myself wanting to use mermaid diagrams in issues and PRs. However, if I try to add a diagram, the Mermaid rendering breaks because the > character in the diagram arrows gets HTML-escaped when the content is parsed/stored:

Would be great if this were made to work!