Add rendering of Mermaid diagrams

[piranna]

Mermaid allow the rendering of diagrams from markdown-like text snippets. Code-highlighting could be reused to render them when setting mermaid as the languaje. This is related to #334

[gjtorikian]

I wonder if this is something @github/render would be interested in picking up? The project does look interesting.

@piranna Can you give us a sense of how this is currently used across GitHub? Is there an extension for the file format, for example?

[piranna]

@piranna Can you give us a sense of how this is currently used across GitHub? Is there an extension for the file format, for example?

I've not seen anybody using it on GitHub, maybe because it's not an available functionality, nor know of any browser extensión.

On the other hand, I've seen a webservice that generate PNG images from Mermaid snippets that can be inserted on Markdown files (sorry, I can't find the link now) and a quick search has shown me other use cases, like a plugin for gitbook, a plugin for LightTable and a plugin for Jekyll (maybe you would be more interested in that last one).

[ghost]

+1

[ghost]

fyi, Google has implemented SVG for Gantt Charts in the Google Charts API ...

• https://developers.google.com/chart/interactive/docs/gallery/ganttchart

[alanjames1987]

+1

[trusch]

+1

[kivikakk]

This isn't quite a markup-related issue so I'm closing the issue, but we're definitely still thinking about things like this. If you have other feature requests, please reach out to the support team.

[wmertens]

Note, in v1.15 of VSCode they enabled extensions for the markdown previewer, and there is https://github.com/mjbvz/vscode-markdown-mermaid which renders the images inline.

[wmertens]

@kivikakk So the request here was to add support for Mermaid, which would be two-fold:

• Support rendering .mermaid files
• Support rendering ```mermaid code blocks as Mermaid. I am not sure if this is possible? Are code blocks always passed to linguist?

It seems to me that this is indeed related to markup?

[kivikakk]

It seems to me that this is indeed related to markup?

This repo is for things relating specifically to the github-markup gem; if an issue cannot be resolved by some change to code in this repo, then it doesn't belong here (and instead belongs with the support team). I hope that helps clarify!

[themightychris]

Did an issue over get created in the appropriate place for this? It would be an amazing addition to github

[wmertens]

@themightychris I think the appropriate repo is https://github.com/gjtorikian/commonmarker, not sure, no issue created yet.

[kivikakk]

The correct destination is the support team! They handle feature requests for github.com.

[marcussacana]

any news?

[themightychris]

Nope, oddly enough GitHub has no path for feature requests that includes feedback or tracking, just a black hole form :-(

[dderiso]

It's not as cool as mermaid, but here's a hack that let's you embed charts using the old (depreciated) google image api and the dot markup language

https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

generates

One idea is to make a server that generates images from mermaid markup that's passed into a URL-based API. If anyone wants to make this, I will buy you beer.

Even better, if were made like JS-fiddle, where the url syntax is something like

https://mermaid-fiddle.com/<username>/<fiddle-id>/embed/<image:svg,png,jpg>

and removing the /embed/... will open the interactive editor, I'll buy you a keg!

[localredhead]

This is not a solution, but for what it is worth I noticed this live editor recently https://mermaidjs.github.io/mermaid-live-editor/

It has a "view" option. Using the /view endpoint and passing the base64 encoded mermaidjs will yield an image.

var b64 = "graph TD\nA[Issue] -->|triage| B(investigate)\nB --> C{Let me think}\nC -->|A| D[severity 1]\nC -->|B| E[severity 2]\nC -->|C| F[severity 3]"

> console.log(b64)
graph TD
A[Issue] -->|triage| B(investigate)
B --> C{Let me think}
C -->|A| D[severity 1]
C -->|B| E[severity 2]
C -->|C| F[severity 3]

console.log(Buffer.from(b64).toString('base64'));
Z3JhcGggVEQKQVtJc3N1ZV0gLS0+fHRyaWFnZXwgQihpbnZlc3RpZ2F0ZSkKQiAtLT4gQ3tMZXQgbWUgdGhpbmt9CkMgLS0+fEF8IERbc2V2ZXJpdHkgMV0KQyAtLT58QnwgRVtzZXZlcml0eSAyXQpDIC0tPnxDfCBGW3NldmVyaXR5IDNd

Append the base64 string to the url: https://mermaidjs.github.io/mermaid-live-editor/#/view/Z3JhcGggVEQKQVtJc3N1ZV0gLS0+fHRyaWFnZXwgQihpbnZlc3RpZ2F0ZSkKQiAtLT4gQ3tMZXQgbWUgdGhpbmt9CkMgLS0+fEF8IERbc2V2ZXJpdHkgMV0KQyAtLT58QnwgRVtzZXZlcml0eSAyXQpDIC0tPnxDfCBGW3NldmVyaXR5IDNd

Unfortunately it doesn't work for markdown images.... but the link yields the graph we want.
maybe this is useful

At the end of the day I don't want to rely on a hack. I would much prefer if Github code blocks understood and rendered mermaidjs.

[luisfarzati]

Now that MS owns GitHub, and they have been doing great things for developer happiness, maybe we have a chance to finally see this feature live.

[kib]

I would really like to see this revisited as it would help documenting the flow of scripts, code and small designs into GitHub.

Other notable sites supporting mermaid within markdown are:

• GitLab, which supports mermaid within markdown since december 2017.
• StackEdit, which supports mermaid within markdown since version v5
  • StackEdit is hosted on github by the way...

[plutotree]

I hope GitHub will support mermaid recently.

[SeaDude]

Lets go Microsoft! Community win right here. Rendering of simple process diagrams in our repos!

[bijanvakili]

+1

I really could use this on github (especially the ```mermaid codeblocks) !

