How to create workflow diagrams with yUML

How to create workflow diagrams with yUML

Working with yUML Diagrams


  1. yUML Styles
  2. Class Diagrams
  3. Activity Diagrams
  4. Usecase Diagrams

bitkcor gives you several ways to visually represent workflows. yUML is one of those ways. To begin a yUML diagram using the default “scruffy” style, enter the following in the composer window.


yUML Styles

yUML Diagrams come in three different styles; plain, boring, and scruffy. The default scruffy style looks like handwriting. We have often find it is difficult to read and encourage you to use the plain or boring styles. To invoke a different style, simple add “style=” before your first closed bracket.

[yuml style=plain][User][/yuml]

[yuml style=boring][User][/yuml]

yUML Colors

To add color to your diagram, invoke the color argument by adding {bg:colorname} after the word in the part of the diagram you would like to color. For example, here is the code to produce a plain red diagram block.

[yuml style=plain][red{bg:red}][/yuml]

Here is a selection of colors you can use in yUML Diagrams.

Click here for a complete list of available colors.

Class Diagrams

In this case, “class” means this and that.

Single Class

[yuml style=plain][User][/yuml]

Simple Association

[yuml style=plain][Customer]<->[Billing Address][/yuml]


[yuml style=plain] [Customer]1-0..*[Address] [/yuml]

Directional Association

[yuml style=plain][Order]-billing ->[Address], [Order]-shipping->[Address][/yuml]

Splash of Colour And UTF-8

[yuml style=plain][❝Customer❞{bg:orange}]❶- ☂->[Order{bg:green}][/yuml]


[yuml style=plain] [Company]<>-1>[Location], [Location]+->[Point][/yuml]


[yuml style=plain][Company]++-1>[London][/yuml]


[yuml style=plain] [Customer]<>1->*[Order], [Customer]-[note: Aggregate Root{bg:cornsilk}] [/yuml]


[yuml style=plain][Wages]^[Salaried],[Wages]^[Contractor][/yuml]

Interface Inheritance

[yuml style=plain][<<ITask>>]^-.-[Nightly Billing Task][/yuml]


[yuml style=plain][<<IDisposable>>;Session][/yuml]

Class With Details

[yuml style=plain][User|+Forename+;Surname;+HashedPassword;-Salt|+Login();+Logout()][/yuml]

Class Example 1

[yuml style=plain]%2F%2F Cool Class Diagram, [Customer|-forname:string;surname:string|doShiz()]<>-orders*>[Order], [Order]++-0..*>[LineItem], [Order]-[note:Aggregate root{bg:wheat}][/yuml]

Class Example 2

[yuml style=plain][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][/yuml]

Activity Diagrams

Simple Action

[yuml style=plain type=activity]
(start)->(Boil Kettle)->(end)


[yuml style=plain type=activity](start)->[Water]->(Fill Kettle)->(end)[/yuml]

Connector Name

[yuml style=plain type=activity](start)-fill>(Fill Kettle)->(end)[/yuml]

Decisions and Constraints

[yuml style=plain type=activity]
(start)-><a>[kettle empty]->(Fill Kettle)->(Boil Kettle),<a>[kettle full]->(Boil Kettle)->(end)


[yuml style=plain type=activity](start)-><a>[kettle empty]->(Fill Kettle)->|b|,<a>[kettle full]->|b|->(Boil Kettle)->|c|,|b|->(Add Tea Bag)->(Add Milk)->|c|->(Pour Water)->(end),(Pour Water)->(end)[/yuml]

Usecase Diagrams

type=usecase allows you to create complex charts that represent activities performed by various individuals.


[yuml style=plain type=usecase][Customer][/yuml]

Actor & Usecase

[yuml style=plain type=usecase][Customer]-(Login)[/yuml]


[yuml style=plain type=usecase][Customer]-(Login), [Customer]-(note: Cust can be registered or not{bg:yellow})[/yuml]

Single Actor Multiple Usecases

[yuml style=plain type=usecase][Customer]-(Login), [Customer]-(Logout)[/yuml]

Actor Inheritance

[Cms Admin]^[User]

Multiple Actors And Inheritance

[yuml style=plain type=usecase][Cms Admin]^[User], [Customer]^[User], [Agent]^[User][/yuml]



Usecase Example 1

[yuml style=plain type=usecase] [Customer]-(Sign In), [Customer]-(Buy Products), (Buy Products)>(Browse Products), (Buy Products)>(Checkout), (Checkout)<(Add New Credit Card) [/yuml]

Usecase Example 2

[yuml style=plain type=usecase](note: figure 1.2{bg:yellow}), [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)[/yuml]

1 Like

Very educational. Might just have to try this!:grin: