JS Sequence Diagrams – UML Sequence Diagram in SVG from Text (bramp.github.io)

208 points by mathiasrw 10y ago ↗ HN

17 comments

[ 3.2 ms ] story [ 49.2 ms ] thread

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.

haddr 10y ago ↗

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

josteink 10y ago ↗

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

mahmoudimus 10y ago ↗

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

DanielBMarkham 10y ago ↗

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

fsiefken 10y ago ↗

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

gohrt 10y ago ↗

octygen 10y ago ↗

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

baconner 10y ago ↗

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

livoras 10y ago ↗

State diagram will be useful.

rmanalan 10y ago ↗

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

gregmac 10y ago ↗

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

kevindeasis 10y ago ↗

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.

sharpercoder 10y ago ↗

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.

jamies888888 10y ago ↗

Impressive! Any reason you chose Raphael over D3?

espadrine 10y ago ↗

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.