Diagrams using PlantUml

Published by Igor Khrupin on

This is not something new, but It can be useful for somebody.

Sometimes we need to create diagrams. It is easy to do on paper. And what if we need to do it not on paper.

We have a huge list of tools. My favorite is Draw.io. And in the case of Draw.io, we have to draw something.

But what if you do not have drawing skills 🙂

Here is PlantUML. Using this “language” you able to create diagrams from code. Here are some examples:

Sequence diagram

@startuml
Alice -> Bob: message 1
Bob --> Alice: ok
|||
Alice -> Bob: message 2
Bob --> Alice: ok
||45||
Alice -> Bob: message 3
Bob --> Alice: ok
@enduml

PlantUML Syntax:<br /> @startuml<br /> Alice -> Bob: message 1<br /> Bob –> Alice: ok<br /> |||<br /> Alice -> Bob: message 2<br /> Bob –> Alice: ok<br /> ||45||<br /> Alice -> Bob: message 3<br /> Bob –> Alice: ok<br /> @enduml<br />

Use Case Diagram

@startuml
:Main Admin: as Admin
(Use the application) as (Use)

User -> (Start)
User --> (Use)

Admin ---> (Use)

note right of Admin : This is an example.

note right of (Use)
A note can also
be on several lines
end note

note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml

PlantUML Syntax:<br /> @startuml<br /> :Main Admin: as Admin<br /> (Use the application) as (Use)</p><p>User -> (Start)<br /> User –> (Use)</p><p>Admin —> (Use)</p><p>note right of Admin : This is an example.</p><p>note right of (Use)<br /> A note can also<br /> be on several lines<br /> end note</p><p>note “This note is connected\nto several objects.” as N2<br /> (Start) .. N2<br /> N2 .. (Use)<br /> @enduml<br />

Class Diagram

@startuml

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List <|-- AbstractList
Collection <|-- AbstractCollection

Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList

class ArrayList {
Object[] elementData
size()
}

enum TimeUnit {
DAYS
HOURS
MINUTES
}

annotation SuppressWarnings

@enduml

PlantUML Syntax:<br /> @startuml</p><p>abstract class AbstractList<br /> abstract AbstractCollection<br /> interface List<br /> interface Collection</p><p>List <|– AbstractList<br /> Collection <|– AbstractCollection</p><p>Collection <|- List<br /> AbstractCollection <|- AbstractList<br /> AbstractList <|– ArrayList</p><p>class ArrayList {<br /> Object[] elementData<br /> size()<br /> }</p><p>enum TimeUnit {<br /> DAYS<br /> HOURS<br /> MINUTES<br /> }</p><p>annotation SuppressWarnings</p><p>@enduml<br />

Activity Diagram

@startuml

start

repeat :foo as starting label;
  :read data;
  :generate diagrams;
backward:This is backward;
repeat while (more data?)

stop

@enduml

PlantUML Syntax:<br /> @startuml</p><p>start</p><p>repeat :foo as starting label;<br /> :read data;<br /> :generate diagrams;<br /> backward:This is backward;<br /> repeat while (more data?)</p><p>stop</p><p>@enduml<br />

Component Diagram

@startuml

package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}

node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}

cloud {
  [Example 1]
}


database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}


[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

@enduml

PlantUML Syntax:<br /> @startuml</p><p>package “Some Group” {<br /> HTTP – [First Component]<br /> [Another Component]<br /> }</p><p>node “Other Groups” {<br /> FTP – [Second Component]<br /> [First Component] –> FTP<br /> }</p><p>cloud {<br /> [Example 1]<br /> }</p><p>database “MySql” {<br /> folder “This is my folder” {<br /> [Folder 3]<br /> }<br /> frame “Foo” {<br /> [Frame 4]<br /> }<br /> }</p><p>[Another Component] –> [Example 1]<br /> [Example 1] –> [Folder 3]<br /> [Folder 3] –> [Frame 4]</p><p>@enduml<br />

State Diagram

@startuml
hide empty description
[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]
@enduml

PlantUML Syntax:<br /> @startuml<br /> hide empty description<br /> [*] –> State1<br /> State1 –> [*]<br /> State1 : this is a string<br /> State1 : this is another string</p><p>State1 -> State2<br /> State2 –> [*]<br /> @enduml<br />

Timing Diagram

@startuml
robust "DNS Resolver" as DNS
robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle
DNS is Idle

@+100
WU -> WB : URL
WU is Waiting
WB is Processing

@+200
WB is Waiting
WB -> DNS@+50 : Resolve URL

@+100
DNS is Processing

@+300
DNS is Idle
@enduml

PlantUML Syntax:<br /> @startuml<br /> robust “DNS Resolver” as DNS<br /> robust “Web Browser” as WB<br /> concise “Web User” as WU</p><p>@0<br /> WU is Idle<br /> WB is Idle<br /> DNS is Idle</p><p>@+100<br /> WU -> WB : URL<br /> WU is Waiting<br /> WB is Processing</p><p>@+200<br /> WB is Waiting<br /> WB -> DNS@+50 : Resolve URL</p><p>@+100<br /> DNS is Processing</p><p>@+300<br /> DNS is Idle<br /> @enduml<br />

Work Breakdown Structure (WBS)

@startwbs
* Business Process Modelling WBS
** Launch the project
*** Complete Stakeholder Research
*** Initial Implementation Plan
** Design phase
*** Model of AsIs Processes Completed
**** Model of AsIs Processes Completed1
**** Model of AsIs Processes Completed2
*** Measure AsIs performance metrics
*** Identify Quick Wins
** Complete innovate phase
@endwbs

PlantUML Syntax:<br /> @startwbs<br /> * Business Process Modelling WBS<br /> ** Launch the project<br /> *** Complete Stakeholder Research<br /> *** Initial Implementation Plan<br /> ** Design phase<br /> *** Model of AsIs Processes Completed<br /> **** Model of AsIs Processes Completed1<br /> **** Model of AsIs Processes Completed2<br /> *** Measure AsIs performance metrics<br /> *** Identify Quick Wins<br /> ** Complete innovate phase<br /> @endwbs<br />

Examples from plantuml.com


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.