ckwnc is a free tool for creating UML sequence diagrams

翻译 2012年03月28日 08:45:25

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.



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.



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.



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.


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.



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.


  Proxy>ajax ()


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.



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.



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.



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.


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: "". 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: "". 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:
  2. Download the ckwnc javascript from:
  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">
  5. Generate the ckwnc canvas and add it to the page:
        $("#ckwnc").replaceWith( $(ckwnc.generate( $("#ckwnc").text() ) ) );


A WordPress plugin is available at 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.

Add to iGoogle

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.


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.

UML Sequence Diagraming References

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

Support and Feedback


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.


UML---sequence Diagrams

时序图(sequence diagrams)描述了对象之间传递消息的时间顺序,它用来表示用例中的行为顺序,是强调消息时间顺序的交互图。时序图描述类系统中类和类之间的交互,它将这些交互建模成消息交换。也...

UML实战之Sequence Diagrams和Collaboration Diagrams


Ubuntu16.04下Torch安装&程序运行笔记(Is object localization for free?)

安装指示如上。之前出现的错误一直是显示: module “cunxn” not found1、在第一步表示为安装torch7 cmake .. -DCMAKE_INSTALL_PREFIX=$PW...

在线画时序图的工具:Web Sequence Diagrams ,支持实时生成预览图

转载至: 因为工作需要,这两天在尝试着给手里壹些模块画时序图(Sequence Diagrams),...

UML---Component diagrams

构件图(Component diagrams)是面向对象系统的物理方面建模时使用的两种图之一,另一种是配置图。构件图描述了软件组件以及组件之间的关系,组件本身是代码的物理模块,构件图显示了代码的结构。...

UML实战之Use Case Diagrams

在实战之前我们先得搞清楚一个很重要的问题:何谓用例图?它有何用?        首先我们来解决什么是用例图的问题,所谓用例图是用来描述用户的需求,从用户的角度描述系统的功能,并指出功能的执行者,强调...

UML实战之Statechart Diagrams

同样,状态图也是行为图中的一种,它是用来描述一个特定对象的所有可能状态以及由于各种事件的发生而引起的状态之间的转移。          相对于活动图来讲,状态图的图符就少了一些,主要有:状态、转移、...

UML实战之Activity Diagrams

何谓活动图?活动图是行为图中的一种,而行为图是用来描述系统的动态模型和对象之间的交互关系,包括:状态图、活动图以及上次介绍的交互图,这一次就带大家一起了解一下行为图中的活动图。          首...
您举报文章:ckwnc is a free tool for creating UML sequence diagrams