Show HN: Mermaid ASCII Diagrams

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.

AlexanderGrooff7• 2 years 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.

matt3210• 2 years ago

Same, I had no idea there were examples until I read this.

lordswork• 2 years ago

Counter-nit: I found the examples within a few seconds.

brink• 2 years ago

Counter-counter-nit: I did not.

octopusRex• 2 years ago

I'm disappointed. I was actually expecting lovely ascii art pictures of mermaids.

derfnugget• 2 years ago

Same. This is more than a nit. It's pretty much a need.

kleiba• 2 years ago

Here you go: https://www.asciiart.eu/mythology/mermaids

piedpiper99• 2 years ago

I supposed it's good for basic usage. I just tried a more complex graph and it didn't render well.

nunobrito• 2 years 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.

AlexanderGrooff7• 2 years ago

Thanks for the kind words!

jonahx• 2 years 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.

AlexanderGrooff7• 2 years ago

Thanks for the recommendation. I've added the "+" corners in v0.5.1.

airstrike• 2 years ago

[flagged]

virtualritz• 2 years ago

This obviously needs a direct pipe into Svgbob!

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

pkaye• 2 years ago

Needs to have a '+' and the elbows and T intersections.

smusamashah• 2 years ago

There are not many other ascii diagramming tools

(ascii to diagram)

Typogram https://code.sgo.to/typograms/#installation

Markdeep https://casual-effects.com/markdeep/

svg bob editors https://ivanceras.github.io/bob-editor/ https://mbarkhau.github.io/asciigrid/

Ditaa https://ditaa.sourceforge.net/

Goat https://github.com/blampe/goat

Protocol https://www.luismg.com/protocol/

(dsl to ascii)

https://diagon.arthursonzogni.com/#Sequence

https://textart.io/sequence

https://weidagang.github.io/text-diagram/

https://diagwiz.io/playground/

Myrmornis• 2 years ago

https://d2lang.com/ is really nice.

Also I used to use https://swimlanes.io/ before d2.

everybodyknows2• 2 years ago

Also,

https://pikchr.org/

everybodyknows2• 2 years ago

There is another, related class of tools, and that is graphical editors of the Unicode box-drawing characters:

https://github.com/lewish/asciiflow

https://github.com/tbanel/uniline/

Or, less ergonomically, the general rectangle-editing commands built into more powerful code editors e.g. Emacs.

With these, simple but fairly pretty box+line+text diagrams can be inlined with your source code comments. This unification may help in the perennial struggle to keep software architecture and source code reality in sync.

nlake906• 2 years 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"

AlexanderGrooff7• 2 years ago

Thanks, that's a good suggestion. I'm also noticing that's not working as intended.

AlexanderGrooff7• 2 years ago

Fixed in 0.5.0. Give it a try!

zczc• 2 years ago

In the same vein: https://plantuml.com/ascii-art

tiagoafpereira• 2 years ago

Also: https://dot-to-ascii.ggerganov.com/

PhilipRoman• 2 years ago

I use https://metacpan.org/dist/Graph-Easy/view/bin/graph-easy There is a package perl-graph-easy for it in AUR (it's a command line frontend for the perl library)

abraxas• 2 years ago

In the age of AI someone automated Mentifex[1]!

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

girvo• 2 years 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

danpalmer2• 2 years 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.

pjungwir• 2 years ago

I've used [mmdc](https://github.com/mermaid-js/mermaid-cli) to generate mermaid images from a Makefile. It looks like it is implemented with puppeteer, so perhaps it doesn't quite fit your request. But if you just want something you can use at the cli, it is great.

the_arun• 2 years ago

I use this for generating AWS deployment diagrams, which is kinda similar - https://github.com/mingrammer/diagrams

flykespice• 2 years ago

Wow! this will come pretty in hand when building plaintext documentation using diagrams.

prmoustache2• 2 years ago

graph TD

project is called Mermaid ASCII -->|expectation| It supports mermaidjs syntax

It supports mermaidjs syntax -->|I tried| It doesn't

It doesn't -->|conclusion| I am a bit bummed

https://mermaid.js.org/syntax/examples.html

AlexanderGrooff7• 2 years ago

The example you post works just fine ;)

On a serious note, yes not all syntax noted in the Mermaid docs work yet. I'm planning on adding more coverage of the Mermaid syntax over time. For now the basics work and (hopefully) shows its potential.

prmoustache2• 2 years ago

Yeah, first try I copy pasted the pie charts example wondering how it would render in ascii and was noooo

Lorak_• 2 years ago

Are you planning to support more of mermaids features? I tried one example where this could be useful to me - Mermaids gitGraph - and it looks like it's not supported.

AlexanderGrooff7• 2 years ago

Yes, over the course of time I want to increase the coverage of the Mermaid syntax.

PS: it's open source so feel free to help out ;) https://github.com/AlexanderGrooff/mermaid-ascii

ithkuil2• 2 years ago

Is there something that can turn those ascii diagrams back into mermaid sources?

I tried the first example with gpt-o1 and the result wasn't bad:

    graph LR
    A --> B --> D
    A --> C
    B --> C
    D --> C

would a smaller model but fine tuned on many syntetic renderings do a better job?

jcgrillo• 2 years ago

It would be pretty cool to be able to draw a flowchart or graph on a tablet and have it automatically turned into mermaid source. That's exceptional compression.

ithkuil2• 2 years ago

For me it's more about the ability of modifying the diagram in a predictable way

comebhack• 2 years ago

I have been using Monodraw for a long time: https://monodraw.helftone.com/

It's a macOS app and I've found it great. However if given an ASCII diagram, you cannot edit it with the same ease as creating a new one (e.g. reflowing text or resizing boxes).

I really like the idea of having the mermaid source and the ASCII diagram together, so you could use the source to change the diagram if needed. But I feel that would feel cluttered to have both in a plain text file or comment, where ASCII diagrams shine.

Show HN: Mermaid ASCII Diagrams

Related Stories