Use PlantUML in draw.io

PlantUML is an open source tool where you can specify your UML diagrams in a text format, which looks quite similar to a simple programming language. It is often used by software developers and enables users with accessibility needs to draw UML diagrams.

Although there are other text formats for UML modelling, Plant UML is one of the most popular formats: It supports many diagram types, automatically lays out your diagram elements, and has a simple, human-readable language.

PlantUML uses the Graphviz software to layout your diagram where the layout algorithm aims connectors in the same direction (top to bottom, or left to right) and attempts to avoid crossed or connectors to make the diagram more readable. Graphviz DOT code can also be used to create flow charts, graphs and more.

draw.io allows you to insert PlantUML and Graphviz DOT code and automatically adds an image with your diagram to the drawing area.

Insert a PlantUML diagram in draw.io

  1. Open a draw.io diagram or create a new blank diagram, and select Arrange > Insert > PlantUML from the menu.
  2. Paste your PlantUML code into the dialog and click Insert.

By default, your UML diagram will be inserted as SVG on a transparent background. This is easily resizable and movable, like all other draw.io shapes.

Three different formats

When you insert your PlantUML code, you can select from three different image formats. By default, draw.io will insert a scaleable SVG on a transparent background (left). You can also choose to insert a PNG image of your UML diagram on a white background (middle), or a text representation on a transparent background (right).

Example PlantUML diagrams

PlantUML supports many different types of UML diagrams. For a comprehensive description, please refer to the PlantUML language reference (PDF) or their main website PlantUML.com.

For example, lets have a look at a sequence, use case and activity diagrams and the PlantUML code that created them

@startuml
actor User
User -> Sales: ProcessOrder
  activate Sales
  Sales -> Warehouse: << packOrder >>
    activate Warehouse
    Warehouse -> Picker: GetProducts
      activate Picker
      Picker --> Warehouse: ProductsCollected
      deactivate Picker
    Warehouse --> Sales: OrderPacked
    deactivate Warehouse
  Sales -> Sales: SendOrder
  Sales -> User: OrderSent
  deactivate Sales
@enduml
@startuml
left to right direction
skinparam packageStyle rectangle
actor User
actor Sales
rectangle order {
  User --> (checkout)
  (checkout) .> (payment) : include
  (processOrder) .> (checkout) : extends (checkout)
  (processOrder) <-- Sales
}
@enduml
@startuml
(*) --> "Order Submitted"
if "Payment Accepted" then
  -->[yes] "Pack products"
  --> "Send parcel"
  -right-> (*)
else
  ->[no] "Send error message"
  -->[Cancel Order] (*)
endif
@enduml

Trees, graphs and more

You aren’t limited to UML diagrams. The Graphviz DOT language allows you to create all kinds of complex diagrams including trees, graphs, entity relationships, data flow diagrams and finite state machines.

DOT and PlantUML allow you to format your diagrams too, with colors, fonts and shapes. For example, the following DOT code creates a tree with colored rectangular nodes instead of black ovals.

@startdot
digraph UMLdiagrams {
node [color=Red,shape=box]
 UML -> Structure;
 UML -> Behavior;
   Structure -> {Package Class Deployment Object Component CompositeStructure};
   Behavior -> {Activity UseCase State Sequence Interaction};
     Interaction -> {Timing Communication InteractionOverview};
}
@enddot

Add a PlantUML or DOT diagram to a Confluence page

Make sure you have installed the PlantUML for Confluence Cloud app in your instance.

When you edit a page, insert a {plantuml} macro. Once inserted you will see a macro box that says “PlantUML for Confluence”. Click the macro and press “Edit”.

In the Macro editor, enter the filename for the image attachment and the width and height that you want the image to be displayed in your Confluence page. Then enter your PlantUML or DOT code, and you will see a preview on the right of the dialog.

Save the macro configuration, and then save your page to see the diagram.

This Confluence app stores both the text description and the resulting image output in your Confluence Cloud instance. Data passes through the draw.io servers only during image generation and is deleted straight afterwards.

Learn more about UML diagramming

UML diagrams are used throughout the software development industry, to model business processes and in many other situations. There are 14 different types of UML diagrams (as you can see in the DOT diagram above!). Start with this overview of all UML diagrams, and from there, jump to our in-depth posts on each type.