PlantUMLやMermeidを含むMarkdownをVisual Studio Code上でPDF化する方法

Last updated at 2025-03-27Posted at 2025-03-27

はじめに

PlantUMLやMermaidを含むMarkdownをVisual Studio Code上でPDF化する方法を紹介する。

Visual Studio Code（VS Code）上でMarkdownをPDF化するには、Markdown PDFを使う。基本的な使い方は、こちらの記事を参照。

ここでは、UMLなどを記述できるPlantUMLやMermaidを描画できるように追加の設定方法を示す。

VS Codeの拡張機能から、Markdown PDFと検索し、⚙ボタンを押して設定を開く。

設定の上部の検索窓に、plantumlと打つとPlantUMLに関する設定を絞り込める。

独自にPlantUMLサーバを立てている場合、以下に示す「Plantuml Server」にPlantUMLサーバを指定する。

PlantUMLのPDF化は、デフォルトだと、@startumlと@endumlで囲まれた領域が対象となる。
以下のようなPlantUMLをPDF化したい場合は、開始・終了タグを設定する必要がある。

Markdown内のPlantUMLの例

```plantuml
@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml
```

開始タグは、「Plantuml Open Marker」で任意の開始タグを設定できる。上記の例の場合は、```plantumlを設定する。

終了タグは、「Plantuml Close Marker」で任意の終了タグを設定できる。上記の例の場合は、```となる。

Mermaidは、```mermaidと```で囲まれた領域が対象となる。

Markdown内のMermaidの例

```mermaid
stateDiagram
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }
```

デフォルトのMermaidサーバの設定だとV9のため、レンダリングできない場合がある。
例として、V10（10.4.0）を利用するには、「Mermaid Server」を、以下のように変更する。

https://cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js
image.png

Markdownファイルを開いて、右クリックをおして、「Markdown PDF: Export (pdf)」を押す。

以下のエラーとなる場合は、こちらの記事を参照。

Markdown PDF: Export(pdf)のエラー

Error: Failed to launch the browser process! TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

PlantUMLやMermaidを含むMarkdownをVisual Studio Code上でPDF化する方法を紹介した。PlantUMLは、開始・終了タグの設定、Mermaidは、サーバの設定をすることで、PDF化が可能になるので試してみてほしい。