Style guide Visual style PlantUML diagrams

PlantUML diagrams

Overview

Figure 1. PlantUML Diagrams

The next pages show examples of diagrams with their available elements, to verify the styling. Two pointers for more information on the syntax and the meaning of diagrams:

The PlantUML website shows how to specify and adapt elements of diagrams in more detail.
Find out more about UML diagrams

Colour conventions

We include a PlantUML configuration file when generating diagram images. This configuration file uses color variables across UML elements, divided in types of diagram elements.

Figure 2. Colour conventions for types of diagram elements

The boxes above are coloured using stereotypes.

Source for the example above

@startuml
hide footbox
hide stereotype
skinparam MinimumWidth 100

participant "Primary node" <<node_1>>
participant "Secondary node" <<node_2>>
participant "Logic element" <<logic>>
participant "Grouping element" <<grouping>>
participant "Divider element" <<divider>>
participant "Comment" <<comment>>

"Primary node" -> "Comment" : messages and flows
@enduml

The admonition colors are also included, to make it easy to use them in diagrams as well.

Figure 3. Using admonition colors for elements

Source for the example above

@startuml
hide footbox
skinparam MinimumWidth 100

participant tip <<(T,$adm_tip_color)>>
/ note over tip <<adm_tip>>: Tip

participant note <<(N,$adm_note_color)>>
/ note over note <<adm_note>>: Note

participant warning <<(W,$adm_warning_color)>>
/ note over warning <<adm_warning>>: Warning

participant caution <<(C,$adm_caution_color)>>
/ note over caution <<adm_caution>>: Caution

participant important <<(I,$adm_important_color)>>
/ note over important <<adm_important>>: Important
@enduml

Add the PlantUML configuration

The Kroki server that generates PlantUML diagrams has an option to include the PlantUML configuration file.

In Antora playbook, add a reference to the PlantUML configuration

asciidoc:
  extensions:
  - asciidoctor-kroki
  attributes:
    ... (1)
    kroki-server-url: http://localhost:18181
    kroki-plantuml-include: plantuml-styling.cfg (2)

1	Other configuration options
2	Location of the PlantUML styling