Draw UML Sequence Diagrams with new Javascript library | Hacker News Reader

Draw UML Sequence Diagrams with new Javascript library

bramp.github.com

120 pointsthebramp33 comments

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.

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.

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.

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.

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

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/

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.

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

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

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.

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

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

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

Great project thebramp. :)

I've needed something like this for years. This is awesome!

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.

I love the interactive nature. There was a Sequence Diagram I wanted to draw but too lazy to draw it. As I stumbled on this page, I just drew a complex Sequence Diagram in minutes. And it was fun!

Feature request: State Machine diagrams.

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.

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.

Only for sequence diagrams, but you may like http://www.websequencediagrams.com

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 ;)

EDIT: merged already

Was this inspired by http://www.websequencediagrams.com/ by any chance?

Yup! and suitable attribution is given.

lo-dash compatible?

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

Lo-dash is like underscore, but faster.

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

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

Thanks, searched a bit more and found some more info on SO by the author of Lo-dash: http://stackoverflow.com/questions/13789618/differences-betw...

Saw and updated some benchmarks, quite impressive: http://jsperf.com/lodash-underscore/6

Edit: added some benchmark

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

That's the next feature I plan to add

sweet library!

nice:)

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

Reply on news.ycombinator.com