ckwnc is a free tool for creating UML sequence diagrams

ckwnc is a free tool for creating UML sequence diagrams quickly and easily through an intuitive psuedo C-style language.

There are so many UML modelling tools available, but they are not necessarily that simple to use having generally been derived from generic drawing programs. Why do they allow the creation of invalid diagrams? And why are they not dead simple to use? After all, the sequence diagram is one of the most useful UML tools at a programmers disposal for diagramatically designing and documenting code.

The following is an example of how simple it is to create a ckwnc diagram.

  :actor
  data:DataClass

  data.get()
  data.set()
  {
    DB.setValue()
  }

Creating a Diagram

This section details how to create UML sequence diagrams with ckwnc. A knowledge of UML sequence diagrams is assumed.

Objects / Lifelines

There are 3 ways of defining objects/lifelines in a ckwnc diagram. You can declare an object with just a class ( :ClassName ) or with an instance name and a class ( instance_name:Classname ). The third way to create an object is just to use an undefined name in the code, doing so will create an object that has the class of the used name.

The instance name AND class name are searched to find a match for a call. To explain this consider the code "Class.get()" that is contained in the diagram below. An object with the instance name OR class name "Class" is searched for, as no object matching this is found a new object with class name "Class" is created.

  :actor
  data:DataClass

  data.get()
  DataClass.get()
  Class.get()

Synchronous Messages

Synchronous messages are the most common form of message in a sequence diagram. They can be created in ckwnc by using a dot ( '.' ), like calling a method on an object in a normal programming language. Optionally, a synchronous message can have messages that occur within the invocation by surrounding them with braces '{' and '}'. Again this is just like the body of a function in a normal programming language. The following example shows a message with and without subsequent messages.

  :actor
  data:DataClass

  data.get()
  data.set()
  {
    DB.setValue()
  }

Synchronous Messages to Self

Messages can be sent to the current object by not specifying a target. For example "get()" will send the message "get" to the current object.

  get()

Asynchronous Messages

Asynchronous messages can be defined just like synchronous messages except that the dot ( '.' ) is replaced with a greater than symbol ( '>' ). Optionally, an asynchronous message can have messages that occur within the invocation by surrounding them with braces '{' and '}'. Again this is just like the body of a function in a normal programming language. The following example shows an asynchrounous message with and without subsequent messages.

  :actor
  data:DataClass

  data>get()
  data>set()
  {
    DB.setValue()
  }

Note: at the moment it is not currently possible to send an asynchronous message to the current object.

Invalid Diagrams

While ckwnc attempts to layout asynchronous message the best that it can, sometimes it is possible to create diagrams that are not layed out well. This can occur when using asynchronous messages. The following example shows how this can occur. As two asynchronous messages are sent to Proxy their invocations are overlapped. When this is rendered it will be highlighted in red (just like in this example).

They way to deal with situations like this is to use the pause message described in the next section to space out the invocations.

  me:Actor
  :Proxy

  Proxy>create()
  {
    Client.do()
  }
  Proxy>ajax ()
  {
    me.callback()
  }

Pause

The special "pause" message can be used to space out diagrams. This can be useful if ckwnc is creating a diagram that is not nicely layed out.

  :actor
  data:DataClass

  data.get()
  data.get()
  pause()
  data.get()

Object Creation

The special "create" message can be used to perform object creation in a diagram. Note that only a synchronous "create" message will be recognised as an actual create event.

  :actor
  data_instance:DataClass

  data_instance.create()
  data_instance.get()

Object Destruction

The special "destroy" message can be used to perform object destruction in a diagram. Note that only a synchronous "destroy" message will be recognised as a destruction event.

  :actor
  data_instance:DataClass

  data_instance.get()
  data_instance.destroy()

A Note on Style

The formatting of the code examples on this page is the personal preference of the author. The code is parsed based on white space and the reserved tokens: ":", "{", "}", "(", ")", "." and ">". The only other constraint is that identifiers must be composed of letters, numbers and underscores, but cannot start with a number.

  me:__Class42
  you.test()

Is equivalent to the following:

  me :  __Class42  you   .   test     (    )

Saving a Diagram

Diagrams can be saved by clicking on the "save" button below the text input area. This will cause the "hash" of the page address to change to the id of the newly saved diagram, for example: "http://www.ckwnc.com/index.html#12345". Each time that you save a new diagram is created. You can bookmark any saved diagram and return to it at any time in the future.

As an Image

Diagrams can be saved as a PNG image by clicking the "save as image" button below the text input area. This will cause a PNG image to be generated and downloaded to your browser (probably in a new tab or window).

As a Link

When a diagram is saved the page address is updated with a new hash that identifies the diagram, for example: "http://www.ckwnc.com/index.html#12345". This URL can be used to link to your specific diagram at any time.

Embedding Diagrams

You can use the ckwnc javascript to embed sequence diagram in any page. If you do this please download the javascript rather than linking to it.

Using JQuery

To embed a ckwnc diagram in a webpage using jQuery perform the following actions:

1. Download the jQuery javascript from: http://docs.jquery.com/Downloading_jQuery#Current_Release
2. Download the ckwnc javascript from: http://www.ckwnc.com/ckwnc.js
3. Include both javascript files in your page:

     <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
     <script type="text/javascript" src="ckwnc.js"></script>
   
   

4. Embed the ckwnc code in your webpage:

     <pre id="ckwnc">
   
       me:__Class42
       you.test()
   
     </pre>
   

5. Generate the ckwnc canvas and add it to the page:

     <script>
       $("#ckwnc").replaceWith( $(ckwnc.generate( $("#ckwnc").text() ) ) );
     </script>
   

WordPress

A WordPress plugin is available at http://wordpress.org/extend/plugins/ckwnc/ for embedding ckwnc diagrams in WordPress blogs.

Google Gadget

You can use the google gadget ( available here ) to add sequence diagrams to iGoogle or any other container that supports gadgets. You can also embed google gadgets into any webpage. Unfortuantely google gadgets only support string user preferences so the diagram has to be compressed into a string (with no carriage returns) which makes this a little tricky for complex diagrams.

Other Methods

No other methods for embedding diagrams are supported at the moment. You can of course use what ever method that you like to add the canvas generated by ckwnc to a web page. If you come up with a new method please let us know.

References

Other UML Sequence Diagraming Tools

If for some reason ckwnc doesn't suit your needs (please let us know why!) the following list contains links to other tools that allow creation of UML sequence diagrams.

• http://www.websequencediagrams.com/
• http://www.umlgraph.org/
• http://sdedit.sourceforge.net/
• http://sourceforge.net/projects/textuml
• http://coloruml.com/
• http://cacoo.com/diagrams/
• http://www.lucidchart.com
• http://www.gliffy.com

UML Sequence Diagraming References

The following list provides links to UML sequence diagraming references that we've found useful.

• http://www.agilemodeling.com/artifacts/sequenceDiagram.htm
• http://www.ibm.com/developerworks/rational/library/3101.html
• http://www.holub.com/goodies/uml/index.html
• http://www.tracemodeler.com/articles/a_quick_introduction_to_uml_sequence_diagrams/
• http://www.visual-paradigm.com/VPGallery/diagrams/Sequence.html
• http://www.uml-diagrams.org/sequence-diagrams.html

Support and Feedback

About

ckwnc is a 100% free tool that can be used for any purpose. If you find it useful, please let us know.

Contact

Have a comment, issue or request? Please use the commenting system below, otherwise you can contact us via twitter or via email.

Comments

To raise issues encountered, feature requests or just to leave general comments please use the following disqus commenting system.