Use PlantUML in draw.io

draw.io 16 Feb 2023

Share:

With PlantUML in draw.io using our web application (app.diagrams.net) you can quickly draw UML diagrams from a text description. When you input your PlantUML text, the diagram editor will automatically layout and arrange the diagram for you, based on your description and the style of output you select. It supports many different types of UML diagrams, as well as mindmaps, tree diagrams, flowcharts, network diagrams, Gantt charts, ER diagrams and more.
When you input PlantUML into a draw.io diagram, choose which type of diagram style you want - SVG, PNG or TXT

Tip: You can generate PlantUML from code with some software development tools. PlantUML functionality in only available in online versions of draw.io, not draw.io Desktop or draw.io for Confluence/Jira DC, for example.

Learn more about generating diagrams from code.

Insert a PlantUML diagram

  1. Click on the plus in the toolbar, then select Advanced > PlantUML in the simple editor mode and the Sketch whiteboard editor theme. In the draw.io editor, select Arrange > Insert > Advanced > PlantUML from the menu.
    Draw diagrams quickly from PlantUML text descriptions in draw.io
  2. Enter the PlantUML in the text field.
    When you input PlantUML into draw.io, choose which type of diagram style you want - SVG, PNG or TXT
  3. Select the output format you want (SVG, PNG or Text) and click Insert.

Your diagram will be generated and placed on the drawing canvas as an image shape. You can resize and rotate this image and attach connectors to its outside border, but you can’t edit the individual shapes.

  • Hover over the diagram on the drawing canvas to see the PlantUML text in a tooltip.
    Hover over a PlantUML diagram on the drawing canvas in draw.io to see the PlantUML text in a tooltip

  • Double click on the PlantUML diagram to edit the text description and click Apply to regenerate the diagram.

Style PlantUML diagrams

The skinparam key-value pairs are often used to add styles to shapes, text and connectors. You can also add icons, AsciiMath, links and tooltips.

Refer to the official PlantUML documentation for details.

Example PlantUML diagrams

UML sequence diagram

@startuml
actor User
User -> Sales: ProcessOrder
  activate Sales #FFBBBB
  Sales -> Warehouse: << packOrder >>
    activate Warehouse #gold
    Warehouse -> Picker: GetProducts
      activate Picker #005500
      Picker --> Warehouse: ProductsCollected
      deactivate Picker
    Warehouse --> Sales: OrderPacked
    deactivate Warehouse
  Sales -> Sales: SendOrder
  Sales -> User: OrderSent
  deactivate Sales
@enduml

Use colours to make activation shapes in PlantUML sequence diagrams stand out

Learn more about UML sequence diagrams

UML use case diagram

@startuml
left to right direction
skinparam packageStyle rectangle
actor User
actor Sales
rectangle order {
  User --> (checkout)
  (checkout) .> (payment) : include
  (order) .> (checkout) : extends (checkout)
  (order) <-- Sales
}
note "Requires login" as N2
  (checkout) .. N2
  N2 .. (payment)
@enduml

Add notes to PlantUML use case diagrams

Learn more about UML use case diagrams

UML activity diagrams and flowcharts

The PlantUML syntax for writing Activity diagrams has changed over the years. It is now much more flexible, and can include swimlanes for better task separation.

@startuml
|#lightblue|Customer|
start
:Find Barista;
|#antiquewhite|Barista|
:Greet Customer;
|Customer|
:Request latte;
|Barista|
:Write details on cup;
|Customer|
:Buy latte;
|Barista|
if (Payment Accepted?) then (yes)
#lightgreen:Make latte;
else (no)
#pink:Apologise;
endif
|Customer|
:Drink latte;
note right
  //Feel perky//
end note
stop
@enduml

Use swimlanes in PlantUML activity diagrams

Learn more about UML activity diagrams

UML timing diagrams

@startuml
robust "Browser" as WB
concise "User" as WU
@0
WU is Idle
WB is Idle
@+100
WU -> WB : URL
WU is Waiting
WB is Processing
@+200
WB is Waiting

@enduml

Use PlantUML to draw UML timing diagrams quickly

UML state machine diagram

For the PlantUML text description of this example, please see our article about state machine diagrams.
The Reconnecting sub-state diagram converted into text with PlantUML and a diagram generated automatically in draw.io

Non-UML diagram examples

Gantt chart

@startgantt
  [Design] lasts 5 days
  [Tests] lasts 5 days
  [Production system programming] lasts 20 days
  
  [Tests] starts at [Design]'s end
  [Production system programming] starts at [Design]'s end

  [Design] is 100% complete
  [Tests] is 50% complete
  [Production system programming] is 5% complete
@endgantt

Add percentage complete to your PlantUML Gantt charts to show task progress

Concept maps and tree diagrams

PlantUML uses the Graphviz/DOT language for non-UML diagrams.

@startuml
digraph UMLdiagrams {
edge [arrowhead=none]
node [style=rounded]
 UML -> Structure [color=lightblue];
 UML -> Behavior [color=orange];
   Structure -> {Class Package Object CompositeStructure Component Profile Deployment} [color=lightblue];
   Behavior -> {Activity UseCase StateMachine Interaction} [color=orange];
     Interaction -> {Sequence Communication Timing InteractionOverview} [color=gold];}
@enduml

Add Colours to your tree diagrams and concept maps to separate sections clearly when using PlantUML in draw.io

Mindmaps

See our earlier article about creating mindmaps from text for the PlantUML text description of this example.
Mindmaps are easy to create from text with draw.io and PlantUML

Follow us on GitHub, Twitter, Facebook.

Share: