Edit PlantUML images in VS Code with live previews.
git clone https://github.com/svdarren/plantuml-template.git
cd plantuml-template
The compose file will start the Jetty-based PlantUML container and publish port 9147.
docker compose up -d
Open this directory in VS Code. The command below will open the directory as a workspace, and also open this README.md file.
code . README.md
When prompted to install recommended extensions, install the PlantUML extension. The settings.json
file has been configured for the PlantUML server running at http://localhost:9147
.
The native Markdown Preview now render PlantUML inside the Markdown file.
- Open the Markdown preview by...
- Pressing the small icon in the top right. It's a magnifying lens over two pages.
- Opening the command palette and searching for 'Markdown: Open Preview' or 'Markdown: Open Preview to the Side'
- Pressing the keyboard shortcut (check the command palette for your OS'es shortcut)
- By default the content will be disabled, so press the blue button 'Some content has been disabled in this document' and enable at least 'Allow insecure local content'.
@startuml
A --> B
@enduml
Additionally, the plugin adds 'PlantUML: Preview Current Diagram' to the command palette. This option renders one diagram at a time and is useful while writing the diagram.
The plugin recognizes files with the *.wsd, *.pu, *.puml, *.plantuml, *.iuml
extensions.
Additionally, you can embed diagrams in Markdown, like this example below. Note that the Markdown image won't render in other locations without render support, but you could export the image publishing.