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

61–70 of 113 posts

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#61

Post by smusamashah »

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…

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.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#62

Post by smusamashah »

A list (that I occasionally update) of similar text-to-diagram tools that work from browser https://xosh.org/text-to-diagram/

I have noticed that some tools don't allow exporting diagrams anymore or have a watermark on them now. Need to add that info someday.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#63

Post by NeoTar »

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 system of micro services so well!

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#64

Post by quietbritishjim »

zelphirkalt wrote: post #54
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…

It does look nice, and covers most things, except for life lines. Is there a way to add life lines? And why do so many tools choose to ignore life lines and provide incomplete sequence diagrams? Perhaps it gets really complicated to express in such a simple way as the examples do?

It has those! They're under "Lifeline Activation and Destruction" on that page:

https://plantuml.com/sequence-diagram#5cc0040514e70f7b

You can even have two active on the same lane at the same time, as shown in the second example on that page.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#65

Post by agumonkey »

dpflan wrote: post #22
agumonkey wrote: post #19

i love mermaid but i find sequence diagrams too thin on information, a graph view always feels like the right amount of data

Please elaborate. The amount of information provided is up to the creator of the diagram...

a sequence is a projection of many interactions between modules, which can often be described fine on a 2d graph

i hope it makes a bit more sense

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#66

Post by tootie »

bnjms wrote: post #55
tootie wrote: post #47

Maybe I'm nuts because I've never found these useful. If you actually want to model a real-world scenario, you'll end with an arrow from every system to every other system to the point that it's meaningless as a visualization.

I think you’re nuts :) I find them super helpful for refreshing when I need to see the flow for protocol exchanges like SIP, FTP, TLS. I don’t know how else you would model that. Words don’t communicate deeply enough.

I'm thinking more about business processes rather than protocols. I don't think most project involve devising new protocols. If I want to diagram the steps involved in, say, onboarding and nurturing a user, then the flow will rapidly approach a cyclic, undirected graph.

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#67

Post by hbcondo714 »

I like Draw.io for UML but I recently found it easier to do a sequence diagram showing a Stripe integration with actors, activations and notes in a few lines of Mermaid markdown on a GitHub readme: https://github.com/hbcondo/revenut-web#-workflow

But that diagram just renders as code via GitHub Pages:

https://revenut.com

Re: The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS

#70

Post by lelandbatey »

atoav wrote: post #59
The_Colonel wrote: post #30

Earlier quoted context omitted.

I believe PlantUML was basically the inspiration for MermaidJS. A huge advantage of MermaidJS is that it can run in the browser, though.

And if you start a markdown codeblock like ```mermaid graph TD; A-->B ``` Many things that support markdown (e.g. github, gitlab, typora, ...) will render the resulting graph.

That features is also a feature Mermaid/Markdown renderers have borrowed from existing uses of PlantUML. You've been able to embed PlantUML in a Markdown block in Gitlab (and have it rendered inline as an image) since before MermaidJS ever existed. Github's embedded MermaidJS feature is years late.
Post reply on HN