Show HN: Mermaid ASCII Diagrams
145 points
13 hours ago
| 13 comments
| mermaid-ascii.art
| HN
the_arun
27 minutes ago
[-]
I use this for generating AWS deployment diagrams, which is kinda similar - https://github.com/mingrammer/diagrams
reply
quuxplusone
10 hours ago
[-]
Some nits:

The "Example" buttons don't jump out at me; I found them but it took a while. Also consider labeling them with their point, e.g. "Example 3: Color"

If you change the input text to something well-formed, the graph seems to update immediately. But if you change it to something ill-formed, the graph doesn't update immediately — and then if you click "Generate" manually, it blanks the input box. Either this is a bug, or the "Generate" button doesn't do what I think it does (i.e. generate output). Again, adding a noun to the verb might help. Or just adding some usage information somewhere on the page.

For those like me who've never heard of "Mermaid," apparently it's like GraphViz's dot language but different. https://github.com/mermaid-js/mermaid I tried the flowchart example from Mermaid's own README, but it didn't come out right: looks like the shape characters [] and {} aren't handled.

reply
lordswork
5 hours ago
[-]
Counter-nit: I found the examples within a few seconds.
reply
brink
43 minutes ago
[-]
Counter-counter-nit: I did not.
reply
matt3210
6 hours ago
[-]
Same, I had no idea there were examples until I read this.
reply
AlexanderGrooff
10 hours ago
[-]
Thanks for the feedback! I agree that the web UI can be improved (quite) a bit, most of my efforts went into the actual generation of the diagrams. I'll have a look at prettifying it.
reply
virtualritz
7 hours ago
[-]
This obviously needs a direct pipe into Svgbob!

https://ivanceras.github.io/svgbob-editor/

reply
pkaye
1 hour ago
[-]
Needs to have a '+' and the elbows and T intersections.
reply
nunobrito
8 hours ago
[-]
Hey, where are the mermaids?!?

But now seriously.. the diagrams are working really well for simple examples, thank you so much for sharing this tool. I have bookmarked your page, my documentation is based on text files and often have to build these kind of diagrams too.

The example buttons took me a while to be found, but are good for syntax explanation. Thank you for making this available.

reply
AlexanderGrooff
7 hours ago
[-]
Thanks for the kind words!
reply
jonahx
8 hours ago
[-]
Nice work, I love ascii diagrams. Especially useful when you want a visual explanation that can be embedded directly in source code.

Small nit on layout: 90 degree joints should use "+" in the connecting lines, as they do in the boxes.

reply
girvo
1 hour ago
[-]
Hah we rely on Mermaid a _heap_ at work for building internal dependency graphs from `yarn info` JSON data and a super lazy depth-first graph haha. Super useful, nice to see another renderer!

ts-directed-graph outputs Mermaid :)

This tool seems way more useful for hand-made ones, definitely bookmarking

reply
danpalmer
40 minutes ago
[-]
Out of interest have you managed to get Mermaid graphs rendering outside of a browser?

I was trying to do this a while back so I could do server side rendering of graphs, but it seemed to depend strongly on the presence of a DOM. Couldn’t quite get it working with JS-DOM either.

reply
tiagoafpereira
4 hours ago
[-]
reply
zczc
4 hours ago
[-]
reply
abraxas
3 hours ago
[-]
In the age of AI someone automated Mentifex[1]!

[1] https://nothingisreal.com/mentifex_faq.html

reply
nlake906
6 hours ago
[-]
love it, will definitely be using it for sketching documentation in comments for SQL sprocs, etc.

One request: support for self-reference, i.e. "A --> A", "A --> A & B"

reply
AlexanderGrooff
6 hours ago
[-]
Thanks, that's a good suggestion. I'm also noticing that's not working as intended.
reply
AlexanderGrooff
4 hours ago
[-]
Fixed in 0.5.0. Give it a try!
reply
piedpiper99
9 hours ago
[-]
I supposed it's good for basic usage. I just tried a more complex graph and it didn't render well.
reply
ewalk153
10 hours ago
[-]
This would be great to build into project readme workflows.
reply
kitd
9 hours ago
[-]
You can already use Mermaid in GitHub markdown:

https://docs.github.com/en/get-started/writing-on-github/wor...

reply
mcraiha
8 hours ago
[-]
reply
dmonitor
8 hours ago
[-]
reply
edflsafoiewq
8 hours ago
[-]
I don't like that it renders controls on top of the diagram.
reply
octopusRex
10 hours ago
[-]
I'm disappointed. I was actually expecting lovely ascii art pictures of mermaids.
reply
derfnugget
8 hours ago
[-]
Same. This is more than a nit. It's pretty much a need.
reply
kleiba
8 hours ago
[-]
reply