Skip to main content

Insert a PlantUML diagram

Note: The PlantUML feature is partial implementation of PlantUML syntax. It is provided as-is and not intended as a complete replacement for a full PlantUML server.

The older implementation of PlantUML relied on a server to generate the diagram. The newer implementation runs client-side in your browser and allows you to edit the PlantUML description and regenerate your diagram inside the PlantUML container on the drawing canvas.

PlantUML is an alternative syntax, similar to Mermaid, that can be used to describe a range of diagrams in text. Originally, it was designed to support the many types of UML diagrams.

Insert a PlantUML diagram​

  1. In draw.io, select Arrange > Insert > Advanced > PlantUML from the menu or click + > Advanced > PlantUML in the toolbar.
  2. Describe your diagram in the left text box. Click Preview to see how your diagram will render and check for any errors.
    Insert PlantUML to generate a diagram in draw.io via Arrange > Insert > Advanced > PlantUML
  3. Click Insert to add it to the drawing canvas inside a PlantUML container.
    Insert PlantUML to generate a diagram in draw.io via Arrange > Insert > Advanced > PlantUML

By default, the Diagram option is selected in the PlantUML dialog, which will render the diagram inside a transparent PlantUML container on the drawing canvas. There are three icons in the top left.
PlantUML containers on the drawing canvas in draw.io have three icons - lock, move and edit

  • Click the Lock icon to lock the container so you can not edit the layout, add shapes, or connect to elements inside the PlantUML container.
  • Click and drag the crossed arrows in the top right to move the PlantUML container around on the drawing canvas.
  • Click on the pen Edit icon to open the PlantUML and make changes.

While you can now add shapes into this PlantUML container, they won't be reflected in the PlantUML code. For example, the following red arrow in this PlantUML sequence diagram - it is connected to the two lifelines, but not visible in the PlantUML syntax.
You can add additional shapes and connectors to PlantUML containers but these won't be added to the PlantUML syntax

Insert a PlantUML image​

  1. Select Arrange > Insert > Advanced > PlantUML from the draw.io menu.
  2. Describe your diagram using PlantUML, and select Image from the dropdown list, then click Insert.
    Insert PlantUML to generate a image on the drawing canvas in draw.io via Arrange > Insert > Advanced > PlantUML, then select Image before inserting the diagram

Your image will be added to the drawing canvas. Click on the pen Edit icon to change the PlantUML and regenerate the diagram image. You can't add or connect to diagram elements inside the PlantUML image.

As a comparison, the PlantUML syntax was inserted as an editable Diagram on the left and as an uneditable Image on the right.
When PlantUML is inserted as a Diagram, you can add shapes and connectors. When inserted as an Image, PlantUML diagram, you can't do this.

Convert an old PlantUML diagram​

  1. Hover over the PlantUML diagram image in your draw.io diagram and you'll see the shape data contains the PlantUML code.
    Older versions of draw.io added PlantUML diagrams to the drawing canvas as SVG images - you can convert these to the newer PlantUML container shape
  2. Right click and select Edit Data. Alternatively, select the PlantUML SVG image and press Ctrl+M or Cmd+M.
    Convert old PlantUML SVG images via the context menu - select Edit Data or press Ctrl+M
  3. Copy the PlantUML syntax from the plantUmlData shape property, from @startuml to @enduml but not the other data outside this description.
    Copy the PlantUML syntax from the shape data
  4. Remove all the extra /n new line characters and reinsert the PlantUML following the steps above.
    Remove the newline characters from the PlantUML syntax and insert it via Arrange > Insert > Advanced > PlantUML

The diagram will be inserted onto the drawing canvas into a PlantUML container.
The newer PlantUML containers may not render all elements of the PlantUML syntax correctly as this feature is in active development

Note: As this feature is actively being developed, not all formatting or features may be supported. In the example above, you can see the icons and the legend are not rendered correctly. Please report issues in the drawio GitHub repository.