PlantUML

PlantUML is an application that allows you to quickly write different kind of diagrams (UML and non-UML).

Based on some instructions, you can build and export diagrams to different formats (png, SVG, etc). Check the online guide to discover the different options for creating diagrams.

I love the PlantUML extension for VSCode for generating diagrams without leaving my code editor.

It is possible to install the extension and use the online server for create diagrams, but for privacy reasons the recommended approach is installing locally the server.

Run PlantUML server locally

To be able to run the server you have to follow these steps:

1. Download and install Java.

2. Install Graphviz, necessary for some complex diagrams.

   brew install graphviz
   

3. Download the file plantuml.jar from Plantum official page or from github releases.

Now you are ready to go! Just simply execute the following in the command line to run the server:

java -jar plantuml.jar -picoweb:8000

Run PlantUML with Docker image

It is possible getting a Docker image instead of installing locally.

1. Open Docker and download the PlantUML server image. You can pull it executing:

   docker pull plantuml/plantuml-server
   

2. Run the image, by default the container image runs in 8080 port. You can use for example port 8000 with the following command:

   docker run -d -p 8000:8080 plantuml/plantuml-server
   

PlantUML VSCode settings

These are the settings related to PlantUML extension:

{
  "plantuml.server": "http://localhost:8000",
  "plantuml.render": "PlantUMLServer",
  "plantuml.diagramsRoot": "docs/diagrams/src",
  "plantuml.exportOutDir": "docs/diagrams/out",
  "plantuml.exportSubFolder": false
}

Creating diagrams from VSCode

Run the Plantum server locally and create a new file under docs/diagrams/src folder, hello.puml for example, with this content:

@startuml hello
Alice -> Bob: test
@enduml

Write PlantUml at VSCode command palette and select PlantUML: Preview Current Diagram (or press Option + D keystroke).

If everything is working as expected, you should be able to see the preview for the diagram.

Now, you can write and select in the command palette PlantUML: Export Current File Diagrams and export the diagram to png, SVG or txt.