Sequence Diagrams

Often it is helpful to visualize a solution before implementing it. Diagrams in general help simplify a complicated system to make it easier to understand at a high level. One specific way you might accomplish this is with a sequence diagram.

A sequence diagram shows how pieces of a system interact and in what order they do so. For more information on sequence diagrams take a look at the Wikipedia article on the subject. I’ve found that using tools like Visio are a bit complex and complicated to use. Then I discovered Web Sequence Diagrams.

Web Sequence Diagrams is a free, online tool that helps you create sequence diagrams. Unlike a lot of other tools, you don’t accomplish this by drawing boxes and connecting arrows. Instead, you write code with its domain specific language (DSL).

As you can see, the section on the left is my code which generates the content in the section on the right. The code is pretty straightforward and easy to learn. There is a help section you can read if you want to get fancy, but most things you can figure out yourself.

Why Use Web Sequence Diagrams?

One of the better features is actually how you learn the language. There is a menu on the far left with images of things you might want to do. You click the image that looks like what you want, and then it generates the code. Then you’re free to tweak the code so it renders the way you want.

Web Sequence Diagrams also comes with a large set of styles. Pick a style that mixes well with your other graphics, or just one that you think looks cool. 

Although this tool is free to use, there are some perks to paying for it. There are some cool perks like exporting to PDF or SVG and some additional language features. Additionally, you can create larger diagrams and collaborate with others. They also have a variety of payment options, such as monthly, yearly, or my favorite, a one-time 24-hour access. You can read about the features in more detail if you’re interested.

My only complaint is that there doesn’t seem to be a way to activate the first lane. Activating, in this context, is represented by a box which one might use to indicate active engagement by a subsystem. On that subject, there doesn’t seem to be a way to make a segment arbitrarily longer other than adding a note. On the other hand, this encourages you to document why you might expect something to take a long time.

Complaints aside, this is an awesome tool and one you should definitely check out next time you need to make a sequence diagram.