Live data from Hacker News

Include diagrams in your Markdown files with Mermaid

github.blog

51–60 of 272 posts

Re: Include diagrams in your Markdown files with Mermaid

#51

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.

I believe Mermaid supports a wider range of diagram types than Graphviz. Graphviz doesn't support sequence diagrams, for instance, unless I'm missing something.

Re: Include diagrams in your Markdown files with Mermaid

#52

I 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…

To that point, ASCIIFlow is an amazing tool which I use constantly when working on markdown files https://asciiflow.com/#/

Re: Include diagrams in your Markdown files with Mermaid

#53
post #31

Mermaid 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).

I love mermaid, but I'm also very annoyed by the variety of how its implemented in different markdown editors. One thing that I find quite annoying is the lack of fontawesome support - afaik only the live mermaid editor and hack.md supports it out of the box. Other editors require a lot of .conf file editing.

Thanks for the tip of nomnoml, didn't know about it.

Re: Include diagrams in your Markdown files with Mermaid

#54
post #7

Thereby 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

There's also been other Markdown renderers that support this exact syntax for Mermaid blocks for ages. I have a site that's generated using mkdocs that uses Mermaid diagrams, and I was able to open up one of the files from that site in Github and view the diagrams.

Re: Include diagrams in your Markdown files with Mermaid

#56

Earlier 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…

You're pushing a rock up hill--many markdown renderers natively support mermaid, plantUML, etc. using fenced code blocks.

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

#57

Huh, 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.

I hope they support the full suite of mermaid diagrams, not just a small subset like they do in Azure DevOps. Which is quite frustrating. My team has to take pngs and keep the source code at the bottom of wiki pages.

Re: Include diagrams in your Markdown files with Mermaid

#59
post #9

I’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.

It's rendering style, not execution.
Post reply on HN