在Markdown文档中使用PlantUML

Question

在Markdown文档中使用PlantUML

markdownplantuml

11

目前我正在尝试使用Markdown制作演示文稿。

为了包含UML图表，我想使用PlantUML。

代码写在下面的文档中。我理解这应该可以工作。但是它并没有。

当然，有一种解决方案是在Markdown之外创建UML图表，然后将其包含在其中。但是这会使文档不那么自包含。

Markdown代码

以下是（部分）代码：

---
Previous slide

---

# diagram

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

---
Next slide

---

这篇博客文章建议这应该可以工作。

我有什么遗漏的吗？

- Heijne

Markdown 不支持 PlantUML（或 LaTeX、Mermaid 或其他类似的东西）。一些实现已经添加了对这些内容的支持。你正在尝试使用哪个 Markdown 实现？是什么让你认为它应该工作？ - Chris

有几个网站似乎表明这是可能的（例如https://www.freecodecamp.org/news/inserting-uml-in-markdown-using-vscode/）。但你提出这可能取决于实现方式是正确的。我正在使用Visual Studio Code提供的标准Markdown版本。 - Heijne

这个问题是关于VS-code插件还是关于在Markdown文件中渲染PlantUML？请更具体地说明哪些部分不起作用，并[编辑]以提出具体问题。 - hc_dev

7个回答

2

VSCode的扩展程序Markdown-PDF可以将Markdown文件导出为PDF和HTML。

该扩展支持PlantUML和Mermaid。

请查看扩展页面以了解如何开始和结束PlantUML块，您不需要```。

更多信息在此处： https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

另外，自2021年6月起，VSCode在Markdown中支持KaTeX： https://code.visualstudio.com/updates/v1_58#_math-formula-rendering-in-the-markdown-preview

- Pete

2

您链接的文档没有提到PlantUML支持已内置于Markdown或VSCode Markdown插件中。它要求您安装一个扩展程序：

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

安装 plantuml 扩展后再尝试。

- Chris

安装（和重新安装）PlantUML无法正常工作。使用此工具可以直接制作UML图表，但它无法在Markdown文档中工作。 - Heijne

@Heijne，我现在才看到你的评论。你是否安装了名为“plantuml”的Visual Studio Code扩展？听起来你正在安装独立工具。 - Chris

1

我写了一个CLI工具，可以让你将PUML图嵌入到你的代码中。https://github.com/danielyaa5/puml-for-markdown

- Daniel Kobe

0

我在VSCode中使用了两种方法来展示PlantUML图表，都是使用reveal.js作为引擎和markdown作为格式：

VSCode-reveal extension - 最新版本支持在 markdown 中使用 PlantUML。
Quarto presentations in revealjs 是一个非常强大的工具，因此需要更多的配置（但文档和支持非常好）。您还需要安装一个 pandoc 过滤器 called diagram-generator 来支持 markdown 中的 PlantUML。