6 ms·
Draw UML Sequence Diagrams with new Javascript library
- jeremiep 14y agoI saw something similar using AngularJS and D3 not too long ago: http://sullerandras.github.com/SVG-Sequence-Diagram http://sullerandras.github.com/SVG-Sequence-Diagram
- rektide 14y agoWould 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/ http://www.willthompson.co.uk/bustle/ AngularJS tooling ask: https://plus.google.com/113218107235105855584/posts/YwKKVXAM6en https://plus.google.com/113218107235105855584/posts/YwKKVXAM... Great project thebramp. :)
- emacsen 14y agoI've needed something like this for years. This is awesome!
- arethuza 14y agoSequence 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.
- justanotheratom 14y agoI 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.
- klon 14y agoI'd really like to be able to save the rendered svg as a file.
- thebramp 14y agoThat's the next feature I plan to add
- Edmond 14y agonice:)
- dreur 14y agolo-dash compatible? First time I hear about lo-dash. Anyone know of it and why it maters?
- impostervt 14y agoLo-dash is like underscore, but faster.
- thebramp 14y agoand 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/2677cdf6eaceee1e540fd3bcdcab495f9d3afa48 https://github.com/bramp/js-sequence-diagrams/commit/2677cdf...
- jrajav 14y agoI submitted an issue to lodash, feel free to add to it: https://github.com/bestiejs/lodash/issues/215 https://github.com/bestiejs/lodash/issues/215
- dreur 14y agoThanks, searched a bit more and found some more info on SO by the author of Lo-dash: http://stackoverflow.com/questions/13789618/differences-between-lodash-and-underscore http://stackoverflow.com/questions/13789618/differences-betw... Saw and updated some benchmarks, quite impressive: http://jsperf.com/lodash-underscore/6 http://jsperf.com/lodash-underscore/6 Edit: added some benchmark
- dreur 14y agoAny 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 14y agoAsync is supported today by using ->>, to have a open arrow head. I plan to add multiple other diagramming elements.
- joeconway 14y agoI'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.
- xavi 14y agoOnly for sequence diagrams, but you may like http://www.websequencediagrams.com http://www.websequencediagrams.com
- enoren 14y agohttp://www.plantuml.com/plantuml/ 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.
- VeryVito 14y agoThis is fantastic. Now we just need a way to get this into Markdown, and I could write all my docs in edlin.
- radicalbyte 14y agoAwesome 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 14y agoIs 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 14y agoHeatlamp (jmolly.com/heatlamp) generates sequence diagrams from running Java/JVM code.
- derleth 14y agoIt would be great if you could expand this to ER or EER diagrams.
- softmodeling 14y agoVery 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 http://modeling-languages.com/uml-tools/#textual
- mkdir 14y agoThis 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+ http://www.youtube.com/user/Udacity/videos?query=CS262+ [1]: http://zaach.github.com/jison/ http://zaach.github.com/jison/
- thebramp 14y agoI 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.
- account_taken 14y agoIn 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 14y agoI'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.
- ysangkok 14y agoWas this inspired by http://www.websequencediagrams.com/ http://www.websequencediagrams.com/ by any chance?
- thebramp 14y agoYup! and suitable attribution is given.
- crookedchimney 14y agosweet library!
- deleted 14y ago[deleted]
- felipesabino 14y agoAwesome 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/ http://felipesabino.github.com/js-sequence-diagrams/ Hope it is useful for more people too ;)
- felipesabino 14y agoEDIT: merged already