Using plantuml within a markdown document
Asked Answered
P

9

15

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?

Peephole answered 3/4, 2021 at 18:40 Comment(3)
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?Plenteous
Several sites seem to suggest that this is possible. (e.g. 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.Peephole
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.Stratigraphy
A
12

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

markdown extension pack

markdown plantuml preview

Antiseptic answered 26/11, 2021 at 7:8 Comment(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 ReviewZootomy
T
3

If you're using VSCode, you need install extensions:

  1. Markdown Plantuml Preview
  2. Markdown Preview Enhanced

Then download Plantuml Jar

Open VSCode:
Press F1, search and choose Open User Settings
Search markdown-preview-enhanced.plantumlJarPath
Set path for Plantuml Jar
Example: C:\plantuml-gplv2-1.2023.12.jar

Try code and preview:

```plantuml
A -> B: abc
```

Prerequisite: You have installed and set the path for java

Turnbull answered 7/12, 2023 at 3:37 Comment(1)
I only needed Markdown Preview EnhancedPredetermine
P
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.

Plenteous answered 4/4, 2021 at 15:12 Comment(2)
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.Peephole
@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.Plenteous
A
1

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

Abvolt answered 29/7, 2021 at 16:8 Comment(0)
B
1

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

Blackcap answered 7/3, 2022 at 18:57 Comment(0)
P
0

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.

Plenipotentiary answered 8/2, 2022 at 20:2 Comment(0)
G
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.

Goldbrick answered 20/4, 2022 at 15:29 Comment(0)
T
0

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

Temekatemerity answered 24/8, 2022 at 0:2 Comment(0)
B
0

Support always depends on the engine or tool that's rendering the Markdown output as Markdown has no direct support for PlantUml embedding. Before using any Markdown that uses PlantUml always make sure that your output platform supports PlantUml.

VS Code supports it with an addin. Markdown Monster (on Windows) has built in support for PlantUml rendering and output to PDF/HTML.

PlantUml rendering in Markdown Monster

Boehmenist answered 10/6, 2024 at 20:49 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.