Live data from Hacker News

Include diagrams in your Markdown files with Mermaid

github.blog

31–40 of 272 posts

Re: Include diagrams in your Markdown files with Mermaid

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

Re: Include diagrams in your Markdown files with Mermaid

#32
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

- Bullet 2

- Bullet 3

Similarily there have been many tools that let you add so-called ASCII-art diagrams to Markdown documents.

The spirit behind the kind of thing in the OP, on the other hand, is that one should get nicely formatted HTML from Markdown for the purpose of online consumption. Which is a very different goal.

So if I were to judge the syntax itself (since that is what matters most to the original spirit of Markdown.pl) I would say that it seems pretty decent. Not as “declarative” (!) as ASCII-art, but most probably much easier to edit.

Re: Include diagrams in your Markdown files with Mermaid

#34
This is interesting, but I personally really like that markdown is almost as legible as plain text as when rendered, which things like this sort of break.

So I think I'd prefer ASCII art diagrams for this sort of thing. (In fact there was recently an ASCII diagram drawing tool on the HN front page, https://asciiflow.com/ )

Re: Include diagrams in your Markdown files with Mermaid

#35

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…

> Similarily there have been many tools that let you add so-called ASCII-art diagrams to Markdown documents.

here-in is the nub. these are self contained(/embeddable?) editors of what is essentially non-textual content. there's a concealed inner data-model which is rendered/transpiled into text.

i far far far far prefer a text mark up, which is easy to directly edit, which is fairly readable on it's own (imo mermaid reads very nicely). maaking the inner data model both explicit directly workable like this is ascendant beyond compare.

mermaid also has predictable rendering rules, where-as there's much more author's opinion/whim about crafting ascii-diagrams, which are open ended. this makes it more predictable as a reader, with diagrams following common layout & flow patterns that one can come to expect.

the other boom to mermaid is it's not that hard to parse. i have investigated how available the mermaid team makes the parser but having a relatively-simple well-specified machine readable format opens so so many doors.

absolutely the right choice using human editable text markup inside human editable markdown.

Re: Include diagrams in your Markdown files with Mermaid

#36

Gitlab supports mermaid too. It's always nice when there's feature parity between the two, as it makes it easier to jump between them.

Azure Devops wikis have excellent (although not full support) for mermaid diagrams. One power user feature I like is the ability to add a hyperlink to graph nodes like so:

click NodeName “URL”

Re: Include diagrams in your Markdown files with Mermaid

#38

I want a lucidchart or drawio style support for mermaid. There's plugins to let them render mermaid.md files but I haven't seen anything which just lets me draw arrows between shapes and label things. Someone please make this happen, I will be forever grateful.

Like pikchr.org? I love it. Now I have to see if I can get pikchr support added to Mermaid, and we'll be off to the races!
Post reply on HN