'Using plantuml within a markdown document
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.
Solution 1:[1]
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.
Solution 2:[2]
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
Solution 3:[3]
Installing 2 additional extensions was required for me to get this to work:
Solution 4:[4]
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.
Solution 5:[5]
I wrote a CLI tool to allow you to embed PUML diagrams into your code https://github.com/danielyaa5/puml-for-markdown
Solution 6:[6]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Chris |
Solution 2 | Pete |
Solution 3 | WonkoTheSane |
Solution 4 | TuringTux |
Solution 5 | Daniel Kobe |
Solution 6 | Thirumalai Chellam Balagopalan |