

Draw UML Sequence Diagrams with new Javascript library - thebramp
http://bramp.github.com/js-sequence-diagrams/

======
account_taken
In case anyone is looking for a more complete solution, search PlantUML. It
supports almost all UML diagrams. I use sequence, class and activity diagrams.

PlantUML uses Java. Theming support in PlantUML is horribad.

~~~
codemac
I've pushed hard for people to use PlantUML where I work, and some awesome
people got it plugged into our mediawiki instance. It's been great for complex
functional/design specifications. When someone adds a comment saying "you
forgot about case X", you can just press edit, and update your diagram.

It's wonderful and I really do recommend people try it out.

------
radicalbyte
Awesome project :)

Have you looked at Graphviz? It's an opensource project that generates
diagrams from graphs, it's used for example in doxygen to generate class
diagrams. Good for inspiration.

~~~
anankee
Is there anything like graphviz, which can give you a nice programatic
interface to create UML/BPMN graphs? Graphviz output is rough, you'd figure
that in 2013 we'd have a bit better looking graphs.

~~~
wellpast
Heatlamp (jmolly.com/heatlamp) generates sequence diagrams from running
Java/JVM code.

------
mkdir
This is incredibly well done! I happen to love lightweight markup languages
like this, so the fact that you're using one makes it irresistible.

To the authors: you said you used Jison[^1] to parse the text. Did you use any
external resources to familiarize yourself with its syntax?

EDIT: It looks like Udacity has a series of videos that touch on it:
<http://www.youtube.com/user/Udacity/videos?query=CS262+>

[1]: <http://zaach.github.com/jison/>

~~~
thebramp
I just spent a lot of time looking at the various examples on
zaach.github.com. I actually started to write a blog article on it but never
finished. Maybe I'll finish it.

------
VeryVito
This is fantastic. Now we just need a way to get this into Markdown, and I
could write all my docs in edlin.

------
softmodeling
Very interesting. I keep a complete list of "textual UML" tools aimed at
rendering different kinds of UML diagrams from a textual notation. Take a
look: <http://modeling-languages.com/uml-tools/#textual>

------
dreur
Any plan on supporting async arrows and activation boxes?

I see myself using sequence diagram when dealing with a really complex process
that normally almost always include threading and/or message passing.

~~~
thebramp
Async is supported today by using ->>, to have a open arrow head. I plan to
add multiple other diagramming elements.

------
jeremiep
I saw something similar using AngularJS and D3 not too long ago:
<http://sullerandras.github.com/SVG-Sequence-Diagram>

~~~
rektide
Would that AngularJS be able to produce a sequence diagram of it's data-
bindings in action!

I wrote a little bit about how the RGB AngularJS fiddle is near enough to a
complete tool to introduce a newbie to web development, aside from the fact
that you cannot see what AngularJS is doing in action. My ask was for a tool
like Bustle for DBus, which generates sequence diagrams, showing what
happened. AngularJS & other data-bound systems ought also have this output!

Bustle: <http://www.willthompson.co.uk/bustle/>

AngularJS tooling ask:
[https://plus.google.com/113218107235105855584/posts/YwKKVXAM...](https://plus.google.com/113218107235105855584/posts/YwKKVXAM6en)

Great project thebramp. :)

------
emacsen
I've needed something like this for _years_. This is awesome!

~~~
arethuza
Sequence diagrams are about the only UML diagram I feel guilty about not
drawing - I know they can be useful in some circumstances but generally
drawing them with most tools I've used is about as pleasant as root canal
treatment.

However, this looks nice and simple (editing text!) and I particularly like
the hand-drawn style output.

------
joeconway
I'd really love a web service where I can do this for various kinds of UML.
All desktop apps I've used for this are just awful.

~~~
enoren
<http://www.plantuml.com/plantuml/>

Although I find that the server will start to choke on medium to large sized
diagrams, but if you are just using it to generate the image manually it works
well. I currently am pointing a media wiki plugin at this server and 2 out of
10 times the server will choke on a diagram and just by retrying the request
it will work.

------
felipesabino
Awesome project! Will save me a lot of time, but for that I needed a way to
download the SVG content from the page as a .SVG file, so I added it to my
fork.

<http://felipesabino.github.com/js-sequence-diagrams/>

Hope it is useful for more people too ;)

~~~
felipesabino
EDIT: merged already

------
ysangkok
Was this inspired by <http://www.websequencediagrams.com/> by any chance?

~~~
thebramp
Yup! and suitable attribution is given.

------
dreur
lo-dash compatible?

First time I hear about lo-dash. Anyone know of it and why it maters?

~~~
impostervt
Lo-dash is like underscore, but faster.

~~~
thebramp
and from my understanding it was meant to be a drop in replacement for
underscore.js, but I had to change at least one thing to make it work.
[https://github.com/bramp/js-sequence-
diagrams/commit/2677cdf...](https://github.com/bramp/js-sequence-
diagrams/commit/2677cdf6eaceee1e540fd3bcdcab495f9d3afa48)

~~~
jrajav
I submitted an issue to lodash, feel free to add to it:
<https://github.com/bestiejs/lodash/issues/215>

------
klon
I'd really like to be able to save the rendered svg as a file.

~~~
thebramp
That's the next feature I plan to add

------
crookedchimney
sweet library!

------
Edmond
nice:)

------
derleth
It would be great if you could expand this to ER or EER diagrams.