[trusch]

Bijan Vakili <notifications@github.com> schrieb am Fr., 4. Jan. 2019, 00:10:

…

+1 I really could use this on github (especially the ```mermaid codeblocks) ! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#533 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AC3LqbtBpiCSsl9tEXrFJ7BYjreK4z7kks5u_o3cgaJpZM4Fnf-j> .

[trusch]

Tino Rusch <tino.rusch@gmail.com> schrieb am Fr., 4. Jan. 2019, 05:52:

…

Bijan Vakili ***@***.***> schrieb am Fr., 4. Jan. 2019, 00:10: > +1 > > I really could use this on github (especially the ```mermaid codeblocks) > ! > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#533 (comment)>, or mute > the thread > <https://github.com/notifications/unsubscribe-auth/AC3LqbtBpiCSsl9tEXrFJ7BYjreK4z7kks5u_o3cgaJpZM4Fnf-j> > . >

[cristianvasquez]

+1

[dderiso]

@localredhead That's certainly close. All one needs to do is integrate an SVG to PNG converter that can produce a url with the png encoded in base64. This seems relevant.

[tom-sherman]

Would love for this to be revisited, especially since GitLab directly supports mermaid in markdown.

[rkclark]

+1

[shashank-sharma]

This feature can greatly increase the quality of documentation we have in GitHub ... Waiting!

[matthew-cochran]

+1

[John-Youngblood]

+1

[rferro]

+1

[dderiso]

@kivikakk Can you please re-open this? It seems to be a markup related question.

[kivikakk]

The correct destination is the support team! They handle feature requests for github.com.

This is still the case! github-markup does not handle rendering; it only chooses a markup library for use. If you want support for Mermaid diagrams, the correct destination is the support team. Thanks.

[Yamilquery]

That's it! I already contact them to ask for this awesome feature. We hope to have support with a mermaid in GitHub. In our case is a waste of time to have to transform all our mermaid diagrams to png images and upload. It's very complicated for us.

[DrCapa]

+1

[kivikakk]

Thanks for submitting this correctly! I'll lock this thread now as +1s will only get seen by me, the markup gem maintainer, and not by the people who are responsible for feature requests. :)