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()
}
This section details how to create UML sequence diagrams with ckwnc. A knowledge of UML sequence diagrams is assumed.
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 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()
}
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 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.
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()
}
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()
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()
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()
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 ( )
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.
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).
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.
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.
To embed a ckwnc diagram in a webpage using jQuery perform the following actions:
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="ckwnc.js"></script>
<pre id="ckwnc">
me:__Class42
you.test()
</pre>
<script>
$("#ckwnc").replaceWith( $(ckwnc.render( $("#ckwnc").text() ) ) );
</script>
A WordPress plugin is available at http://wordpress.org/extend/plugins/ckwnc/ for embedding ckwnc diagrams in WordPress blogs.
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.
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.
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.
The following list provides links to UML sequence diagraming references that we've found useful.
ckwnc is a 100% free tool that can be used for any purpose. If you find it useful, please let us know.
Have a comment, issue or request? Please use the commenting system below, otherwise you can contact us via twitter or via email.
To raise issues encountered, feature requests or just to leave general comments please use the following disqus commenting system.
blog comments powered by Disqus