VS Codeに「Markdown Preview Enhanced」拡張機能を導入して、PlantUMLを含むMarkdownを快適に閲覧する環境を構築する方法を示す。
Markdown Preview Enhancedとは
標準のマークダウンビューワでは表示できない記法などを拡張する拡張機能。 コードブロックに行数表示を加えたり、数式の挿入が可能となる。
想定環境
- Windows 11
- PowerShellからwingetが利用できること
手順
1. Javaをインストール
以下のコマンドを実行し、Javaをインストールする。
winget install Microsoft.OpenJDK.21
※適宜、最新のバージョンをインストールすること。
2. Graphvizをインストール
以下のコマンドを実行し、Graphvizをインストールする。
winget install Graphviz.Graphviz
3. PlantUMLのJarを配置
以下から最新のPlantUMLのJarファイル（plantuml-1.2025.0.jarなど）をダウンロードして、フォルダに配置する。
4. VS Code拡張機能のインストール
VS Codeで「Markdown Preview Enhanced」拡張機能をインストールする。
5. 設定を調整
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の図が表示されることを確認する。
