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:
Much clearer, isn’t it?