Integrating PlantUML with VSCode using Windows 10, WSL2, Dockerised PlantUML Server and "jebbs.plantuml" VSCode Extension

vscode_plantuml_docker.md

There is no need to install Java or Graphviz on your Windows 10 Desktop. These are contained neatly within a Docker Container.

Prerequisites

• Windows 10
• WSL2 (Ubuntu) - optional
• VSCode
• Docker Desktop

Setup

• Install jebbs.plantuml VSCode extension for PlantUML rendering.

• Start PlantUML Server within Docker (note, port is mapped to 8888):

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

• Update VSCode User Settings to point to PLantUML Server. The port is 8888 as above:

  {
    "plantuml.server": "http://localhost:8888",
    "plantuml.render": "PlantUMLServer",
  }

  • This can be either your global settings.json or within each repo's /.vscode/settings.json.
  • If you're running WSL2, ensure the settings.json file you're editing is within WSL eg /home/brett/.vscode-server/data/Machine/settings.json and not within C:\Users\. Optionally, you may apply to the workspace if appropriate eg /.vscode/settings.json of the repo.

Usage

• Ensure PlantUML is running in Docker container. Run command docker ps and if not running, run the above docker run command.

• Within VSCode, create a new PlantUML diagram (eg hello-world.plantuml)

• ALT + D to preview the PlantUML diagram.

Thanks!