学步园

This is a tutorial for the online sequence diagram drawer: Simple Sequence .Sample Code is as below. Paste the code in the editor and the sequence diagram show:

Browsers supported:
  Safari, Firefox, Chrome, IE 8 or later.
What is it used for?

1. To show how the classes cooperate with each other;
2. To help clear your head with something visualized;

Example:
Let's say

// Client call methodA on A
A.methodA{
  // In the implementation of methodA, we call an internal methodA1
  methodA1();
  // Then we call methodB on B
  B.methodB(){
    // In the implementation of methodB, we call methodC on C
    C.methodC();
  }
}

The result sequence diagram is as:

How is it used?
Just input some pseudo code into the text-box, and nothing more. The simplest way is click the "Insert Sample Code" button and see what's happening.
The grammar:
I believe the grammar is very easy and clear for a programmer reading from the example. There is still some principle when I designed it.

1. 1. All messages must be originated from a pre-defined "CLIENT" entity. But there could be more than one root message invoked from CLIENT.
2. 2. Other messages are invoked inside a root message or its children messages (embedded in "{}" following the parent method).

Tips:

1. All script saved as you are typing. Fell free to close and reopen you browser at anytime.
2. If you want an Entity (e.g C) shown before others defined it on the top with :EntityName (e.g :C ).

Limitations:

1. Keyword new still to be supported, you may use EntityName.new now.
2. Loop/iteration/if-else still to be supported find a way for your representation.
3. It is designed to support IE 8 or later, but it doesn't work as well as safari/firefox or chrome.
4. No, you can't move the lines (that's a feature).