VS Codeに「Markdown Preview Enhanced」拡張機能を導入して、PlantUMLを含むMarkdownを快適に閲覧する環境を構築する方法を示す。

Markdown Preview Enhancedとは

標準のマークダウンビューワでは表示できない記法などを拡張する拡張機能。コードブロックに行数表示を加えたり、数式の挿入が可能となる。

想定環境

以下のコマンドを実行し、Javaをインストールする。

winget install Microsoft.OpenJDK.21

※適宜、最新のバージョンをインストールすること。

以下のコマンドを実行し、Graphvizをインストールする。

winget install Graphviz.Graphviz

以下から最新のPlantUMLのJarファイル（plantuml-1.2025.0.jarなど）をダウンロードして、フォルダに配置する。

VS Codeで「Markdown Preview Enhanced」拡張機能をインストールする。

VS CodeでCtrl + ,を押してSettingsを開き、markdown-preview-enhanced.plantumlJarPathの項目に、jarファイルの絶対パス（C:\MyPrograms\plantuml-1.2025.0.jarなど）を設定する。

Markdownファイルを作成し、次のコードブロックを追加する。

```plantuml
@startuml
Alice -> Bob: Hello
@enduml
```

Markdownファイルを開き、Ctrl + Shift + Vを押してMarkdown Preview Enhancedを開き、以下のようなPlantUMLの図が表示されることを確認する。