Cheatsheets:PlantUML: Difference between revisions
AI-assisted (RonzzWikiCowriter): new PlantUML cheatsheet (via create-page on MediaWiki MCP Server) |
Common syntax: 2-row source/rendered table, drop deprecated skinparam; add Theme and Style sections. AI-assisted (RonzzWikiCowriter) (via update-page on MediaWiki MCP Server) |
||
| Line 245: | Line 245: | ||
== Common syntax == | == Common syntax == | ||
Comments and document-level decorations — title, header, footer, legend: | |||
<syntaxhighlight lang="text" copy> | <syntaxhighlight lang="text" copy> | ||
| Line 251: | Line 253: | ||
comment '/ | comment '/ | ||
title Order flow | title Order flow ' diagram title | ||
header v1.0 | header v1.0 ' repeated header | ||
footer %page% / %lastpage% | footer page %page% of %lastpage% ' %page%/%lastpage%: page numbers | ||
</syntaxhighlight> | |||
<blockquote> | |||
Comments start with <syntaxhighlight lang="text" inline>'</syntaxhighlight> — not <syntaxhighlight lang="text" inline>//</syntaxhighlight>. In a header/footer, <syntaxhighlight lang="text" inline>%page%</syntaxhighlight> / <syntaxhighlight lang="text" inline>%lastpage%</syntaxhighlight> become page numbers once the diagram spans several pages. | |||
</blockquote> | |||
{| class="wikitable" | |||
! Source (.puml) !! Rendered | |||
|- | |||
| | |||
<syntaxhighlight lang="text" copy> | |||
@startuml | |||
title Order flow | |||
header v1.0 | |||
footer confidential | |||
legend | Alice -> Bob: Request | ||
Bob --> Alice: Response | |||
@enduml | |||
</syntaxhighlight> | |||
|| | |||
[[File:PlantUML-common-decorations.png|300px|alt=Rendered title, header and footer]] | |||
|- | |||
| | |||
<syntaxhighlight lang="text" copy> | |||
@startuml | |||
legend right | |||
Shipped orders only | Shipped orders only | ||
endlegend | endlegend | ||
skinparam | Alice -> Bob: Ship order | ||
Bob --> Alice: OK | |||
@enduml | |||
</syntaxhighlight> | |||
|| | |||
[[File:PlantUML-common-legend.png|300px|alt=Rendered legend]] | |||
|} | |||
== Theme == | |||
Swap the whole look with one directive at the top of the diagram — themes ship with PlantUML, nothing to install: | |||
{| class="wikitable" | |||
! Source (.puml) !! Rendered | |||
|- | |||
| | |||
<syntaxhighlight lang="text" copy> | |||
@startuml | |||
!theme spacelab | |||
class Example { | |||
Theme spacelab | |||
} | |||
@enduml | |||
</syntaxhighlight> | |||
|| | |||
[[File:PlantUML-theme-spacelab.png|300px|alt=Rendered diagram with spacelab theme]] | |||
|} | |||
* <syntaxhighlight lang="text" inline>help themes</syntaxhighlight> renders the full list of built-in themes. | |||
* Your own theme: <syntaxhighlight lang="text" inline>!theme foo from /path/to/folder</syntaxhighlight> — a file named <syntaxhighlight lang="text" inline>puml-theme-foo.puml</syntaxhighlight> (remote URLs work too). | |||
* Some themes add message helpers: <syntaxhighlight lang="text" inline>$success("…")</syntaxhighlight>, <syntaxhighlight lang="text" inline>$failure("…")</syntaxhighlight>, <syntaxhighlight lang="text" inline>$warning("…")</syntaxhighlight>. | |||
Browse the [https://the-lum.github.io/puml-themes-gallery/ gallery of official themes]. Full reference: [https://plantuml.com/theme PlantUML Themes]. | |||
== Style == | |||
CSS-like <syntaxhighlight lang="text" inline><style></syntaxhighlight> blocks replace the deprecated <syntaxhighlight lang="text" inline>skinparam</syntaxhighlight>. Selectors target everything (<syntaxhighlight lang="text" inline>element</syntaxhighlight>), one diagram type (<syntaxhighlight lang="text" inline>sequenceDiagram</syntaxhighlight>, <syntaxhighlight lang="text" inline>classDiagram</syntaxhighlight>, …) or one element (<syntaxhighlight lang="text" inline>participant</syntaxhighlight>, <syntaxhighlight lang="text" inline>arrow</syntaxhighlight>, <syntaxhighlight lang="text" inline>node</syntaxhighlight>, …): | |||
{| class="wikitable" | |||
! Source (.puml) !! Rendered | |||
|- | |||
| | |||
<syntaxhighlight lang="text" copy> | |||
@startuml | |||
<style> | |||
element { | |||
BackGroundColor: #AAA; | |||
} | |||
sequenceDiagram { | |||
participant { | |||
FontColor: green; | |||
FontSize: 26; | |||
FontStyle: italic; | |||
LineColor: #E00; | |||
} | |||
arrow { | |||
FontColor: red; | |||
LineColor: blue; | |||
} | |||
} | |||
</style> | |||
participant Alice | |||
participant Bob | |||
Alice -> Bob : hello | |||
@enduml | |||
</syntaxhighlight> | </syntaxhighlight> | ||
|| | |||
[[File:PlantUML-style-basic.png|300px|alt=Rendered diagram with CSS-like styles]] | |||
|} | |||
< | Common properties: <syntaxhighlight lang="text" inline>FontColor</syntaxhighlight>, <syntaxhighlight lang="text" inline>FontSize</syntaxhighlight>, <syntaxhighlight lang="text" inline>FontStyle</syntaxhighlight>, <syntaxhighlight lang="text" inline>FontName</syntaxhighlight>; <syntaxhighlight lang="text" inline>BackGroundColor</syntaxhighlight>, <syntaxhighlight lang="text" inline>LineColor</syntaxhighlight>, <syntaxhighlight lang="text" inline>LineThickness</syntaxhighlight>, <syntaxhighlight lang="text" inline>RoundCorner</syntaxhighlight>, <syntaxhighlight lang="text" inline>Padding</syntaxhighlight>, <syntaxhighlight lang="text" inline>Shadowing</syntaxhighlight>. Custom classes: tag an element <syntaxhighlight lang="text" inline>as X <<primary>></syntaxhighlight>, then style <syntaxhighlight lang="text" inline>.primary { ... }</syntaxhighlight>. | ||
</ | Full reference: [https://plantuml.com/style PlantUML Styles]. | ||
== Rendering == | == Rendering == | ||
| Line 298: | Line 390: | ||
* [https://plantuml.com/starting Quick Start Guide] — install, first diagram | * [https://plantuml.com/starting Quick Start Guide] — install, first diagram | ||
* [https://plantuml.com/guide PlantUML Language Reference Guide] — the full syntax | * [https://plantuml.com/guide PlantUML Language Reference Guide] — the full syntax | ||
* [https://plantuml.com/theme PlantUML Themes] — built-in themes, one-line look change | |||
* [https://plantuml.com/style PlantUML Styles] — CSS-like styling, the skinparam replacement | |||
* [https://kroki.io/ Kroki] — render PlantUML inside Markdown, AsciiDoc, reStructuredText, … | * [https://kroki.io/ Kroki] — render PlantUML inside Markdown, AsciiDoc, reStructuredText, … | ||
* [https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml PlantUML VS Code extension] | * [https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml PlantUML VS Code extension] | ||
Wiki: wikibase.ronzz.org | |||
Revision as of 16:23, 26 August 2026
Quick reference for smart people — part of our dev cheatsheets collection.
PlantUML is a text-based diagramming language: describe a diagram in a few lines of plain text, render it to PNG, SVG, or ASCII art. The source is just text, so diagrams live in version control and diff cleanly. One syntax covers sequence, class, use case, activity, state, component and deployment diagrams.
New to PlantUML? The Quick Start Guide may interest you.
Basic example
Wrap every diagram in @startuml ... @enduml, save as .puml and render — see Rendering:
| Source (.puml) | Rendered |
|---|---|
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another request
Alice <-- Bob: Another response
@enduml
|
Sequence diagrams
The workhorse. A message is sender arrow receiver: text — the text after the colon is the label.
| Arrow | Renders as |
|---|---|
-> |
solid line, no arrowhead |
--> |
dashed line, no arrowhead (typical reply) |
->> |
solid line with arrowhead |
-->> |
dashed line with arrowhead |
-x |
line ending in a cross (destroys the lifeline) |
-) |
line ending in an open arrowhead |
Solid for synchronous calls, dashed for replies and asynchronous messages.
Participants — declare to control order and role. as NAME gives an alias: the quoted text is displayed, the alias is used in messages.
@startuml
participant "Web App" as WA
actor "Customer" as C
database "Postgres" as DB
entity E
control Ctrl
boundary B
queue Q
@enduml
Role keywords: actor, participant, database, entity, control, boundary, queue.
Activations, notes and fragments:
| Source (.puml) | Rendered |
|---|---|
@startuml
participant "Web App" as WA
database "Postgres" as DB
WA -> DB: SELECT * FROM orders
activate DB
DB --> WA: rows
deactivate DB
note right of DB: covered by index
alt rows found
WA -> WA: render table
else empty
WA -> WA: show placeholder
end
loop retry x3
WA -> WA: backoff
end
@enduml
|
activate / deactivate — draw a lifeline bar. Shorthand:
DB ++...DB --;return valuesends a dashed reply and deactivates.Fragments —
alt/else,opt,loop,par/and,break,critical,group label— all close withend.Notes —
note left of X,note right of X,note over X,note over X, Y.Numbering —
autonumberlabels messages 1, 2, 3...
Class diagrams
| Source (.puml) | Rendered |
|---|---|
@startuml
class Animal {
+name: string
-age: int
+speak(): void
}
Animal <|-- Dog
Dog *-- Collar
@enduml
|
Visibility markers: + public, - private, # protected, ~ package. Kinds: abstract class, interface, enum.
Relations — labels and multiplicities go at the ends:
| Symbol | Meaning |
|---|---|
Animal <|-- Dog |
inheritance (also class Dog extends Animal)
|
..|> |
realization (implements an interface) |
*-- |
composition |
o-- |
aggregation |
-- / --> |
association |
..> |
dependency |
Dog "1" *-- "0..*" Collar : has
Use case diagrams
| Source (.puml) | Rendered |
|---|---|
@startuml
left to right direction
actor Customer
rectangle "Web shop" {
(Login)
(Browse catalog)
}
Customer --> (Login)
(Login) ..> (Browse catalog) : include
@enduml
|
Use cases in parentheses (Login) or usecase "Login" as L; boundaries with rectangle "name" { ... } or package. Dotted arrows express include / extend.
Activity diagrams
| Source (.puml) | Rendered |
|---|---|
@startuml
start
:Fetch order;
if (in stock?) then (yes)
:Ship order;
else (no)
:Notify customer;
endif
stop
@enduml
|
:action; is a step; if (cond) then (yes) ... else (no) ... endif a decision. Also while (cond) ... endwhile and fork ... end fork for concurrency.
State diagrams
| Source (.puml) | Rendered |
|---|---|
@startuml
[*] --> Idle
Idle --> Running : start()
Running --> Idle : stop()
Running --> [*] : terminate
@enduml
|
[*] is the initial/final state; State --> State : event labels a transition. Long names: state "Waiting for input" as Waiting.
Component & deployment
| Source (.puml) | Rendered |
|---|---|
@startuml
node "Server" {
[Web] --> [App]
}
node "Database" {
database "Postgres" as pg
}
[App] --> pg
@enduml
|
Square brackets for components, database "name" for datastores, node "name" { ... } / package { ... } for containers.
Common syntax
Comments and document-level decorations — title, header, footer, legend:
' single-line comment
/' multi-line
comment '/
title Order flow ' diagram title
header v1.0 ' repeated header
footer page %page% of %lastpage% ' %page%/%lastpage%: page numbers
Comments start with
'— not//. In a header/footer,%page%/%lastpage%become page numbers once the diagram spans several pages.
| Source (.puml) | Rendered |
|---|---|
@startuml
title Order flow
header v1.0
footer confidential
Alice -> Bob: Request
Bob --> Alice: Response
@enduml
|
|
@startuml
legend right
Shipped orders only
endlegend
Alice -> Bob: Ship order
Bob --> Alice: OK
@enduml
|
Theme
Swap the whole look with one directive at the top of the diagram — themes ship with PlantUML, nothing to install:
| Source (.puml) | Rendered |
|---|---|
@startuml
!theme spacelab
class Example {
Theme spacelab
}
@enduml
|
help themesrenders the full list of built-in themes.- Your own theme:
!theme foo from /path/to/folder— a file namedpuml-theme-foo.puml(remote URLs work too). - Some themes add message helpers:
$success("…"),$failure("…"),$warning("…").
Browse the gallery of official themes. Full reference: PlantUML Themes.
Style
CSS-like <style> blocks replace the deprecated skinparam. Selectors target everything (element), one diagram type (sequenceDiagram, classDiagram, …) or one element (participant, arrow, node, …):
| Source (.puml) | Rendered |
|---|---|
@startuml
<style>
element {
BackGroundColor: #AAA;
}
sequenceDiagram {
participant {
FontColor: green;
FontSize: 26;
FontStyle: italic;
LineColor: #E00;
}
arrow {
FontColor: red;
LineColor: blue;
}
}
</style>
participant Alice
participant Bob
Alice -> Bob : hello
@enduml
|
Common properties: FontColor, FontSize, FontStyle, FontName; BackGroundColor, LineColor, LineThickness, RoundCorner, Padding, Shadowing. Custom classes: tag an element as X <<primary>>, then style .primary { ... }.
Full reference: PlantUML Styles.
Rendering
| Tool | How |
|---|---|
| CLI | java -jar plantuml.jar diagram.puml → diagram.png (Java required; GraphViz only for some diagram types)
|
| VS Code | PlantUML extension — Alt+D previews the diagram live
|
| Browser | plantuml.com online server; Kroki |
| GitLab | ```plantuml fenced blocks render natively (when enabled on the instance)
|
CLI options:
plantuml diagram.puml # PNG (default)
plantuml -tsvg diagram.puml # SVG
plantuml -tutxt diagram.puml # ASCII art
plantuml -o out/ diagram.puml # output directory
plantuml *.puml # whole directoryFor more
- PlantUML — official site; every diagram type has its own page (sequence-diagram, class-diagram, use-case-diagram, …)
- Quick Start Guide — install, first diagram
- PlantUML Language Reference Guide — the full syntax
- PlantUML Themes — built-in themes, one-line look change
- PlantUML Styles — CSS-like styling, the skinparam replacement
- Kroki — render PlantUML inside Markdown, AsciiDoc, reStructuredText, …
- PlantUML VS Code extension
Wiki: wikibase.ronzz.org








