JS Sequence Diagrams – UML Sequence Diagram in SVG from Text | Hacker News Reader

JS Sequence Diagrams – UML Sequence Diagram in SVG from Text

bramp.github.io

208 pointsmathiasrw17 comments

When I was at Disney back in 2011, we used this daily for a year: https://www.websequencediagrams.com/

If you have a good tech architect running a meeting this tool is great to create sequence flows on the fly. It's also got great builtin features like exporting and an API for integration.

Last but not least, it has the Rational Rose theme @haddr mentioned but my personal favorite is boring ol' Blue Modern

Is this the same syntax that PlantUML uses? http://plantuml.com/sequence.html

That looks much more complete. The syntax is given on the GitHub page but really only covers a very very small subset of UML sequence diagrams.

+1 for plant uml, also for that rose color scheme (for those who rememeber Rational Rose)

It seems similar to http://www.websequencediagrams.com, which plantuml was modelled after.

And that has a million integrations available, including a pretty good emacs-module[1] ;)

[1] https://github.com/josteink/wsd-mode

I am a big big fan of http://www.gravizo.com/ as well. It's amazing.

This lib isn't new. Glad to see it here on HN. I remember building a simple editor for it on jsbin a few years ago:

http://output.jsbin.com/ebahuh

This reminds me a lot of https://github.com/tpatel/OpenSequenceDiagrams.js, which was designed to be collaborative (eg, https://thefiletree.com/demo/diagram.sequence).

It seems way more streamlined, produces more beautiful results, and probably could be made collaborative as well.

Edit: I made a realtime collaborative plug, here is an example: https://thefiletree.com/espadrine/sequence.sequence

However, the syntax is not as extended, it seems.

Neat.

Threw together a usermacro for Atlassian Confluence that uses this as a quick and dirty proof of concept: https://gist.github.com/gregmac/fa89a3d86dcb1a008153

This look similar to mermaid diagrams, but mermaid seems more complete

Hey these are great. Anyone know of one that will produce a playable animation through the sequence?

I prefer fast & simple SVG over "hand-drawn-generated" SVG. Does your generation support this? I noticed a lot of DOM junk in the current generated graphs.

This is really cool and looks fun. Ive been trying to find something like in the past. Ive been using software to do uml and it just wasnt fun.

Very cool. Would love to see this for class diagrams.

Impressive! Any reason you chose Raphael over D3?

State diagram will be useful.

Reply on news.ycombinator.com