Show HN: Mermaid ASCII Diagrams • Hacker News Board

Re: Show HN: Mermaid ASCII Diagrams

#31

Post by brink » Tue, Oct 15, 2024, 11:48 PM UTC

lordswork wrote: post #24

quuxplusone wrote: post #3

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…

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

Counter-counter-nit: I did not.

Re: Show HN: Mermaid ASCII Diagrams

#32

Post by danpalmer » Tue, Oct 15, 2024, 11:51 PM UTC

girvo wrote: post #30

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

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.

Re: Show HN: Mermaid ASCII Diagrams

#33

Post by the_arun » Wed, Oct 16, 2024, 12:04 AM UTC

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

Re: Show HN: Mermaid ASCII Diagrams

#34

Post by flykespice » Wed, Oct 16, 2024, 2:14 AM UTC

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

Re: Show HN: Mermaid ASCII Diagrams

#35

Post by PhilipRoman » Wed, Oct 16, 2024, 5:43 AM UTC

tiagoafpereira wrote: post #27

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

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)

Re: Show HN: Mermaid ASCII Diagrams

#36

Post by AlexanderGrooff » Wed, Oct 16, 2024, 7:42 AM UTC

jonahx wrote: post #15

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.

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

Re: Show HN: Mermaid ASCII Diagrams

#37

Post by pjungwir » Wed, Oct 16, 2024, 7:52 AM UTC

danpalmer wrote: post #32

girvo wrote: post #30

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

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.

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.

Re: Show HN: Mermaid ASCII Diagrams

#38

Post by smusamashah » Wed, Oct 16, 2024, 9:29 AM UTC

virtualritz wrote: post #20

This obviously needs a direct pipe into Svgbob! https://ivanceras.github.io/svgbob-editor/

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/

Re: Show HN: Mermaid ASCII Diagrams

#39

Post by prmoustache » Wed, Oct 16, 2024, 9:32 AM UTC

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

Re: Show HN: Mermaid ASCII Diagrams

#40

Post by AlexanderGrooff » Wed, Oct 16, 2024, 9:43 AM UTC

prmoustache wrote: post #39

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

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.