Using plantuml within a markdown document

Viewed 8137

At the moment I am trying to make a presentation using markdown. In order to include an UML diagram I want to use PlantUML. The code is written in the document below. I am of the understanding, that this should work. However it does not. Of course there is a solution to create the UML diagrams outside separately and include the in markdown. This however would make the document less self contained. Is there anything I am missing.

Here is (part of) the code:

---
Previous slide

---

# diagram

```plantuml
@startuml
  class Example {
    - String name
    - int number 
    
    +void getName()
    +void getNumber()
    +String toString()
  }
@enduml
```

---
Next slide

---

This blog post suggests that this should work.

7 Answers

The documentation you linked to doesn't say that PlantUML support is built into Markdown, or even into the VSCode Markdown plugin. It asks you to install an extension:

With a single extension, you can visualize UML diagrams in VS Code's preview panel.

That extension is called plantuml, and you can install it either by searching for it in the extensions panel… or simply by running the following from a terminal pane…

ext install plantuml

Install the plantuml extension then try again.

As mentioned in the (at the time of writing) top voted answer and the blog post linked in your question, you first need to install the PlantUML plugin.

After doing so, previewing .puml files worked for me, however, previewing .md files containing PlantUML code in code blocks as described in the linked blog post didn't work. If I understand you correctly, this is exactly what you experienced.

The symptoms match the ones described in issue #449 and issue #426 of the plugin repository. The rough gist:

  • Rendering .puml files uses a local PlantUML renderer installed on your machine, which works out of the box.
  • Rendering PlantUML diagrams in .md files is done using a remote server (the local renderer does not work for some reason), whose URL needs to be manually entered into your VSCode configuration.

Suggested fix: You need to provide a URL for the "PlantUML server" in configuration, see this comment on issue #449 for details.

I wanted the same thing in VS Code. After I installed the PlantUml extension, I also installed Markdown Preview Enhanced extension. This is mentioned on the blog post under Further functionality section.

I have used two ways (in VSCode) to do presentations with PlantUML diagrams, both with reveal.js as an engine and markdown as a format:

  1. VSCode-reveal extension - the latest version supports PlantUML in the markdown.
    enter image description here

  2. Quarto presentations in revealjs is a very powerful tool, and as such requires much more configuration (but the documentation and support is superb). You have to also install a pandoc filter called diagram-generator to support the PlantUML inside the markdown.
    enter image description here

Related