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

The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

jessems.com

Post reply on HN
Print view View original

31–40 of 113 posts

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#31

Post by hoosieree »

rcarmo wrote: post #3

I really, _really_ wish I could generate SVGs of these without JavaScript and a headless browser.

Currently I generate graph diagrams for papers and blog articles in emacs with graphviz, I wonder how mermaid.js compares in that workflow.

The default styles in mermaid look a little nicer than graphviz, which might be enough to motivate me to try it out. When/if I do, I'll probably try with this emacs package: https://github.com/abrochard/mermaid-mode.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#32

Post by rcarmo »

jessems wrote: post #20
rcarmo wrote: post #3

I really, _really_ wish I could generate SVGs of these without JavaScript and a headless browser.

As another commenter mentions, the mmdc tool takes care of this. I should have mentioned that in the blog post.

Does it do it without needing to have npm and puppeteer installed at all?

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#33

Post by The_Colonel »

ttfkam wrote: post #15

The article claims that sequence charts are the only useful thing in UML. What about: Entity diagrams, especially for database ERD Timing diagrams (think: Gantt) Interaction/flow diagrams Use case diagrams

Yes, there are many useful diagrams in UML, but a lot of them (e.g. entity diagrams) don't map well to text based formats such as MermaidJS, because the positioning is quite important and MermaidJS often won't guess correctly.

Meanwhile, sequence diagrams map very well from the text description.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#34

Post by rcarmo »

pbnjay wrote: post #5
rcarmo wrote: post #3

I really, _really_ wish I could generate SVGs of these without JavaScript and a headless browser.

The mmdc tool does this!

I'm looking at its GitHub repo and it lists puppeteer as a dependency. There's even a puppeteer-config.json in there, so I assume it still requires having Node and running a headless browser in the background.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#35

Post by jaktet »

client4 wrote: post #14

I really enjoy MermaidJS. I've been trying to shoehorn representing vlan flows over switches recently and haven't been very successful. My basic goal is to show [p1]switch1[p2] [p9]switch3[p12] in a graphical manner (and more intermediate switches). MermaidJS kind of works. I'm tempted to use something like Visio or Google Drawings but they take too much manual work.

Have you tried draw.io?

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#36

Post by Vgoose »

quietbritishjim wrote: post #8

I can highly recommend PlantUML as a simple language for creating sequence diagrams. It also supports other UML diagram types, which, despite what the article says, are also useful sometimes (so long as you don't worry about every last silly detail that's specified in the standard). @startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice…

This is my go to diagramming tool. It takes a lot of little tricks to get things to turn out exactly how you want, but they're not required. It communicates information just fine. The tricks are only required if you care about aesthetics.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#38

Post by nequo »

hoosieree wrote: post #31
rcarmo wrote: post #3

I really, _really_ wish I could generate SVGs of these without JavaScript and a headless browser.

Currently I generate graph diagrams for papers and blog articles in emacs with graphviz, I wonder how mermaid.js compares in that workflow. The default styles in mermaid look a little nicer than graphviz, which might be enough to motivate me to try it out. When/if I do, I'll probably try with this emacs package: https://github.com/abrochard/mermaid-mode .

Have you tried converting the dot file to svg and manipulating the svg file in the build process to improve its appearance? I'm not sure if it's worth the effort but perhaps it's a viable alternative.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#39

Post by giraffe_lady »

mrWiz wrote: post #18

I really like using Mermaid to create state diagrams. I'd been looking for a tool like it for quite some time, and I think it slipped under my radar because it's more focused on sequence / flow diagrams and doesn't hype its state diagram capabilities as much. Using a text-based tool for this is so much better than my previous workflow of Visio or Powerpoint.

Last time I tried this it unnecessarily crossed a lot of the arrows between states. Turned a diagram of a moderately complex real world SM into an incomprehensible tangle even to developers familiar with the actual implementation. Does it still do that?

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#40

Post by jph »

quietbritishjim wrote: post #8

I can highly recommend PlantUML as a simple language for creating sequence diagrams. It also supports other UML diagram types, which, despite what the article says, are also useful sometimes (so long as you don't worry about every last silly detail that's specified in the standard). @startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice…

More examples of sequence diagrams with PlantUML, with renderings of dividers, actors, databases, etc.:

https://github.com/joelparkerhenderson/plantuml-examples

Post reply on HN