Use PlantUML in 16 Feb 2023


With PlantUML in using our web application ( 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 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.

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 editor, select Arrange > Insert > Advanced > PlantUML from the menu.
    Draw diagrams quickly from PlantUML text descriptions in
  2. Enter the PlantUML in the text field.
    When you input PlantUML into, 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 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

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

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

Learn more about UML sequence diagrams

UML use case diagram

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)

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.

:Find Barista;
:Greet Customer;
:Request latte;
:Write details on cup;
:Buy latte;
if (Payment Accepted?) then (yes)
#lightgreen:Make latte;
else (no)
:Drink latte;
note right
  //Feel perky//
end note

Use swimlanes in PlantUML activity diagrams

Learn more about UML activity diagrams

UML timing diagrams

robust "Browser" as WB
concise "User" as WU
WU is Idle
WB is Idle
WU -> WB : URL
WU is Waiting
WB is Processing
WB is Waiting


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

Non-UML diagram examples

Gantt chart

  [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

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.

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];}

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


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 and PlantUML

Follow us on GitHub, Twitter, Facebook.