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

# はじめに

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

# 動作確認環境
* Ubuntu 22.04
* Visual Studio Code 1.98.2
  * Markdown PDF 1.5.0 

# 方法

Visual Studio Code（VS Code）上でMarkdownをPDF化するには、[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)を使う。基本的な使い方は、[こちらの記事](https://qiita.com/P-man_Brown/items/93b156d47ee1887fb2b6
)を参照。

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/3ee926e6-fa37-4dc2-94e6-749353e48065.png)

## PlantUMLの設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/9107160f-9395-40d2-ab3c-88c45ad9e879.png)

### PlantUMLサーバの設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/89b8b4a8-cc33-45da-a0ac-827482da6ecc.png)

#### 開始・終了タグの設定

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

~~~markdown:Markdown内のPlantUMLの例
```plantuml
@startuml
Bob -[#red]> Alice : hello
Alice -[#0000FF]->Bob : ok
@enduml
```
~~~

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/189e235d-7485-4c08-8ddd-3daabef99ddc.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/59ce5517-ffcd-4e5b-bc07-1e1de9a16519.png)

## Mermaid

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

~~~markdown:Markdown内のMermaidの例
```mermaid
stateDiagram
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }
```
~~~

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

### Mermaidサーバの設定

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/6ccf3e1c-4c53-4ee7-b179-d940d04024fc.png)


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

## PDF化

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638977/68cae703-bb50-4162-bffe-24fcc96250d9.png)

以下のエラーとなる場合は、[こちらの記事](https://qiita.com/nanzhihutailang/items/30ffadea5ec4fec43388)を参照。

```powershell: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化が可能になるので試してみてほしい。

# 参考

https://hub.docker.com/r/bladerunner2020/markdown-to-file

https://qiita.com/P-man_Brown/items/93b156d47ee1887fb2b6

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

https://github.com/wll8/markdown-to-file

https://github.com/wll8/markdown-to-file?tab=readme-ov-file#markdown-pdfplantumlopenmarker

https://github.com/yzane/vscode-markdown-pdf/issues/162


https://github.com/yzane/vscode-markdown-pdf/issues/342

https://qiita.com/nanzhihutailang/items/30ffadea5ec4fec43388