dijexi.com

Image via Wikipedia

Drawing class diagrams is an essential step to generate a robust high quality software. You would probably know that it is not an easy job. But, now there is a great web application that allows you to create UML (Unified Modelling Language) diagrams without even drawing a single line!

The application is Yuml. It is a free web application that allows you to create Class diagrams or Use Case diagrams by typing your diagram in a shorthand code.  For example, just type [User]-(Logout) in the text box and click submit to generate the diagram.

If you need to edit the diagram, just change the text and your diagram will be re-drawn. You can save your diagram as a PNG or JPG image or download it as a PDF. You can also get a link to embed the image into your blog or wiki. 

Of course you have to always remember the notation for the shorthand, but it will be easier as you get used to use the tool.

The resulting diagram might seems to be plain, but don’t worry, you can also add colors to them. Just type, for example[Customer{bg:orange}] then the Customer box will be in orange. You can add sticky notes to your diagrams, and Yuml also provider a number of samples to outline different Yuml features and guidelines.

Yuml is free to use but universities and businesses can also buy a private license to install it on their computers.

Here is a simple example of the shorthand to generate a use case diagram:

[User]-(Login)
[User]-(Logout)
(Login)<(Reminder)
(Login)>(Captcha)

And here is the result diagram created online:

Here is an example to generate a class diagram:

[Customer]+1->*[Order]
[Order]++1-items >*[LineItem]
[Order]-0..1>[PaymentMethod]

And here is the result diagram created online:

Publish Online

You can paste the link created for the diagrams in a blog, wiki, issue tracker or forum, for example the image link below:

<img src="http://yuml.me/diagram/scruffy/class/[Customer]+1->*[Order], [Order]++1-items >*[LineItem], [Order]-0..1>[PaymentMethod]" />.

Share

To share in your emails or documents, simply drag the created diagram into your Google Mail or Outlook messages, or a Word, Excel, Pages or Powerpoint document.

Use Case Diagram Samples

Actor

<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]"/>

Actor and Use Case

<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]-(Login)"/>

Notes

<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]-(Login), [Customer]-(note: Cust can be registered or not{bg:beige})"/>

Many Use Cases

<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]-(Login), [Customer]-(Logout)"/>

Actor Inheritance

<img src="http://yuml.me/diagram/scruffy/usecase/[Cms Admin]^[User]"/>

Multiple Actors And Inheritance

<img src="http://yuml.me/diagram/scruffy/usecase/[Cms Admin]^[User], [Customer]^[User], [Agent]^[User]"/>

<<Extends>>

<img src="http://yuml.me/diagram/scruffy/usecase/(Login)<(Register), (Login)<(Request Password Reminder)"/>

<<Includes>>

<img src="http://yuml.me/diagram/scruffy/usecase/(Register)>(Confirm Registration)"/>

Meaty Example

<img src="http://yuml.me/diagram/scruffy/usecase/(note: figure 1.2{bg:beige}), [User]-(Login),[Site Maintainer]-(Add User),(Add User)<(Add Company),[Site Maintainer]-(Upload Docs),(Upload Docs)<(Manage Folders),[User]-(Upload Docs), [User]-(Full Text Search Docs), (Full Text Search Docs)>(Preview Doc),(Full Text Search Docs)>(Download Docs), [User]-(Browse Docs), (Browse Docs)>(Preview Doc), (Download Docs), [Site Maintainer]-(Post New Event To The Web Site), [User]-(View Events)"/>

Class Diagram Samples

Class

<img src="http://yuml.me/diagram/scruffy/class/[User]"/>

Simple Association

<img src="http://yuml.me/diagram/scruffy/class/[Customer]->[Billing Address]"/>

Cardinality

<img src="http://yuml.me/diagram/scruffy/class/[Customer]1-0..*[Address]"/>

Directional Association

<img src="http://yuml.me/diagram/scruffy/class/[Order]-billing >[Address], [Order]-shipping >[Address]"/>

Splash of Colour

<img src="http://yuml.me/diagram/scruffy/class/[Customer{bg:orange}]->[Order{bg:green}]"/>

Aggregation

<img src="http://yuml.me/diagram/scruffy/class/[Company]<>-1>[Location], [Location]+->[Point]"/>

Composition

<img src="http://yuml.me/diagram/scruffy/class/[Company]++-1>[Location]"/>

Notes

<img src="http://yuml.me/diagram/scruffy/class/[Customer]<>1->*[Order], [Customer]-[note: Aggregate Root{bg:cornsilk}]"/>

Inheritance

<img src="http://yuml.me/diagram/scruffy/class/[Wages]^-[Salaried], [Wages]^-[Contractor]"/>

Interface Inheritance

<img src="http://yuml.me/diagram/scruffy/class/[<<ITask>>]^-.-[NightlyBillingTask]"/>

Dependencies

<img src="http://yuml.me/diagram/scruffy/class/[HttpContext]uses -.->[Response]"/>

Interface

<img src="http://yuml.me/diagram/scruffy/class/[<<IDisposable>>;Session]"/>

Class with Details

<img src="http://yuml.me/diagram/scruffy/class/[User|+Forename+;Surname;+HashedPassword;-Salt|+Login();+Logout()]"/>

Something Meaty!

<img src="http://yuml.me/diagram/scruffy/class/[note: You can stick notes on diagrams too!{bg:cornsilk}],[Customer]<>1-orders 0..*>[Order], [Order]++*-*>[LineItem], [Order]-1>[DeliveryMethod], [Order]*-*>[Product], [Category]<->[Product], [DeliveryMethod]^[National], [DeliveryMethod]^[International]"/>

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and ServicesLigarwangi.com – Linux, E-book, Coffee, Gift, etc