PlantUML Language specification Common commands

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Common commands

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Comments

Simple comment

Everything that starts with simple quote ' is a comment. 

@startuml
'Line comments use a single apostrophe
@enduml

Block comment

Block comment use C-style comments except that instead of * you use an apostrophe ', then you can also put comments on several lines using /' to start and '/ to end. 

@startuml
/'
many lines comments
here
'/
@enduml

[Ref. QA-1353]

Then you can also put block comment on the same line, as:

🎉 Copied! 

@startuml
/' case 1 '/   A -> B : AB-First step 
               B -> C : BC-Second step
/' case 2 '/   D -> E : DE-Third step
@enduml

[Ref. QA-3906 and QA-3910]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
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

🎉 Copied! 

@startuml
scale 180*90
Bob->Alice : hello
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
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.

🎉 Copied! 

@startuml
skinparam titleBorderRoundCorner 15
skinparam titleBorderThickness 2
skinparam titleBorderColor red
skinparam titleBackgroundColor Aqua-CadetBlue

title Simple communication\nexample

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

@enduml

You can use creole formatting in the title.

You can also define title on several lines using title and end title keywords.

🎉 Copied! 

@startuml

title
 <u>Simple</u> communication example
 on <i>several</i> lines and using <back:cadetblue>creole tags</back>
end title

Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response

@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Caption

There is also a caption keyword to put a caption under the diagram.

🎉 Copied! 

@startuml

caption figure 1
Alice -> Bob: Hello

@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Footer and header

You can use the commands header or footer to add a footer or a header on any generated diagram.

You can optionally specify if you want a center, left or right footer/header, by adding a keyword.

As with title, it is possible to define a header or a footer on several lines.

It is also possible to put some HTML into the header or footer.

🎉 Copied! 

@startuml
Alice -> Bob: Authentication Request

header
<font color=red>Warning:</font>
Do not use in production.
endheader

center footer Generated for demonstration

@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Legend the diagram

The legend and end legend are keywords is used to put a legend.

You can optionally specify to have left, right, top, bottom or center alignment for the legend.

🎉 Copied! 

@startuml
Alice -> Bob : Hello
legend right
  Short
  legend
endlegend
@enduml

🎉 Copied! 

@startuml
Alice -> Bob : Hello
legend top left
  Short
  legend
endlegend
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Appendix: Examples on all diagram

Activity

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

start
:Hello world;
:This is defined on
several **lines**;
stop

@enduml

Archimate

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

archimate #Technology "VPN Server" as vpnServerA <<technology-device>>

rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange

@enduml

Class

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

a -- b 

@enduml

Component, Deployment, Use-Case

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

node n
(u) -> [c]

@enduml

Gantt project planning

🎉 Copied! 

@startgantt
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend


[t] lasts 5 days

@endgantt

DONE
[(Header, footer) corrected on V1.2020.18]

Object

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

object user {
  name = "Dummy"
  id = 123
}

@enduml

MindMap

🎉 Copied! 

@startmindmap
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

* r
** d1
** d2

@endmindmap

Network (nwdiag)

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

nwdiag {
  network inet {
      web01 [shape = cloud]
  }
}

@enduml

Sequence

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

a->b
@enduml

State

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

[*] --> State1
State1 -> State2

@enduml

Timing

🎉 Copied! 

@startuml
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle

@100
WU is Waiting
WB is Processing

@300
WB is Waiting

@enduml

Work Breakdown Structure (WBS)

🎉 Copied! 

@startwbs
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

* r
** d1
** d2

@endwbs

DONE
[Corrected on V1.2020.17]

Wireframe (SALT)

🎉 Copied! 

@startsalt
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

DONE
[Corrected on V1.2020.18]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Appendix: Examples on all diagram with style

DONE

FYI:
  • all is only good for Sequence diagram
  • title, caption and legend are good for all diagrams except for salt diagram
FIXME
🚩
  • Now (test on 1.2020.18-19) header, footer are not good for all other diagrams except only for Sequence diagram.
To be fix; Thanks

FIXME

Here are tests of title, header, footer, caption or legend on all the diagram with the debug style: 

<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>

Activity

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

start
:Hello world;
:This is defined on
several **lines**;
stop

@enduml

Archimate

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

archimate #Technology "VPN Server" as vpnServerA <<technology-device>>

rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange

@enduml

Class

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

a -- b 

@enduml

Component, Deployment, Use-Case

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

node n
(u) -> [c]

@enduml

Gantt project planning

🎉 Copied! 

@startgantt
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend


[t] lasts 5 days

