Using plantuml within a markdown document

Question

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.

Markdown code

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.

Is there anything I am missing?

[Markdown](https://daringfireball.net/projects/markdown/) has no support for PlantUML (or LaTeX, or Mermaid, or anything like that). Some _implementations_ have added support for things like this. Which Markdown implementation are you trying to use? What makes you think this should work? — ChrisGPT was on strike, Apr 03 '21 at 20:11
Several sites seem to suggest that this is possible. (e.g. https://www.freecodecamp.org/news/inserting-uml-in-markdown-using-vscode/). But you are right to suggest that this may depend on implementations. I am using the standard markdown version that is provided by visual studio code. — Heijne, Apr 04 '21 at 06:00
Is this question specifically about the VS-code plugin, or about rendering PlantUML inside Markdown files? Please be more specific what does not work and [edit] to ask a specific question. — hc_dev, Dec 19 '22 at 16:10

score 9 · Answer 1 · answered Nov 26 '21 at 07:08

9

Installing 2 additional extensions was required for me to get this to work:

markdown extension pack

markdown plantuml preview

answered Nov 26 '21 at 07:08

WonkoTheSane

91
1
1

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30437863) – AfterFray Nov 29 '21 at 08:37

score 2 · Answer 2 · answered Apr 04 '21 at 15:12

2

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.

answered Apr 04 '21 at 15:12

ChrisGPT was on strike

127,765
105
273
257

Installing (and re-installing) PlantUML does not work. It is possible to make UML diagrams directly using this tool, but it does not work within a markdown document. – Heijne Apr 05 '21 at 17:50
@Heijne, I'm just seeing this comment now. Did you install the Visual Studio Code _extension_ called `plantuml`? It sounds like you're installing the standalone tool. – ChrisGPT was on strike Sep 23 '21 at 18:17

score 2 · Answer 3 · answered Jul 29 '21 at 16:08

The VSCode extension, Markdown-PDF will export a Markdown file to PDF and HTML.

The extension supports PlantUML and also Mermaid.

Check the extension's page for how to begin & end PlantUML blocks, you don't need ```

More info here: https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

Also, since June 2021, VSCode supports KaTeX in Markdown: https://code.visualstudio.com/updates/v1_58#_math-formula-rendering-in-the-markdown-preview

score 1 · Answer 4 · answered Mar 07 '22 at 18:57

1

I wrote a CLI tool to allow you to embed PUML diagrams into your code https://github.com/danielyaa5/puml-for-markdown

answered Mar 07 '22 at 18:57

Daniel Kobe

9,376
15
62
109

score 0 · Answer 5 · answered Feb 08 '22 at 20:02

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.

score 0 · Answer 6 · answered Apr 20 '22 at 15:29

0

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.

answered Apr 20 '22 at 15:29

Thirumalai Chellam Balagopalan

93
1
9

score 0 · Answer 7 · answered Aug 24 '22 at 00:02

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:

VSCode-reveal extension - the latest version supports PlantUML in the markdown.
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.

Using plantuml within a markdown document

Markdown code

7 Answers7