Request: mermaid rendering support within markdown

[themightychris]

Consider adding mermaid support within GH-rendered markdown as requested here: github/markup#533

It would ideally function just as this VS Code extension: https://github.com/mjbvz/vscode-markdown-mermaid

This would provide a maximally-githuby way to explain how systems and processes work. Currently this can only be done by running a local command to render a PNG inserted in the README after each change, which is very cumbersome, doesn't version well, and is a barrier to contributors

[kivikakk]

Per github/markup#533 (comment), the correct destination is the support team. Rendering the diagram doesn't take place in or relate to the Markdown to HTML transformation, which is what this library does.

[themightychris]

@kivikakk Gotcha, thanks, I did submit it there too, was hoping this might be an appropriate public place to track the request.

Is it accurate that this is where the rendering would be invoked from though and that a ruby toolchain would be ideal? Or is there a separate project somewhere for handling rendering code blocks based on indicated language?

[kivikakk]

@themightychris excellent to hear!

Rendering would not be invoked from here, no; the code block here would be transformed into <pre lang="…">…</pre>, where it's then transformed by code internal to GitHub's user content stack. Among other reasons, it's done this way so our code block transformation (i.e. syntax highlighting currently) is consistent no matter what the source language, as more than just Markdown is supported by this stack. (e.g. you might have a README.pod or a wiki page in Asciidoc.)

[themightychris]

@kivikakk ah that makes sense, thanks so much for the additional detail!

[piranna]

Is the code block transformation hosted somewhere, or is it an internal pipeline not published in the open? This way we could do a pull-request to add support for that...

[kivikakk]

It's part of GitHub.com's internal code, so it's not published.

[piranna]

Oh, what a shame... :-( What about allowing to set an url as the code block language? This way the code block could do a POST request to that url with the content of the code block, and return an html snippet to be replaced in place of the code block, allowing third party code block processors like this one...

[gjtorikian]

FWIW you could also use https://github.com/jch/html-pipeline, whose MarkdownFilter uses Commonmarker as well, as an open-source alternate rendering pipeline.

We will likely never allow POSTing to third party websites.

[piranna]

Seems only alternative will be to upload the rendered diagrams as images... :-/

[gjtorikian]

Well, you could create a GitHub App to do that replacement for you: https://github.com/marketplace

Have the App listen to comments, and it edit any comment with a code block matching whatever you're looking to replace.

[themightychris]

@gjtorikian a POST to a third party website was only brought up as a potential workaround AFAIK. The mermaid renderer is an MIT nodejs app and could be run anywhere: https://github.com/mermaidjs/mermaid.cli

[piranna]

@gjtorikian a POST to a third party website was only brought up as a potential workaround AFAIK

Yes, I suggested it as a workaround, that could be used not only for this but also for other code blocks replacements.

[rKinson]

FWIW while trying to find a solution I stumbled across this pre-alpha project https://github.com/neenjaw/mermaid-markdown-test

[rxaviers]