Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

github.com

Post reply on HN
Print view View original

41–50 of 55 posts

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#41

Post by lobster_johnson »

I suspect this was posted because I linked it in a comment in a different thread yesterday [1].

Mermaid is a great tool, especially for flowcharts. But as with other tools like Graphviz, it can be hard/impossible to build a clean structural diagram, where you have nodes that contain or stack other nodes, with flows and relationships between them. Invariably, I find that tools like Mermaid break down once there's a lot of components, even when using boxes and so on to group things.

In particular, arrow routing is a weak point. Here [2] is an old diagram I once did in Mermaid. I was able to create two vertically-layered groups, but I was not able to prevent arrows from being messy. (There is, of course, one pair of arrows that need to cross in that diagram, but at least the software should be able to draw their intersection in a nicer way, e.g. by adding space around the arrow or have a little arch where one arrow jumps over the other.)

[1] https://news.ycombinator.com/item?id=13324796

[2] http://i.imgur.com/awunH4m.png

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#42

Post by ioloop »

lobster_johnson wrote: post #41

I suspect this was posted because I linked it in a comment in a different thread yesterday [1]. Mermaid is a great tool, especially for flowcharts. But as with other tools like Graphviz, it can be hard/impossible to build a clean structural diagram, where you have nodes that contain or stack other nodes, with flows and relationships between them. Invariably, I find that tools like Mermaid break down once there's a lo…

I feel ya. But remember your users probably don't care. You are trying to convey information, and your diagram does so effectively. Everything else is sugar. But if you are dissatisfied then you could also take a look at code2flow.com which is very quick and easy to use. I'd be quite curious if it solves your issue. I suspect it will.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#43

Post by jdoconnor »

crucialfelix wrote: post #36

There are a few atom plugins that support this. I'm using Markdown Preview Enhanced now: https://atom.io/packages/markdown-preview-enhanced with which you can embed mermaid sketches into normal markdown documents. This is perfect for most use cases where you want a simple diagram inside a text document. Also atom-mermaid: https://atom.io/packages/atom-mermaid which is for authoring mermaid documents.

I use mermaid and flowchart in github readmes using an extension for chrome. The basic idea is that the libraries are part of the extension, and the markdown calls out what kind of diagram it is.

chrome store: https://chrome.google.com/webstore/detail/chrome-diagrammer/...

https://github.com/jdoconnor/chrome-diagrammer

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#44

Post by lobster_johnson »

ioloop wrote: post #42
lobster_johnson wrote: post #41

I suspect this was posted because I linked it in a comment in a different thread yesterday [1]. Mermaid is a great tool, especially for flowcharts. But as with other tools like Graphviz, it can be hard/impossible to build a clean structural diagram, where you have nodes that contain or stack other nodes, with flows and relationships between them. Invariably, I find that tools like Mermaid break down once there's a lo…

I feel ya. But remember your users probably don't care. You are trying to convey information, and your diagram does so effectively. Everything else is sugar. But if you are dissatisfied then you could also take a look at code2flow.com which is very quick and easy to use. I'd be quite curious if it solves your issue. I suspect it will.

Eh, the point is avoid unnecessary work. If you have just one diagram, creating it by hand is not a problem. If you have 10 or 20, you want automation. Especially since you'll want to keep the diagram continually updated, maybe tweakable with different styles; editing all diagrams by hand every time for every colour change is arduous compared to just running a single command to re-render.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#45

Post by sverweij »

maffydub wrote: post #35

I was quite excited by this - I normally use mscgen ( http://www.mcternan.me.uk/mscgen/ ). Unfortunately, I can't find a way to break text strings onto multiple lines in ladder diagrams. Does anyone know how? One of the examples shows tags within a Note. The is stripped out and the text is wrapped onto multiple lines within the note box, but the wrapping is completely independent of the tags. ...and this doesn't work…

Use '\n' for line breaks, like so:

a => b [label="POST /echo\nHello, it's me"];

(You might like https://mscgen.js.org b.t.w.)

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#46

Post by rixed »

I miss pic so much. It is a macro processor for troff, that is not used so much any more and for good reasons. But pic was amazing, so simple and yet so powerful. Probably the ancestor of all including tikz.

Link: https://en.m.wikipedia.org/wiki/Pic_language

In which I just learnt that there exists a stand alone version that produces svg: https://ece.uwaterloo.ca/~aplevich/dpic/

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#47

Post by stuart78 »

yoz-y wrote: post #9
LaSombra wrote: post #6

This reminds me of PlantUML, http://plantuml.com/ .

Very much so, I have tried to paste in some more complex sequence diagrams I have written and they almost work. Except no aliases and no on the fly creation/destruction of participants. (or maybe the syntax is different) I would prefer if this actually followed the plantuml syntax exactly, that way one could ditch the official java application which is quite bad (and graphs are quite ugly)

Totally agree. Plant handles many complexities quite nicely, despite the poor tools available to render the visualization.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#49

Post by anthk »

rixed wrote: post #46

I miss pic so much. It is a macro processor for troff, that is not used so much any more and for good reasons. But pic was amazing, so simple and yet so powerful. Probably the ancestor of all including tikz. Link: https://en.m.wikipedia.org/wiki/Pic_language In which I just learnt that there exists a stand alone version that produces svg: https://ece.uwaterloo.ca/~aplevich/dpic/

Check groff/mandoc .

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#50

Post by Jugurtha »

rixed wrote: post #46

I miss pic so much. It is a macro processor for troff, that is not used so much any more and for good reasons. But pic was amazing, so simple and yet so powerful. Probably the ancestor of all including tikz. Link: https://en.m.wikipedia.org/wiki/Pic_language In which I just learnt that there exists a stand alone version that produces svg: https://ece.uwaterloo.ca/~aplevich/dpic/

I've only discovered pic when it got mentioned in a previous thread (there was a Show HN for something called Code2Flow if my memory serves me well). I first thought it was about the Intel 8259 (Programmable Interrupt Controller) or Microchip's uControllers.

As for tikz, I've used pgfplot and tickz + matlab2tikz[0] to produce TeX PDFs from MATLAB figures (it can only export figures as raster or MATLAB .fig, unusable elsewhere), and include those in a bigger PDF (given the number of figures, they had to be generated separately and then included because the memory usage was just too high).

It gives something like Fig1: https://www.dropbox.com/s/m9ah60u89jjpcx7/fighadjxusefulclea...

or Fig2: https://www.dropbox.com/s/2ilceiaqorpg3gt/fighadjxasymetric....

Fig1: Upper is a cleaned ECG signal. Middle is a Time-Frequency representation using an "Adaptive Optimal Kernel"[1]. Bottom is a Time-Frequency representation using Stockwell Transform. They look gorgeous embedded and you can zoom, contrary to MATLAB PNGs.

Fig2: baseline estimation using asymmetric least squares[2] (they used it to clean [spectro/chromato]graphy graphs and I tried it on ECG. It's really cool).

[0]: https://www.mathworks.com/matlabcentral/fileexchange/22022-m...

[1]: https://pdfs.semanticscholar.org/20c2/b82eef0809df80a402f125...

[2]: https://zanran_storage.s3.amazonaws.com/www.science.uva.nl/C...

Post reply on HN