how to use the plantUML preview in VSCode?

Question

I am trying to use plantuml add-ons on VSCode: there are several but none of them is working. In this eample I am using the plantUML add-on.

As you can see on the second image the preview is blank.

Can you help me ?

Motheaten

Answer 1

I had the same issue. My preview started working right after I installed the Java Runtime Environment (JRE).

Cheeky

Thank you Bruno, I had same issue and installing JRE and reopening vs-code after worked. – Zenobiazeolite

For Ubuntu users: sudo apt install default-jre – Lorilee

I also to install sudo apt install graphviz and sudo apt install default-jre on Ubuntu 24.04. – Chlorohydrin

Answer 2

On windows, you can now use chocolatey:

choco install plantuml

You then have to restart VsCode for the previewer to properly work.

Mountaineering

Answer 3

the solution is:

You can open the diagram by hitting ALT + D to preview the PlantUML diagram on Windows and Option key + D on Mac.

Subatomic

This only tells OP how to generate a preview, that is not their problem. Their problem is they asked the extension to generate the preview but the extension didn't do it's job of generating the preview. @Bruno's answer tells them how to fix the generator failing. – Wharfinger

Answer 4

1. Download Java Runtime . Click "Instructions"

2. Install graphviz

sudo apt update
sudo apt install graphviz

3. Enjoy

Polarimeter

this seems like an incomplete answer? – Engleman

I also to install sudo apt install graphviz and sudo apt install default-jre on Ubuntu 24.04. – Chlorohydrin

Answer 5

The answer is right, however there is another issue too. I am going to post here the other issue for anyone wandering, because that issue is not on stackoverflow.

If you find the error:

• "No valid diagram found here!"

Than here are the answers:

• Previews shows "No valid diagram found here!" all the time
• No valid diagram found here

In short:

• As mentioned here, try to put the cursor somewhere between @startuml and @enduml, and then press ALT + D to open the preview. If the cursor is outside of the @startuml @enduml block, the "No valid diagrams found here!" error occurs.

Smokeless

Answer 6

My local server doesn't want to render. I changed server to plantuml.com See details here: https://skalolaskovy.ru/analytics/65-system-analytics/603-vs-code-does-not-generate-diagram (russian lang.)

Maihem

Thank you! My local JRE installation was blocked and this way I was able to generate previews :) – Tanberg

Answer 7

If you use plantUML on VSCode with WSL remote, try this :

sudo apt install plantuml

Thoughtout

An alright alternative, but OP is asking about the VS Code extension. – Lecia

this answer solved the problem in a round-about way by installing java if it isn't already installed. The accepted answer is a more direct solution. The VSCode extension comes bundled with the plantuml.jar so it isn't necessary to install it at a system level – Lorilee