Live data from Hacker News

Include diagrams in your Markdown files with Mermaid

github.blog

71–80 of 272 posts

Re: Include diagrams in your Markdown files with Mermaid

#71
post #40

Mermaid looks similar to PlantUML. Anyone that gave used both and can compare?

PlantUML offered more decade ago. Marmaid is a toy compared to it.

However, since its so powerful, its hard to write. Actually, any given diagram is not that hard, but to keep all those syntax rules in head is IMO almost impossible.

Re: Include diagrams in your Markdown files with Mermaid

#72

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…

http://casual-effects.com/markdeep/ has had ASCII-art-as-vector-image features for quite some time now. It's in need of a good editor, though.

Re: Include diagrams in your Markdown files with Mermaid

#73

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

Behaves like it's Chrome only? Gonna have to pass on that one.

Or maybe MacOS only? I dunno. Definitely doesn't feel snappy and certain things just don't work.

Re: Include diagrams in your Markdown files with Mermaid

#75

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…

While I agree, formatting languages like Mermaid or PlantUML are human readable enough to grasp them and their meaning from reading the textual form.

And, as others below point out, editability is another great treat of Markdown. ASCII charts are very hard to format; you'll really need tools or editor plugins for that.

So I think that Mermaid (and PlantUML) strike a very pragmatic and human-friendly balance. Which, IMO is the actual spirit of Markdown.

Re: Include diagrams in your Markdown files with Mermaid

#76
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'm using mermaid to render this route map for interactive fiction: https://fiction.live/tsukihime/Satsuki-Yumizuka-Route/4B9obc... How does nomnoml compare? The results are with mermaid are not ideal for me. Edit: That one above is actually relatively decent. The results with mermaid can get a lot worse, actually to the point of uselessness. Terrible examples below https://fiction.live/stories/The-Hypno-Games/eSSzPJ…

I don’t know about nomnoml but dot/graphviz works very well for this type of chart. Definitely another idea to try out.

PS: thanks for investing so much work into Tsukihime!

Re: Include diagrams in your Markdown files with Mermaid

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

I'm not talking about a dependency for the file to be readable. I'm talking about a dependency for the diagram to be useful. I'm not opposed to extending markdown, but most functionality like this seems to involve bolting on external dependencies to take advantage of it.

Re: Include diagrams in your Markdown files with Mermaid

#79

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…

Shameless plug. I wrote a math authoring tool Mathup[1] with that purpose in mind. That you could author math really easily which would also be easy to read in plaintext. You could write things like 1+2 / 3+4 which you would be rendered as you would expect, or you could write your matrices like A = [a, b; c, d].

My main reason for writing it was for inclusion in markdown documents.

https://runarberg.github.io/mathup/

Re: Include diagrams in your Markdown files with Mermaid

#80
post #62
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.

Agreed; this is an annoying inconsistency. If you want to embed and render a non-Markdown file in Markdown, there's already another, far better syntax for that which is more in-line with the spirit of Markdown's "just text" philosophy: ![Chart](./charts/chart-file.mermaid)

It's nice to have the diagram source in the same file that uses it, instead of a separate file that needs to be kept in sync.
Post reply on HN