Live data from Hacker News

The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

jessems.com

101–110 of 113 posts

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#102

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…

PlantUML also has a nice library for C4 model diagrams available [0], which I've found very useful.

[0] https://github.com/plantuml-stdlib/C4-PlantUML

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#103
post #63

A previous company I worked at had a way to translate logs into sequence diagrams - specifically in this case SIP message flow. by searching for an ID you could see all of the services which interacted with the message flow, and by clicking on the arrow a full version of the message which was sent. It was amazingly useful for diagnosing problems. I wish more logging systems were able to visualise flows through a syst…

For microservice tracing, you might want to look at Zipkin [0], or OpenTelemetry [1]

[0] https://zipkin.io/ [1] https://opentelemetry.io/docs/

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#104
mermaid is mostly client side rendered in JS, so it's surprising it doesn't have a very well fleshed out API to handle interactivity. Also it's a pain to render to PNGs, you need a full headless browser/puppeteer to run mermaid-cli.

adding links + tooltips: https://jsfiddle.net/s37cjoau/3/

I did an eval of some other options for more dynamic apps including react-flow, cytoscapeJS etc. https://github.com/dcsan/autoapps/issues/1

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#105
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.

Have you seen xstate's visualizer? https://xstate.js.org/viz/

Thanks for sharing! There's an updated viz at https://stately.ai/viz but that will soon be fully part of the studio at https://state.new (which can export to Mermaid now and PlantUML soon!)

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#106
Alright I guess I’ll start learning Mermaid diagrams. I’ve loved the run that Heptone’s Monodraw had for my README diagrams, but, as a team, it requires too much: - in order to edit/create effectively you have to purchase a license - you have to own a Mac to edit/create effectively

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#107
My own quick and easy Mermaid diagramming page I knocked up a few years ago and stuck on Netlify, and which I (and a few others) use very frequently:

https://sequence-diagrams.netlify.app

Note the credit on that page to bramp.github.io who did the hard work with the JS library it uses. And when you find UI issues remember it was a quick tool knocked up years ago and forgive me.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#108
post #68

Swimlanes is a simple implementation of the same concept. https://swimlanes.io/

Yes, this is what I use and I can't recommend it highly enough. I'll try mermaid but I think swimlanes.io is going to win for most use cases. Here's why: (1) you just open the web app and start typing and you have the beginnings of your diagram within 30 seconds literally. (2) The web app is elegantly and thoughtfully designed, the diagrams are beautiful, export functionality is there.

For your point (1) I can offer you https://sequence-diagrams.netlify.app which is my years-old quick diagramming tool for Mermaid and works similarly.

For your point (2) I offer the same alternative, but with the caveat that of the 3 criteria of elegant/thoughtful design, beautiful diagrams, and export functionality, it meets only the last 2 (and I claim little personal credit in any case).

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#109

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…

https://sequencediagram.org/ is the best sequence diagram tool like that. It does diagram-to-text to if you draw a line etc with mouse. Can right click and have context options too.

That looks nice but it's a shame that it uses its own proprietary language (not PlatUML or MermaidJS) and the code isn't even available. So if you use it then you have to cross your fingers that the website continues to be available otherwise your diagrams will suddenly become unmaintainable.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#110

Earlier quoted context omitted.

Yes, this is what I use and I can't recommend it highly enough. I'll try mermaid but I think swimlanes.io is going to win for most use cases. Here's why: (1) you just open the web app and start typing and you have the beginnings of your diagram within 30 seconds literally. (2) The web app is elegantly and thoughtfully designed, the diagrams are beautiful, export functionality is there.

For your point (1) I can offer you https://sequence-diagrams.netlify.app which is my years-old quick diagramming tool for Mermaid and works similarly. For your point (2) I offer the same alternative, but with the caveat that of the 3 criteria of elegant/thoughtful design, beautiful diagrams, and export functionality, it meets only the last 2 (and I claim little personal credit in any case).

That looks like a fun project! But I'm not aware of a reason why anyone wouldn't want to use swimlanes.io.
Post reply on HN