Setup PlantUML with docker and Visual Studio Code locally

PlantUML is a great … I will call it tool for creating so many different diagrams – Sequence, Usecase, Class, State, Deployment and more. It allow to be used from the internet server, but today I will talk on setting it up locally.

First you need to start the docker container. Here I am assuming you already have Docker installed and running. You can see the docker hub page here. It is up to you if you want to pick jetty or the tomcat version. I will go with the jetty one.

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

The command above will install the PlantUML server locally.

You can test that it was successful by opening http://localhost:8080. You should see something like that.

Next step is to install the PlantUML extension to Visual Studio Code.

Once installed go and edit the settings

Make sure the server is pointing to http://localhost:8080

Create new file SequenceDiagram.puml (Note that by default these are the supported types: .wsd, .pu, .puml, .plantuml, .iuml)

I have pasted the example from PlantUML website

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

To see the preview use Alt+D while you are in the .puml file. This will open the PlantUML Preview window on the right side of the text editor for the diagram.