Generating sequence diagrams from console logs

Often we need to debug a code which involves some interacting program entities. Imagine a state machine which, depending on certain conditions goes into different states and the order of transitions between states is important.

One obvious solution is to output debug messages to the console which usually goes along with some tedious analysis and often drawing diagrams on a paper. Thus making a clear picture of what’s happening is quite difficult especially if the code being analyzed is constantly changing during development.

It would be convenient if such diagrams can be created automatically, without the need in interpretation of numerous debug messages. You can find a handful of tools capable to convert a sequence described as a plain text into a lovely sequence diagram. Normally in order to get a full-blown UML sequence diagram you will need to use a fairly complex syntax. But for the purposes of understanding and debugging your code in most cases you will need to follow only a few simple rules.

I like the syntax that is used on the siteĀ http://bramp.github.io/js-sequence-diagrams. Here is an example taken from its home page:

Title: Here is a title

A-> B: Normal line

B -> C: Dashed line

C->> D: Open arrow

D – >> A: Dashed open arrow

Copy and paste the text above into the form on the web site and you’ll get a nicely looking sequence diagram:

sequence_diagram

Much clearer, isn’t it?

Share on FacebookShare on LinkedInShare on Google+Tweet about this on TwitterPin on PinterestShare on RedditDigg this

Vitaly Tsaplin

Hey, I am Vitaly and this is my blog. I live in Basel and work at Adobe.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

Leave a Comment

Time limit is exhausted. Please reload CAPTCHA.