I think this is a good change. While I would have preferred to see support for Graphviz over Mermaid, I understand Mermaid was probably chosen for the sake of easier integration. Either way, it will be nice to be able to embed diagrams rather than constantly re-generate and re-commit images to the repo.
Include diagrams in your Markdown files with Mermaid
51–60 of 272 posts
Re: Include diagrams in your Markdown files with Mermaid
#52I think so-called ASCII-art is more in the spirit of Markdown. The nice thing about the original Markdown (modulo bugs) is that things are written the way one would write plaintext documents which are supposed to be easily read in a text editor. So you don’t write bullet lists like this: - Bullet 1 - Bullet 2 - Bullet 3 And hope that some post-processing will add linebreaks for you. You write it like this: - Bullet 1…
Re: Include diagrams in your Markdown files with Mermaid
#53Mermaid is fantastic. Aside from mermaid, I've recently been introduced to nomnoml ( https://nomnoml.com/ ) and it is fantastic as well. My wish is for Mermaid and nomnoml to become universally supported among Markdown web renderers (I'm looking first and foremost at Github of course).
Thanks for the tip of nomnoml, didn't know about it.
Re: Include diagrams in your Markdown files with Mermaid
#54Thereby creating a hard dependency for your markdown files, obviating their portability.
There's no hard dependency at all. The markdown will parse just fine without mermaid.js, it basically just takes a code block and runs it through the mermaid.js code if it matches the language
Re: Include diagrams in your Markdown files with Mermaid
#55I would love to see it working in the Github Wiki too.
Re: Include diagrams in your Markdown files with Mermaid
#56Earlier quoted context omitted.
Markdown supports arbitrary HTML, you can do this: # Heading const foo = 1 + 1; window.alert(`1 + 1 = ${foo}`); Paragraphs of exposition. In practice most markdown renderers will strip HTML or at least script tags as it is obviously a cross site security risk to allow github.com to serve user uploaded scripts without sanitization.
I think you're caught up on exactly the opposite of the complaint here. People aren't requesting JS execution, they have the various "notebook" solutions for that. People are saying that triple backtick fenced code blocks are used to preserve whitespace and fixed width, usually with syntax highlighting as a bonus. That's the expected behavior. However with the described mermaid support, it's taking a fenced code bloc…
If you explicitly want source code rendering don't add the mermaid tag to the block. There could be an argument that now you don't get syntax highlighting, but remember syntax highlighting itself is not part of any markdown spec and it differs wildly between implementations--there is no common grammar or spec for it even.
In all cases these are still valid markdown files and will pass through markdown processing, rendering, etc. systems without breaking them.
Re: Include diagrams in your Markdown files with Mermaid
#57Huh, they must have taken the integration they've had for a couple years now on the Azure Devops wikis and shifted it over to the GitHub side.
Re: Include diagrams in your Markdown files with Mermaid
#58Don't.
It's a sea shanty of XSS vulns.
Re: Include diagrams in your Markdown files with Mermaid
#59I’m super excited for this! One thought though, on the syntax. Wouldn’t it be a bit odd if suddenly this line in a README.md: ```js const foo = 1 + 1 ``` Rendered as: `2` ? Isn’t that kind of what we’re doing here with the mermaid source tag? That tag is for showing source code, no? Feels like there should be another tag for rendering it.
Only the mermaid identifier is supported for triple backticks blocks, you can't put js and have it spit out script that executes in the browser.
Re: Include diagrams in your Markdown files with Mermaid
#60Protip to anyone using Mermaid.js Don't. It's a sea shanty of XSS vulns. https://snyk.io/vuln/npm%3Amermaid