#Drawing sequence diagram online code#
If you need help, please drop me a mail at eagle.xiao(at).Īll the pseudo code and generated diagram (in its HTML format and/or image format) are owned by the author of their corresponding source code (that is, their textual description in ZenUML language). It is super easy to integrate it to any web-based applications. Feedback and/or pull request are welcome. The source code for the website and Chrome Extension is also hosted on github ( site, extension ). They are easy to create with draw.io and its built-in UML shape library. It was first implemented with drawing diagrams on Canvas. Reading Time: 6 min State diagrams quickly show which states lead to each other, and what triggers a change of state.
![drawing sequence diagram online drawing sequence diagram online](https://i.pinimg.com/originals/7d/44/2f/7d442f7b94dae2d237d8e8dea97ededf.png)
The first version of this tool was created in 2010 as a work for the first HTML5/CSS/JS competition in ThoughtWorks China. VueJs implements a Virtual DOM, and it only updates what you have changed (participant names, messages, etc.). With Js-sequence-diagram, the whole diagram is re-rendered every time you type in a letter. Js-sequence-diagram is implemented in a similar way. This is because all the conversion happens in the browser, no back-end request at all. As you can see in the GIF, ZenUML provides instant feedback to the user’s input. Websequencediagrams does not have the button, but it does a best-effort work to show the latest diagram. This is because they need to send the code to the backend server and get the picture back from the server. You have to click that button to get the resulting diagram. PlantUML and most other tools have a ‘Submit’ (or ‘Refresh’) button. If you insert the diagram into another document, it is indexable. Participant names, messages are all text on the page. This is already supported in the Chrome Extension. You can apply any styles on it – different colors, borders, fonts and even handwritten styles.While PlantUML produces diagrams as pictures (png, svg) and some other tools generate ASCII or draw on Canvas, ZenUML takes a different approach. So I had to find a better way for presenting nesting logic: ‘ IMHO, it quickly gets unreadable when you start nesting logic as you can see in the above video. One thing I am not quite happy with PlantUML is its DSL. I like the idea of generating diagrams from text because I hate to constantly drag-and-drop and double-click to edit names etc.
![drawing sequence diagram online drawing sequence diagram online](http://1.bp.blogspot.com/_aeFU4cfm78k/SqP1ZEMLw1I/AAAAAAAAAFw/mU8stpHjE5w/w1200-h630-p-k-no-nu/UML+Sequence+Diagram.jpg)
Since then, I have tried quite a few tools, including PlantUML. I started using sequence diagrams heavily around 2006. The DSL to define sequence diagrams in ZenUML