@endgantt

Object

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

object user {
  name = "Dummy"
  id = 123
}

@enduml

MindMap

🎉 Copied! 

@startmindmap
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

* r
** d1
** d2

@endmindmap

Network (nwdiag)

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

nwdiag {
  network inet {
      web01 [shape = cloud]
  }
}

@enduml

Sequence

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

a->b
@enduml

State

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

[*] --> State1
State1 -> State2

@enduml

Timing

🎉 Copied! 

@startuml
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle

@100
WU is Waiting
WB is Processing

@300
WB is Waiting

@enduml

Work Breakdown Structure (WBS)

🎉 Copied! 

@startwbs
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

* r
** d1
** d2

@endwbs

Wireframe (SALT)

FIXME
Fix all (title, caption, legend, header, footer) for salt.
FIXME

🎉 Copied! 

@startsalt
<style>
title {
  HorizontalAlignment right
  FontSize 24
  FontColor blue
}

header {
  HorizontalAlignment center
  FontSize 26
  FontColor purple
}

footer {
  HorizontalAlignment left
  FontSize 28
  FontColor red
}

legend {
  FontSize 30
  BackGroundColor yellow
  Margin 30
  Padding 50
}

caption {
  FontSize 32
}
</style>
@startsalt
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Mainframe

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
Alice->Bob : Hello
@enduml

[Ref. QA-4019 and Issue#148]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Appendix: Examples of Mainframe on all diagram

Activity

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml

Archimate

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

archimate #Technology "VPN Server" as vpnServerA <<technology-device>>
rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange
@enduml

FIXME
🚩 Cropped on the top and on the left
FIXME

Class

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

a -- b 
@enduml

FIXME
🚩 Cropped on the top and on the left
FIXME

Component, Deployment, Use-Case

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

node n
(u) -> [c]
@enduml

FIXME
🚩 Cropped on the top and on the left
FIXME

Gantt project planning

🎉 Copied! 

@startgantt
mainframe This is a **mainframe**

[t] lasts 5 days
@endgantt

FIXME
🚩 Cropped on the top and on the left
FIXME

Object

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

object user {
  name = "Dummy"
  id = 123
}
@enduml

FIXME
🚩 Cropped on the top!
FIXME

MindMap

🎉 Copied! 

@startmindmap
mainframe This is a **mainframe**

* r
** d1
** d2
@endmindmap

Network (nwdiag)

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

nwdiag {
  network inet {
      web01 [shape = cloud]
  }
}
@enduml

FIXME
🚩 Cropped on the top!
FIXME

Sequence

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

a->b
@enduml

State

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

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

FIXME
🚩 Cropped on the top and on the left
FIXME

Timing

🎉 Copied! 

@startuml
mainframe This is a **mainframe**

robust "Web Browser" as WB
concise "Web User" as WU
@0
WU is Idle
WB is Idle
@100
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml

Work Breakdown Structure (WBS)

🎉 Copied! 

@startwbs
mainframe This is a **mainframe**
* r
** d1
** d2
@endwbs

Wireframe (SALT)

🎉 Copied! 

@startsalt
mainframe This is a **mainframe**
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Appendix: Examples of title, header, footer, caption, legend and mainframe on all diagram

Activity

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

start
:Hello world;
:This is defined on
several **lines**;
stop

@enduml

Archimate

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

archimate #Technology "VPN Server" as vpnServerA <<technology-device>>

rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange

@enduml

Class

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

a -- b 

@enduml

Component, Deployment, Use-Case

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

node n
(u) -> [c]

@enduml

Gantt project planning

🎉 Copied! 

@startgantt
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend


[t] lasts 5 days

@endgantt

Object

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

object user {
  name = "Dummy"
  id = 123
}

@enduml

MindMap

🎉 Copied! 

@startmindmap
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

* r
** d1
** d2

@endmindmap

Network (nwdiag)

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

nwdiag {
  network inet {
      web01 [shape = cloud]
  }
}

@enduml

Sequence

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

a->b
@enduml

State

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

[*] --> State1
State1 -> State2

@enduml

Timing

🎉 Copied! 

@startuml
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle

@100
WU is Waiting
WB is Processing

@300
WB is Waiting

@enduml

Work Breakdown Structure (WBS)

🎉 Copied! 

@startwbs
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

* r
** d1
** d2

@endwbs

Wireframe (SALT)

🎉 Copied! 

@startsalt
mainframe This is a **mainframe**
header some header

footer some footer

title My title

caption This is caption

legend
The legend
end legend

{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Privacy Policy      Advertise