PlantUML Language Reference Guide en
PlantUML Language Reference Guide en
PlantUML Language Reference Guide en
1 Sequence Diagram
@enduml
You can use the order keyword to custom the print order of participant.
@startuml
participant Last order 30
participant Middle order 20
participant First order 10
@enduml
You can specify a startnumber with autonumber start , and also an increment with autonumber start
increment.
@startuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
autonumber 15
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response
autonumber 40 10
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response
@enduml
You can specify a format for your number by using between double-quote.
The formatting is done with the Java class DecimalFormat (0 means digit, # means digit and zero if absent).
You can use some html tag in the format.
@startuml
autonumber "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
autonumber 15 "<b>(<u>##</u>)"
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response
@enduml
You can also use autonumber stop and autonumber resume increment format to respectively pause and
resume automatic numbering.
@startuml
autonumber 10 10 "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
autonumber stop
Bob -> Alice : dummy
autonumber stop
Bob -> Alice : dummy
Pages can display headers and footers using header and footer.
@startuml
@enduml
newpage
end
@enduml
Bob->Alice : ok
note right: this is another note
Bob->Bob : I am thinking
note left
a note
can also be defined
on several lines
end note
@enduml
note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.
endrnote
@enduml
1.15 Divider
If you want, you can split a diagram using == separator to divide your diagram into logical steps.
@startuml
== Initialization ==
== Repetition ==
@enduml
1.16 Reference
You can use reference in a diagram, using the keyword ref over.
@startuml
participant Alice
actor Bob
1.17 Delay
You can use ... to indicate a delay in the diagram. And it is also possible to put a message with this delay.
@startuml
@enduml
1.18 Space
You can use ||| to indicate some spacing in the diagram.
It is also possible to specify a number of pixel to be used.
@startuml
@enduml
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
@enduml
Nested lifeline can be used, and it is possible to add a color on the lifeline.
@startuml
participant User
B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
@enduml
1.20 Return
A new command return for generating a return message with optional text label. The point returned to is the point
that cause the most recently activated life-line. The syntax is simply return label where label, if provided, can be
create Other
Alice -> Other : new
@enduml
activate A
A<--] : RequestCreated
deactivate A
[<- A: Done
deactivate A
@enduml
[<- Bob
[x<- Bob
Bob ->]
Bob ->o]
Bob o->o]
Bob ->x]
Bob <-]
Bob x<-]
@enduml
@enduml
By default, the guillemet character is used to display the stereotype. You can change this behavious using the
skinparam guillemet:
@startuml
@enduml
@startuml
@enduml
@enduml
@enduml
You can also define title on several lines using title and end title keywords.
@startuml
title
<u>Simple</u> communication example
on <i>several</i> lines and using <font color=red>html</font>
This is hosted by <img:sourceforge.jpg>
end title
@enduml
@enduml
hide footbox
title Foot Box removed
@enduml
1.28 Skinparam
You can use the skinparam command to change colors and fonts for the drawing.
You can use this command:
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
You can also change other rendering parameter, as seen in the following examples:
@startuml
skinparam sequenceArrowThickness 2
skinparam roundcorner 20
skinparam maxmessagesize 60
skinparam sequenceParticipant underline
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
@enduml
@startuml
skinparam backgroundColor #EEEBDC
skinparam handwritten true
skinparam sequence {
ArrowColor DeepSkyBlue
ActorBorderColor DeepSkyBlue
LifeLineBorderColor blue
LifeLineBackgroundColor #A9DCDF
ParticipantBorderColor DeepSkyBlue
ParticipantBackgroundColor DodgerBlue
ParticipantFontName Impact
ParticipantFontSize 17
ParticipantFontColor #A9DCDF
ActorBackgroundColor aqua
ActorFontColor DeepSkyBlue
ActorFontSize 17
ActorFontName Aapex
}
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
@enduml
box "Foo1"
participant Alice1
participant Alice2
end box
box "Foo2"
participant Bob1
participant Bob2
end box
Alice1 -> Bob1 : hello
Alice1 -> Out : out
@enduml
2.1 Usecases
Use cases are enclosed using between parentheses (because two parentheses looks like an oval).
You can also use the usecase keyword to define a usecase. And you can define an alias, using the as keyword.
This alias will be used latter, when defining relations.
@startuml
(First usecase)
(Another usecase) as (UC2)
usecase UC3
usecase (Last\nusecase) as UC4
@enduml
2.2 Actors
Actor are enclosed using between two points.
You can also use the actor keyword to define an actor. And you can define an alias, using the as keyword. This
alias will be used latter, when defining relations.
We will see later that the actor definitions are optional.
@startuml
:First Actor:
:Another\nactor: as Men2
actor Men3
actor :Last actor: as Men4
@enduml
@enduml
@enduml
2.5 Extension
If one actor/use case extends another one, you can use the symbol <|--.
@startuml
:Main Admin: as Admin
(Use the application) as (Use)
@enduml
2.7 Stereotypes
You can add stereotypes while defining actors and use cases using << and >>.
@startuml
User << Human >>
:Main Database: as MySql << Application >>
(Start) << One Shot >>
(Use the application) as (Use) << Main >>
@enduml
It is also possible to change arrow direction by adding left, right, up or down keywords inside the arrow:
@startuml
:user: -left-> (dummyLeft)
:user: -right-> (dummyRight)
:user: -up-> (dummyUp)
:user: -down-> (dummyDown)
@enduml
You can shorten the arrow by using only the first character of the direction (for example, -d- instead of -down-)
or the two first characters (-do-).
Please note that you should not abuse this functionality : Graphviz gives usually good results without tweaking.
@enduml
You may change to left to right using the left to right direction command. The result is often better with
this direction.
@startuml
@enduml
2.11 Skinparam
You can use the skinparam command to change colors and fonts for the drawing.
You can use this command :
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
You can define specific color and fonts for stereotyped actors and usecases.
@startuml
skinparam handwritten true
skinparam usecase {
BackgroundColor DarkSeaGreen
BorderColor DarkSlateGray
ArrowColor Olive
ActorBorderColor black
ActorFontName Courier
@enduml
3 Class Diagram
@startuml
Class11 <|.. Class12
Class13 --> Class14
Class15 ..> Class16
Class17 ..|> Class18
Class19 <--* Class20
@enduml
@startuml
Class21 #-- Class22
Class23 x-- Class24
Class25 }-- Class26
Class27 +-- Class28
Class29 ^-- Class30
@enduml
@enduml
You can add an extra arrow pointing at one object showing which object acts on the other object, using < or > at
the begin or at the end of the label.
@startuml
class Car
@enduml
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()
@enduml
class Flight {
flightNumber : Integer
departureTime : Date
}
@enduml
You can use {field} and {method} modifiers to override default behaviour of the parser about fields and methods.
@startuml
class Dummy {
{field} A field (despite parentheses)
{method} Some method
}
@enduml
class Dummy {
-field1
#field2
~method1()
+method2()
}
@enduml
You can turn off this feature using the skinparam classAttributeIconSize 0 command :
@startuml
skinparam classAttributeIconSize 0
class Dummy {
-field1
#field2
~method1()
+method2()
}
@enduml
class User {
.. Simple Getter ..
+ getName()
+ getAddress()
.. Some setter ..
+ setName()
__ private data __
int age
-- encrypted --
String password
}
@enduml
You can also define a note on the last defined class using note left, note right, note top, note bottom.
A note can be also define alone with the note keywords, then linked to other objects using the .. symbol.
@startuml
class Object << general >>
Object <|--- ArrayList
class Foo
note left: On last defined class
@enduml
@startuml
class Foo
note left: On last defined class
note as N1
This note is <u>also</u>
<b><color:royalBlue>on several</color>
<s>words</s> lines
And this is hosted by <img:sourceforge.jpg>
end note
@enduml
class Dummy
Dummy --> Foo : A link
note on link #red: note that is red
@enduml
class ArrayList {
Object[] elementData
size()
}
enum TimeUnit {
DAYS
HOURS
MINUTES
}
annotation SuppressWarnings
@enduml
class Dummy1 {
+myMethods()
}
class Dummy2 {
+hiddenMethod()
}
hide members
hide <<Serializable>> circle
show Dummy1 methods
show <<Serializable>> fields
@enduml
class Foo1
class Foo2
hide Foo2
@enduml
@enduml
3.16 Packages
You can define a package using the package keyword, and optionally declare a background color for your package
(Using a html color code or name).
Note that package definitions can be nested.
@startuml
package net.sourceforge.plantuml {
Object <|-- Demo1
Demo1 *- Demo2
}
@enduml
@enduml
You can also define links between packages, like in the following example:
@startuml
package foo1.foo2 {
}
package foo1.foo2.foo3 {
class Object
}
@enduml
3.18 Namespaces
In packages, the name of a class is the unique identifier of this class. It means that you cannot have two classes
with the very same name in different packages.
In that case, you should use namespaces instead of packages.
You can refer to classes from other namespaces by fully qualify them. Classes from the default namespace are
qualified with a starting dot.
Note that you don't have to explicitly create namespace : a fully qualified class is automatically put in the right
namespace.
@startuml
class BaseClass
namespace net.foo {
@enduml
set namespaceSeparator ::
class X1::X2::foo {
some info
}
@enduml
You can disable automatic package creation using the command set namespaceSeparator none.
@startuml
@enduml
It is also possible to change arrow direction by adding left, right, up or down keywords inside the arrow:
@startuml
foo -left-> dummyLeft
foo -right-> dummyRight
foo -up-> dummyUp
foo -down-> dummyDown
@enduml
You can shorten the arrow by using only the first character of the direction (for example, -d- instead of -down-)
or the two first characters (-do-).
Please note that you should not abuse this functionality : Graphviz gives usually good results without tweaking.
class Enrollment {
drop()
cancel()
}
@enduml
class Enrollment {
drop()
cancel()
}
@enduml
3.23 Skinparam
You can use the skinparam command to change colors and fonts for the drawing.
You can use this command :
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
@startuml
skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
}
skinparam stereotypeCBackgroundColor YellowGreen
@enduml
@startuml
skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
BackgroundColor<<Foo>> Wheat
BorderColor<<Foo>> Tomato
}
skinparam stereotypeCBackgroundColor YellowGreen
skinparam stereotypeCBackgroundColor<< Foo >> DimGray
Class01 <<Foo>>
Class03 <<Foo>>
Class01 "1" *-- "many" Class02 : contains
@enduml
class Dummy
}
@enduml
class Bar1
class Bar2
together {
class Together1
class Together2
class Together3
}
Together1 - Together2
Together2 - Together3
Together2 -[hidden]--> Bar1
Bar1 -[hidden]> Bar2
@enduml
You can also use some specific skinparam settings to put borders on splitted pages (see example).
@startuml
' Split into 4 pages
page 2x2
skinparam pageMargin 10
skinparam pageExternalColor gray
skinparam pageBorderColor black
class BaseClass
namespace net.foo {
net.dummy.Person <|- Person
.BaseClass <|-- Person
4 Activity Diagram
@enduml
@enduml
• -left->
• -up->
@startuml
@enduml
4.4 Branches
You can use if/then/else keywords to define branches.
@startuml
(*) --> "Initialization"
@enduml
Unfortunately, you will have to sometimes repeat the same activity in the diagram text:
@startuml
(*) --> "check input"
if "" then
-> "activity 3" as a3
else
if "Other test" then
-left-> "activity 5"
else
--> "activity 6"
endif
endif
else
endif
@enduml
4.6 Synchronization
You can use === code === to display synchronization bars.
@startuml
--> (*)
@enduml
4.8 Notes
You can add notes on a activity using the commands note left, note right, note top or note bottom, just
after the description of the activity you want to note.
If you want to put a note on the starting point, define the note at the very beginning of the diagram description.
You can also have a note on several lines, using the endnote keywords.
@startuml
@enduml
4.9 Partition
You can define a partition using the partition keyword, and optionally declare a background color for your
partition (Using a html color code or name)
When you declare activities, they are automatically put in the last used partition.
You can close the partition definition using a closing bracket }.
@startuml
partition Conductor {
(*) --> "Climbs on Platform"
--> === S1 ===
--> Bows
}
partition Conductor {
Bows --> === S2 ===
--> WavesArmes
Applauds --> === S2 ===
}
@enduml
4.10 Skinparam
You can use the skinparam command to change colors and fonts for the drawing.
You can use this command :
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
You can define specific color and fonts for stereotyped activities.
@startuml
@enduml
4.11 Octagon
You can change the shape of activities to octagon using the skinparam activityShape octagon command.
@startuml
'Default is skinparam activityShape roundBox
skinparam activityShape octagon
@enduml
if "Page.onSecurityCheck" then
->[true] "Page.onInit()"
if "isForward?" then
->[no] "Process controls"
else
-->[yes] ===RENDERING===
endif
else
-->[false] ===REDIRECT_CHECK===
endif
--> "Page.onDestroy()"
-->(*)
@enduml
5.2 Start/Stop
You can use start and stop keywords to denote the beginning and the end of a diagram.
@startuml
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml
@startuml
start
:Hello world;
:This is defined on
several **lines**;
end
@enduml
5.3 Conditional
You can use if, then and else keywords to put tests if your diagram. Labels can be provided using parentheses.
@startuml
start
stop
@enduml
:Text 3;
elseif (condition D) then (yes)
:Text 4;
else (nothing)
:Text else;
endif
stop
@enduml
start
repeat
:read data;
:generate diagrams;
repeat while (more data?) is (yes)
->no;
stop
@enduml
start
stop
@enduml
It is possible to provide a label after the endwhile keyword, or using the is keyword.
@startuml
while (check filesize ?) is (not empty)
:read file;
endwhile (empty)
:close file;
@enduml
start
:Treatment 2;
end fork
else (monoproc)
:Treatment 1;
:Treatment 2;
endif
@enduml
5.7 Notes
Text formatting can be done using creole wiki syntax.
A note can be floating, using floating keyword.
@startuml
start
:foo1;
floating note left: This is a note
:foo2;
note right
This note is on several
//lines// and can
contain <b>HTML</b>
====
* Calling the method ""foo()"" is prohibited
end note
stop
@enduml
5.8 Colors
You can specify a color for some activities.
@startuml
start
:starting progress;
#HotPink:reading configuration files
These files should be edited at this point!;
#AAAAAA:ending of the process;
@enduml
5.9 Arrows
Using the -> notation, you can add texts to arrow, and change their color.
It's also possible to have dotted, dashed, bold or hidden arrows.
@startuml
:foo1;
-> You can put text on arrows;
if (test) then
-[#blue]->
:foo2;
-[#green,dashed]-> The text can
also be on several lines
and **very** long...;
:foo3;
else
-[#black,dotted]->
:foo4;
endif
-[#gray,bold]->
:foo5;
@enduml
5.10 Connector
You can use parentheses to denote connector.
@startuml
start
:Some activity;
(A)
detach
(A)
:Other activity;
@enduml
5.11 Grouping
You can group activity together by defining partition:
@startuml
start
partition Initialization {
:read config file;
:init internal variable;
}
partition Running {
:wait for user interaction;
:print information;
}
stop
@enduml
5.12 Swimlanes
Using pipe |, you can define swimlanes.
It's also possible to change swimlanes color.
@startuml
|Swimlane1|
start
:foo1;
|#AntiqueWhite|Swimlane2|
:foo2;
:foo3;
|Swimlane1|
:foo4;
|Swimlane2|
:foo5;
stop
@enduml
5.13 Detach
It's possible to remove an arrow using the detach keyword.
@startuml
:start;
fork
:foo1;
:foo2;
fork again
:foo3;
detach
endfork
if (foo4) then
:foo5;
detach
endif
:foo6;
detach
:foo7;
stop
@enduml
5.14 SDL
By changing the final ; separator, you can set different rendering for the activity:
• |
• <
• >
• /
• ]
• }
@startuml
:Ready;
:next(o)|
:Receiving;
split
:nak(i)<
:ack(o)>
split again
:ack(i)<
:next(o)
on several lines|
:i := i + 1]
:ack(o)>
split again
:err(i)<
:nak(o)>
split again
:foo/
split again
:i > 5}
stop
end split
:finish;
@enduml
start
:ClickServlet.handleRequest();
:new page;
if (Page.onSecurityCheck) then (true)
:Page.onInit();
if (isForward?) then (no)
:Process controls;
if (continue processing?) then (no)
stop
endif
:redirect process;
else
if (do forward?) then (yes)
:Forward request;
else (no)
:Render page template;
endif
endif
stop
@enduml
6 Component Diagram
Let's have few examples :
6.1 Components
Components must be bracketed.
You can also use the component keyword to define a component. And you can define an alias, using the as
keyword. This alias will be used latter, when defining relations.
@startuml
[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4
@enduml
6.2 Interfaces
Interface can be defined using the () symbol (because this looks like a circle).
You can also use the interface keyword to define an interface. And you can define an alias, using the as keyword.
This alias will be used latter, when defining relations.
We will see latter that interface definition is optional.
@startuml
() "First Interface"
() "Another interface" as Interf2
interface Interf3
interface "Last\ninterface" as Interf4
@enduml
@enduml
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
• package
• node
• folder
• frame
• cloud
• database
@startuml
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
@enduml
It is also possible to change arrow direction by adding left, right, up or down keywords inside the arrow:
@startuml
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
You can shorten the arrow by using only the first character of the direction (for example, -d- instead of -down-)
or the two first characters (-do-).
Please note that you should not abuse this functionality : Graphviz gives usually good results without tweaking.
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}
6.11 Skinparam
You can use the skinparam command to change colors and fonts for the drawing.
You can use this command :
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
You can define specific color and fonts for stereotyped components and interfaces.
@startuml
skinparam interface {
backgroundColor RosyBrown
borderColor orange
}
skinparam component {
FontSize 13
BackgroundColor<<Apache>> Red
BorderColor<<Apache>> #FF6655
FontName Courier
BorderColor black
BackgroundColor gold
ArrowFontName Impact
ArrowColor #FF6655
ArrowFontColor #777777
}
() "Data Access" as DA
DA - [First Component]
[First Component] ..> () HTTP : use
@enduml
@startuml
[AA] <<static lib>>
[BB] <<shared lib>>
[CC] <<static lib>>
node node1
node node2 <<shared node>>
database Production
skinparam component {
backgroundColor<<static lib>> DarkKhaki
backgroundColor<<shared lib>> Green
}
skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared node>> Magenta
}
skinparam databaseBackgroundColor Aqua
@enduml
7 State Diagram
State diagrams are used to give an abstract description of the behavior of a system. This behavior is represented as
a series of events that can occur in one or more possible states.
@enduml
state NotShooting {
[*] --> Idle
Idle --> Configuring : EvConfig
Configuring --> Idle : EvConfig
}
state Configuring {
[*] --> NewValueSelection
NewValueSelection --> NewValuePreview : EvNewValue
NewValuePreview --> NewValueSelection : EvNewValueRejected
NewValuePreview --> NewValueSelection : EvNewValueSaved
state NewValuePreview {
State1 -> State2
}
}
@enduml
@enduml
7.5 Fork
You can also fork and join using the <<fork>> and <<join>> stereotypes.
@startuml
@enduml
state Active {
[*] -> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] -> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] -> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
@enduml
@enduml
You can shorten the arrow by using only the first character of the direction (for example, -d- instead of -down-)
or the two first characters (-do-).
Please note that you should not abuse this functionality : Graphviz gives usually good results without tweaking.
7.8 Note
You can also define notes using note left of, note right of, note top of, note bottom of keywords.
You can also define notes on several lines.
@startuml
@enduml
state foo
note "This is a floating note" as N1
@enduml
@enduml
7.10 Skinparam
You can use the skinparam command to change colors and fonts for the drawing.
You can use this command :
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
You can define specific color and fonts for stereotyped states.
@startuml
skinparam backgroundColor LightYellow
skinparam state {
StartColor MediumBlue
EndColor Red
BackgroundColor Peru
BackgroundColor<<Warning>> Olive
BorderColor Gray
FontName Impact
}
8 Object Diagram
@startuml
object user
@enduml
object user {
name = "Dummy"
id = 123
}
@enduml
9 Timing Diagram
This is only a proposal and subject to change.
You are very welcome to create a new discussion on this future syntax. Your feedbacks, ideas and suggestions help
us to find the right solution.
@0
WU is Idle
WB is Idle
@100
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml
@0
WU is Idle
WB is Idle
@100
WU -> WB : URL
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml
@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
@WB
0 is idle
+200 is Proc.
+100 is Waiting
@WU
0 is Waiting
+500 is ok
@enduml
@WU
0 is Waiting
+500 is ok
@enduml
WB is Initializing
WU is Absent
@WB
0 is idle
+200 is Processing
+100 is Waiting
@WU
0 is Waiting
+500 is ok
@enduml
@0
WU is {-}
@100
WU is A1
@200
WU is {-}
@300
WU is {hidden}
@400
WU is A3
@500
WU is {-}
@enduml
WB is Initializing
WU is Absent
@WB
0 is idle
+200 is Processing
+100 is Waiting
WB@0 <-> @50 : {50 ms lag}
@WU
0 is Waiting
+500 is ok
@200 <-> @+150 : {150 ms}
@enduml
@0
WU is Idle
WB is Idle
@100
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml
10 Gantt Diagram
This is only a proposal and subject to change.
You are very welcome to create a new discussion on this future syntax. Your feedbacks, ideas and suggestions help
us to find the right solution.
The Gantt is described in natural language, using very simple sentences (subject-verb-complement).
@startgantt
[Prototype design] lasts 10 days
[Code prototype] lasts 10 days
[Write tests] lasts 5 days
[Code prototype] starts at [Prototype design]'s end
[Write tests] starts at [Code prototype]'s start
@endgantt
10.5 Milestone
You can define Milestones using the happens verb.
@startgantt
[Test prototype] lasts 10 days
[Prototype completed] happens at [Test prototype]'s end
[Setup assembly line] lasts 12 days
[Setup assembly line] starts at [Test prototype]'s end
@endgantt
10.6 Calendar
You can specify a starting date for the whole project. By default, the first task starts at this date.
@startgantt
Project starts the 20th of september 2017
[Prototype design] as [TASK1] lasts 13 days
[TASK1] is colored in Lavender/LightBlue
@endgantt
@endgantt
10.9 Separator
You can use -- to separate sets of tasks.
@startgantt
[Task1] lasts 10 days
then [Task2] lasts 4 days
-- Phase Two --
then [Task3] lasts 5 days
then [Task4] lasts 6 days
@endgantt
11 MindMap
MindMap diagram are still in beta: the syntax may change without notice.
left side
** A
*** AA
*** AB
** B
@endmindmap
* <&flag>Debian
** <&globe>Ubuntu
*** Linux Mint
*** Kubuntu
*** Lubuntu
*** KDE Neon
** <&graph>LMDE
** <&pulse>SolydXK
** <&people>SteamOS
** <&star>Raspbian with a very long name
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
header
My super header
endheader
legend right
Short
legend
endlegend
@endmindmap
@endwbs
+ Part One
+ Task 1.1
- LeftTask 1.2
+ Task 1.3
+ Part Two
+ Task 2.1
+ Task 2.2
-_ Task 2.2.1 To the left boxless
-_ Task 2.2.2 To the Left boxless
+_ Task 2.2.3 To the right boxless
@endwbs
13 Maths
You can use AsciiMath or JLaTeXMath notation within PlantUML:
@startuml
:<math>int_0^1f(x)dx</math>;
:<math>x^2+y_1+z_12^34</math>;
note right
Try also
<math>d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h</math>
<latex>P(y|\mathbf{x}) \mbox{ or } f(\mathbf{x})+\epsilon</latex>
end note
@enduml
or:
@startuml
Bob -> Alice : Can you solve: <math>ax^2+bx+c=0</math>
Alice --> Bob: <math>x = (-b+-sqrt(b^2-4ac))/(2a)</math>
@enduml
14 Common commands
14.1 Comments
Everything that starts with simple quote ' is a comment.
You can also put comments on several lines using /' to start and '/ to end.
header
<font color=red>Warning:</font>
Do not use in production.
endheader
@enduml
14.3 Zoom
You can use the scale command to zoom the generated image.
You can use either a number or a fraction to define the scale factor. You can also specify either width or height (in
pixel). And you can also give both width and height : the image is scaled to fit inside the specified dimension.
• scale 1.5
• scale 2/3
• scale 200 width
• scale 200 height
• scale 200*100
• scale max 300*200
• scale max 1024 width
• scale max 800 height
@startuml
scale 180*90
Bob->Alice : hello
@enduml
14.4 Title
The title keywords is used to put a title. You can add newline using \n in the title description.
Some skinparam settings are available to put borders on the title.
@startuml
skinparam titleBorderRoundCorner 15
skinparam titleBorderThickness 2
skinparam titleBorderColor red
skinparam titleBackgroundColor Aqua-CadetBlue
@enduml
title
<u>Simple</u> communication example
on <i>several</i> lines and using <back:cadetblue>creole tags</back>
end title
@enduml
14.5 Caption
There is also a caption keyword to put a caption under the diagram.
@startuml
caption figure 1
Alice -> Bob: Hello
@enduml
@startuml
Alice -> Bob : Hello
legend top left
Short
legend
endlegend
@enduml
15 Salt (wireframe)
Salt is a subproject included in PlantUML that may help you to design graphical interface.
You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.
The goal of this tool is to discuss about simple and sample windows.
Just after the opening bracket, you can use a character to define if you want to draw lines or columns of the grid :
Symbol Result
# To display all vertical and horizontal lines
! To display all vertical lines
- To display all horizontal lines
+ To display external lines
@startsalt
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
15.10 OpenIconic
OpenIconic is an very nice open source icon set. Those icons have been integrated into the creole parser, so you
can use them out-of-the-box. You can use the following syntax: <&ICON_NAME>.
@startsalt
{
Login<&person> | "MyName "
Password<&key> | "**** "
[Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt
The complete list is available on OpenIconic Website, or you can use the following special diagram:
@startuml
listopeniconic
@enduml
()two
[ok]
}
}}
" as choose
@startuml
!unquoted function SALT($x)
"{{
salt
%invoke_void_func("_"+$x)
}}" as $x
!endfunction
!function _choose()
{+
<b>an example
choose one option
()one
()two
[ok]
}
!endfunction
!function _wait()
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
!endfunction
!function _success()
{+
<b>success
congratulations!
[ok]
}
!endfunction
!function _error()
{+
<b>error
failed, sorry
[ok]
}
!endfunction
@startsalt
{SI
Message
.
.
.
.
}
@endsalt
@startsalt
{S-
Message
.
.
.
.
}
@endsalt
16 Creole
A light Creole engine has been integrated into PlantUML to have a standardized way of defining text style.
All diagrams are now supporting this syntax.
Note that ascending compatibility with HTML syntax is preserved.
16.2 List
@startuml
object demo {
* Bullet list
* Second item
}
note left
* Bullet list
* Second item
** Sub item
end note
legend
# Numbered list
# Second item
## Sub item
## Another sub item
# Third item
end legend
@enduml
@enduml
16.5 Headings
@startuml
usecase UC1 as "
= Extra-large heading
Some text
== Large heading
Other text
=== Medium heading
Information
....
==== Small heading"
@enduml
16.7 Table
It is possible to build table.
@startuml
skinparam titleFontSize 14
title
Example of simple table
|= |= table |= header |
| a | table | row |
| b | table | row |
end title
[*] --> State1
@enduml
16.8 Tree
You can use |_ characters to build a tree.
@startuml
skinparam titleFontSize 14
title
Example of Tree
|_ First line
|_ **Bom(Model)**
|_ prop1
|_ prop2
|_ prop3
|_ Last line
end title
[*] --> State1
@enduml
16.10 OpenIconic
OpenIconic is an very nice open source icon set. Those icons have been integrated into the creole parser, so you
can use them out-of-the-box.
The complete list is available on OpenIconic Website, or you can use the following special diagram:
@startuml
listopeniconic
@enduml
17.3 Examples
@startuml
sprite $printer [15x15/8z] NOtH3W0W208HxFz_kMAhj7lHWpa1XC716sz0Pq4MVPEWfBHIuxP3L6kbTcizR8tAhzaqFvXwvFf
start
:click on <$printer> to print the page;
@enduml
@startuml
sprite $bug [15x15/16z] PKzR2i0m2BFMi15p__FEjQEqB1z27aeqCqixa8S4OT7C53cKpsHpaYPDJY_12MHM-BLRyywPhrrlw
sprite $printer [15x15/8z] NOtH3W0W208HxFz_kMAhj7lHWpa1XC716sz0Pq4MVPEWfBHIuxP3L6kbTcizR8tAhzaqFvXwvF
sprite $disk {
444445566677881
436000000009991
43600000000ACA1
53700000001A7A1
53700000012B8A1
53800000123B8A1
63800001233C9A1
634999AABBC99B1
744566778899AB1
7456AAAAA99AAB1
8566AFC228AABB1
8567AC8118BBBB1
867BD4433BBBBB1
39AAAAABBBBBBC1
}
class Example {
Can have some bug : <$bug>
Click on <$disk> to save
}
@enduml
18 Skinparam command
You can change colors and font of the drawing using the skinparam command.
Example:
skinparam backgroundColor transparent
18.1 Usage
You can use this command :
• In the diagram definition, like any other commands,
• In an included file,
• In a configuration file, provided in the command line or the ANT task.
18.2 Nested
To avoid repetition, it is possible to nest definition. So the following definition :
skinparam xxxxParam1 value1
skinparam xxxxParam2 value2
skinparam xxxxParam3 value3
skinparam xxxxParam4 value4
is strictly equivalent to:
skinparam xxxx {
Param1 value1
Param2 value2
Param3 value3
Param4 value4
}
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
deactivate B
@enduml
18.4 Shadowing
You can disable the shadowing using the skinparam shadowing false command.
@startuml
actor User
(Glowing use case) <<with_shadow>> as guc
(Flat use case) <<no_shadow>> as fuc
User -- guc
User -- fuc
@enduml
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
@enduml
18.6 Colors
You can use either standard color name or RGB code.
18.9 Examples
@startuml
skinparam backgroundColor #EEEBDC
skinparam handwritten true
skinparam sequence {
ArrowColor DeepSkyBlue
ActorBorderColor DeepSkyBlue
LifeLineBorderColor blue
LifeLineBackgroundColor #A9DCDF
ParticipantBorderColor DeepSkyBlue
ParticipantBackgroundColor DodgerBlue
ParticipantFontName Impact
ParticipantFontSize 17
ParticipantFontColor #A9DCDF
ActorBackgroundColor aqua
ActorFontColor DeepSkyBlue
ActorFontSize 17
ActorFontName Aapex
}
actor User
participant "First Class" as A
participant "Second Class" as B
participant "Last Class" as C
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
@enduml
@startuml
skinparam handwritten true
skinparam actor {
BorderColor black
FontName Courier
BackgroundColor<< Human >> Gold
}
skinparam usecase {
BackgroundColor DarkSeaGreen
BorderColor DarkSlateGray
ArrowColor Olive
}
@startuml
skinparam roundcorner 20
skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
}
skinparam stereotypeCBackgroundColor YellowGreen
@startuml
skinparam interface {
backgroundColor RosyBrown
borderColor orange
}
skinparam component {
FontSize 13
BackgroundColor<<Apache>> Red
BorderColor<<Apache>> #FF6655
FontName Courier
BorderColor black
BackgroundColor gold
ArrowFontName Impact
ArrowColor #FF6655
ArrowFontColor #777777
}
() "Data Access" as DA
DA - [First Component]
[First Component] ..> () HTTP : use
@startuml
[AA] <<static lib>>
[BB] <<shared lib>>
[CC] <<static lib>>
node node1
node node2 <<shared node>>
database Production
skinparam component {
backgroundColor<<static lib>> DarkKhaki
backgroundColor<<shared lib>> Green
}
skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared node>> Magenta
}
skinparam databaseBackgroundColor Aqua
@enduml
Or you can generate a "diagram" with a list of all the skinparam parameters using:
@startuml
help skinparams
@enduml
That will give you the following result:
You can also view each skinparam parameters with its results displayed at https://plantuml-documentation.readthedocs.
io/en/latest/formatting/all-skin-params.html.
19 Preprocessing
Some minor preprocessing capabilities are included in PlantUML, and available for all diagrams.
Those functionalities are very similar to the C language preprocessor, except that the special character # has been
changed to the exclamation mark !.
19.3 Conditions
• You can use expression in condition.
!function init_class($name)
class $name {
$addCommonMethod()
}
!endfunction
!function $addCommonMethod()
toString()
hashCode()
!endfunction
init_class("foo1")
init_class("foo2")
msg("foo1", "foo2")
@enduml
Variables defined in functions are local. It means that the variable is destroyed when the function is exited.
As in void function, variable are local by default (they are destroyed when the function is exited). However, you
can access to global variables from function. However, you can use the local keyword to create a local variable
if ever a global variable exists with the same name.
@startuml
!function $dummy()
!local $ijk = "local"
Alice -> Bob : $ijk
!endfunction
!include List.iuml
List <|.. ArrayList
@enduml
File List.iuml
interface List
List : int size()
List : void clear()
The file List.iuml can be included in many diagrams, and any modification in this file will change all diagrams
that include it.
You can also put several @startuml/@enduml text block in an included file and then specify which block you
want to include adding !0 where 0 is the block number. The !0 notation denotes the first diagram.
For example, if you use !include foo.txt!1, the second @startuml/@enduml block within foo.txt will be
included.
You can also put an id to some @startuml/@enduml text block in an included file using @startuml(id=MY_OWN_ID)
syntax and then include the block adding !MY_OWN_ID when including the file, so using something like !include
foo.txt!MY_OWN_ID.
By default, a file can only be included once. You can use !include_many instead of !include if you want to
include some file several times. Note that there is also a !include_once directive that raises an error if a file is
included several times.
A -> A : stuff1
!startsub BASIC
B -> B : stuff2
!endsub
C -> C : stuff3
!startsub BASIC
D -> D : stuff4
!endsub
@enduml
file1.puml would be rendered exactly as if it were:
@startuml
A -> A : stuff1
B -> B : stuff2
C -> C : stuff3
D -> D : stuff4
@enduml
However, this would also allow you to have another file2.puml like this:
file2.puml
@startuml
Name Description
%strlen Calculate the length of a String %
%substr Extract a substring. Takes 2 or 3 arguments| %substr("abcdef", 3, 2) "d
%strpos Search a substring in a string %strpo
%inval Convert a String to Int %
%file_exists Check if a file exists on the local filesystem %file_exis
%function_exists Check if a function exists %function_e
%variable_exists Check if a variable exists %variable_
%set_variable_value Set a global variable %set_variable_value
%get_variable_value Retrieve some variable value %get_variabl
%getenv Retrieve environment variable value %
%dirpath Retrieve current dirpath
%filename Retrieve current filename
%date Retrieve current date. You can provide an optional format for the date %date("y
%true Return always true
%false Return always false
%not Return the logical negation of an expression
19.11 Logging
You can use !log to add some log output when generating the diagram. This has no impact at all on the diagram
itself. However, those logs are printed in the command line's output stream. This could be useful for debug purpose.
@startuml
!function bold($text)
!$result = "<b>"+ $text +"</b>"
!log Calling bold function with $text. The result is $result
!return $result
!endfunction
!unused = "foo"
!dump_memory EOF
@enduml
19.13 Assertion
You can put assertion in your diagram.
@startuml
Alice -> Bob : Hello
!assert %strpos("abcdef", "cd")==3 : "This always fail"
@enduml
!import /path/to/customLibrary.zip
' This just adds "customLibrary.zip" in the search path
!include myFolder/myFile.iuml
' Assuming that myFolder/myFile.iuml is located somewhere
' either inside "customLibrary.zip" or on the local filesystem
...
COMP_TEXTGENCOMP(dummy)
@enduml
!$wrapper = "$go"
%invoke_void_func($wrapper)
@enduml
For return functions, you can use the corresponding special function %call_user_func() :
@startuml
!function bold($text)
!return "<b>"+ $text +"</b>"
!endfunction
20 Unicode
The PlantUML language use letters to define actor, usecase and soon.
But letters are not only A-Z latin characters, it could be any kind of letter from any language.
20.1 Examples
@startuml
skinparam handwritten true
skinparam backgroundColor #EEEBDC
actor 使用者
participant "頭等艙" as A
participant "第二類" as B
participant "最後一堂課" as 別的東西
A -> B: 創建請求
activate B
B --> A: 請求創建
deactivate B
A --> 使用者: 做完
deactivate A
@enduml
@startuml
--> 鞠躬向公眾
--> === S2 ===
--> 這傢伙波武器
--> (*)
@startuml
@startuml
() "Σωκράτηςψεύτης" as Σωκράτης
Σωκράτης - [Πτηνά πολεμοχαρής]
[Πτηνά πολεμοχαρής] ..> () Αθήνα : Αυτές οι φράσειςσημαίνουν τίποτα
@enduml
20.2 Charset
The default charset used when reading the text files containing the UML text description is system dependent.
Normally, it should just be fine, but in some case, you may want to the use another charset. For example, with the
command line:
java -jar plantuml.jar -charset UTF-8 files.txt
Or, with the ant task:
<!-- Put images in c:/images directory -->
<target name="main">
<plantuml dir="./src" charset="UTF-8" />
Depending of your Java installation, the following charset should be available: ISO-8859-1, UTF-8, UTF-16BE,
UTF-16LE, UTF-16.
21 Standard Library
This page explains the official Standard Library for PlantUML This Standard Library is now included in official
releases of PlantUML. Including files follows the C convention for "C standard library" (see https://en.wikipedia.
org/wiki/C_standard_library )
Contents of the library come from third party contributors. We thank them for their usefull contribution!
AMAZONS3(s3_internal)
AMAZONS3(s3_partner,"Vendor's S3")
s3_internal <- s3_partner
@enduml
@enduml
FA_SERVER(web1,web1) #Green
FA_SERVER(web2,web2) #Yellow
FA_SERVER(web3,web3) #Blue
FA_SERVER(web4,web4) #YellowGreen
FA_DATABASE(db1,LIVE,database,white) #RoyalBlue
FA_DATABASE(db2,SPARE,database) #Red
@startuml
!include <tupadr3/common>
!include <tupadr3/devicons/mysql>
DEV_MYSQL(db1)
DEV_MYSQL(db2,label of db2)
DEV_MYSQL(db3,label of db3,database)
DEV_MYSQL(db4,label of db4,database,red) #DeepSkyBlue
@enduml
Notes
When mixing sprites macros with other elements you may get a syntax error if, for example, trying to add a rectangle
along with classes. In those cases, add { and } after the macro to create the empty rectangle.
Example of usage:
@startuml
!include <material/common>
' To import the sprite file you DON'T need to place a prefix!
!include <material/folder_move>
class foo {
bar
}
@enduml
21.6 Office
https://github.com/Roemer/plantuml-office
There are sprites (*.puml) and colored png icons available. Be aware that the sprites are all only monchrome even
if they have a color in their name (due to automatically generating the files). You can either color the sprites with
the macro (see examples below) or directly use the fully colored pngs. See the following examples on how to use
the sprites, the pngs and the macros.
Example of usage:
@startuml
!include <tupadr3/common>
!include <office/Servers/database_server>
!include <office/Servers/application_server>
!include <office/Concepts/firewall_orange>
!include <office/Clouds/cloud_disaster_red>
package "Sprites" {
OFF_DATABASE_SERVER(db,DB)
OFF_APPLICATION_SERVER(app,App-Server)
OFF_FIREWALL_ORANGE(fw,Firewall)
OFF_CLOUD_DISASTER_RED(cloud,Cloud)
db <-> app
app <--> fw
fw <.left.> cloud
}
@enduml
@startuml
!include <tupadr3/common>
!include <office/servers/database_server>
!include <office/servers/application_server>
!include <office/Concepts/firewall_orange>
!include <office/Clouds/cloud_disaster_red>
21.7 ArchiMate
https://github.com/ebbypeter/Archimate-PlantUML
This repository contains ArchiMate PlantUML macros and other includes for creating Archimate Diagrams easily
and consistanly.
@startuml Internet Browser Example
!includeurl https://raw.githubusercontent.com/ebbypeter/Archimate-PlantUML/master/Archimate.puml
' Elements
Business_Object(businessObject, "A Business Object")
Business_Process(someBusinessProcess,"Some Business Process")
Business_Service(itSupportService, "IT Support for Business (Application Service)")
'Relationships
Rel_Flow_Left(someBusinessProcess, businessObject, "")
Rel_Serving_Up(itSupportService, someBusinessProcess, "")
Rel_Specilization_Up(webpageBehaviour, itSupportService, "")
Rel_Flow_Right(dataObject, webpageBehaviour, "")
Rel_Specilization_Up(dataObject, businessObject, "")
Rel_Assignment_Left(ActivePartWebPage, webpageBehaviour, "")
Rel_Specilization_Up(inMemoryItem, dataObject, "")
Rel_Realization_Up(inMemoryItem, ActivePartWebPage, "")
Rel_Specilization_Right(inMemoryItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webpageBehaviour, "")
Rel_Serving_Up(internetBrowserPlugin, webpageBehaviour, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, inMemoryItem, "")
@enduml
21.8 Miscellaneous
You can list standard library folders using the special diagram:
@startuml
stdlib
@enduml
It is also possible to use the command line java -jar plantuml.jar -stdlib to display the same list.
Finally, you can extract the full standard library sources using java -jar plantuml.jar -extractstdlib.
All files will be extracted in the folder stdlib.
Sources used to build official PlantUML releases are hosted here https://github.com/plantuml/plantuml-stdlib.You
can create Pull Request to update or add some library if you find it relevant.
Contents
1 Sequence Diagram 1
1.1 Basic examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Declaring participant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Use non-letters in participants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Message to Self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.5 Change arrow style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.6 Change arrow color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.7 Message sequence numbering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.8 Page Title, Header and Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.9 Splitting diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.10 Grouping message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.11 Notes on messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.12 Some other notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.13 Changing notes shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.14 Creole and HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.15 Divider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.16 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.17 Delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.18 Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.19 Lifeline Activation and Destruction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.20 Return . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.21 Participant creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.22 Shortcut syntax for activation, deactivation, creation . . . . . . . . . . . . . . . . . . . . . . . . 17
1.23 Incoming and outgoing messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.24 Stereotypes and Spots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.25 More information on titles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.26 Participants encompass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.27 Removing Foot Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.28 Skinparam . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.29 Changing padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3 Class Diagram 34
3.1 Relations between classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.2 Label on relations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.3 Adding methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.4 Defining visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.5 Abstract and Static . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.6 Advanced class body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.7 Notes and stereotypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.8 More on notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.9 Note on links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.10 Abstract class and interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.11 Using non-letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4 Activity Diagram 54
4.1 Simple Activity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.2 Label on arrows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.3 Changing arrow direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.4 Branches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.5 More on Branches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.6 Synchronization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.7 Long activity description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.8 Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.9 Partition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.10 Skinparam . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
4.11 Octagon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.12 Complete example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
6 Component Diagram 76
6.1 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.2 Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.3 Basic example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.4 Using notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.5 Grouping Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.6 Changing arrows direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
6.7 Use UML2 notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.8 Long description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.9 Individual colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.10 Using Sprite in Stereotype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.11 Skinparam . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
7 State Diagram 84
7.1 Simple State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
7.2 Change state rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
7.3 Composite state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
7.4 Long name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
7.5 Fork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
7.6 Concurrent state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
7.7 Arrow direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
7.8 Note . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
7.9 More in notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
7.10 Skinparam . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
8 Object Diagram 93
8.1 Definition of objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
8.2 Relations between objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
8.3 Adding fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
8.4 Common features with class diagrams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
9 Timing Diagram 95
9.1 Declaring participant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
9.2 Adding message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
9.3 Relative time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
9.4 Participant oriented . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
9.5 Setting scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
9.6 Initial state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
9.7 Intricated state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
9.8 Hidden state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
9.9 Adding constraint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
9.10 Adding texts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
11 MindMap 105
11.1 OrgMode syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
11.2 Removing box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
11.3 Arithmetic notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
11.4 Markdown syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
11.5 Changing diagram direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
11.6 Complete example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
13 Maths 112
16 Creole 128
16.1 Emphasized text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
16.2 List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
16.3 Escape character . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
16.4 Horizontal lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
16.5 Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
16.6 Legacy HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
16.7 Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
16.8 Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
16.9 Special characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
16.10OpenIconic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
19 Preprocessing 147
19.1 Migration notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
19.2 Variable definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
19.3 Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
19.4 Void function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
20 Unicode 157
20.1 Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
20.2 Charset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159