PlantUML Plugin

Edit and preview PlantUML diagrams in Visual Studio Code: code, split (code + diagram), or diagram only in one tab, with live SVG preview and export to PNG or SVG. Diagrams are rendered by the PlantUML server URL you configure.

PlantUML Plugin — edit source, live SVG preview, export

Sample diagram source: examples/visual-pipeline-sample.puml (bundled with the extension). Regenerate the PNG with the PlantUML CLI or Docker (see comments in that file).

If the image does not show in Markdown Preview, enable Settings → Markdown › Preview: Allow Unsafe Local Images (markdown.preview.allowUnsafeLocalImages), or open the repo folder as the workspace root so ./media/... resolves correctly.

Tests: npm test (Extension Host). npm run test:coverage:unit (Node + c8). See docs/testing.md.

Features

Live diagram preview (SVG); drag to pan; Ctrl/Cmd + mouse wheel zooms toward the cursor (plain wheel scrolls)
Export to PNG or SVG
Optional refresh while you type (debounced)
PlantUML syntax highlighting and Format Document
Local !include file resolution

Getting started

Open a .puml, .plantuml, .pu, or .wsd file (the custom editor opens by default).
Use the Command Palette (Preview PlantUML), the editor title bar, or the webview toolbar to switch view modes and refresh.

Settings

Open Settings and search PlantUML Plugin (or edit settings.json). All keys are under the plantumlViewer.* prefix.

Setting	Type	Default	Description
`plantumlViewer.serverUrl`	`string`	`https://www.plantuml.com/plantuml`	Base URL of your PlantUML server (no trailing slash). Empty uses the built-in default. Diagram content is sent there for rendering — use a server you trust.
`plantumlViewer.autoRefresh`	`boolean`	`true`	Refresh the diagram while editing (debounced) when a diagram mode is active.
`plantumlViewer.autoRefreshDelayMs`	`number`	`500`	Delay (ms) after you stop typing before auto-refresh runs (50–30000).
`plantumlViewer.requestTimeoutMs`	`number`	`45000`	Maximum time (ms) for each HTTP request to the PlantUML server (1000–600000).
`plantumlViewer.previewZoom`	`number`	`1`	Diagram scale in the webview (`1` = 100%, range 0.25–3). Ctrl/Cmd + wheel zooms toward the cursor.
`plantumlViewer.diagramPreamble`	`string`	`""`	Optional text inserted before the diagram (after `!include` expansion), e.g. `!theme` or `skinparam`, depending on server support.
`plantumlViewer.showStatusBarActions`	`boolean`	`true`	Show Refresh and Export in the status bar when the PlantUML custom editor tab is active.
`plantumlViewer.showModeCodeLens`	`boolean`	`false`	Show a refresh CodeLens in the plain text editor (when the file is opened as text instead of the custom editor).
`plantumlViewer.showWebviewToolbar`	`boolean`	`true`	Show Mode / Refresh / Export controls in the top-right of the custom editor webview.
`plantumlViewer.visualTheme`	`string`	`modern-dark`	Visual pipeline: extra skinparams + SVG polish. Values: `none`, `modern-dark`, `glass`, `minimal`. See below.
`plantumlViewer.visualSemanticColors`	`boolean`	`true`	When the visual theme is active, add semantic skinparam hints from keywords (e.g. user, API, database).
`plantumlViewer.visualSvgEnhancements`	`boolean`	`true`	After rendering, inject SVG defs (shadows, gradients) and light CSS for hover polish. Turn off for raw server SVG or if the diagram looks clipped.

`plantumlViewer.visualTheme` values

Value	Role
`none`	No automatic pipeline; server output + your `diagramPreamble` only.
`modern-dark` (default)	Extension visual pipeline: light, modern palette (historical id — not a dark UI). Stereotype accents, spacing, soft shadows on dense diagrams.
`glass`	Cool frosted palette with indigo accents; softer hover.
`minimal`	Thin strokes, very light shadows.

Default pipeline example (same as omitting visualTheme):

"plantumlViewer.visualTheme": "modern-dark",
"plantumlViewer.visualSemanticColors": true,
"plantumlViewer.visualSvgEnhancements": true

Raw server output only:

"plantumlViewer.visualTheme": "none"

PlantUML `!theme` in the diagram (server)

Only names supported by your PlantUML server work in the .puml file — see plantuml.com/theme. Examples (availability depends on server version): plain, cerulean-outline, cerulean, aws-orange, superhero, materia, metal, lightgray, cyborg-outline, …

!theme plain is a neutral baseline; with default extension settings, the extension can still add skinparams and SVG polish on top (unless layout skinparams in your file take over — see docs/visual-rendering.md).

Do not use modern-dark, glass, minimal, or none after !theme in the diagram. Those are not server theme names — the server may return HTTP 400 (“Cannot load theme …”). They are only valid for plantumlViewer.visualTheme in Settings.

With !theme plain, the extension can inject a style block after that line in the text sent to the server. diagramPreamble in Settings is still prepended before the whole file.

Default diagram font is DejaVu Sans (typical on Linux/Docker servers). Line-crossing “jumps” are not supported by PlantUML/Graphviz — see docs/visual-rendering.md.

Install from a local `.vsix`

After npm run vscode:package at the repository root, install the generated file (the filename follows version in package.json; example for the current release: plantuml-plugin-manorfm-0.11.14.vsix):

code --install-extension plantuml-plugin-manorfm-0.11.14.vsix

You can also use Extensions → ⋯ → Install from VSIX….

Privacy

Diagram source is sent to the server URL you configure. Use a local or private server for sensitive content.

License

MIT — see the repository.

Issues & source: GitHub

PlantUML Plugin

Manoel Medeiros

PlantUML Plugin

Features

Getting started

Settings

plantumlViewer.visualTheme values

PlantUML !theme in the diagram (server)

Install from a local .vsix

Privacy

License

`plantumlViewer.visualTheme` values

PlantUML `!theme` in the diagram (server)

Install from a local `.vsix`