Markdown Preview EnhancedのPlantUML描画が急にできなくなった

# 環境
Markdown Preview Enhanced: v0.7.10

# TL;DR

**エラーメッセージ**
```
Error: plantuml.jar file not found: ""

Please download plantuml.jar from https://plantuml.com/download.  


If you are using VSCode, then please set the setting "markdown-preview-enhanced.plantumlJarPath" to the absolute path of plantuml.jar file. 

If you don't want to use plantuml.jar, then you can use the online plantuml server 
by setting the setting "markdown-preview-enhanced.plantumlServer" to the URL of the online plantuml server, for example: https://kroki.io/plantuml/svg/
```

**解消方法**
エラーメッセージの指示通りに以下のいずれを実施する。
* オンラインの[PlantUMLサーバー](#plantumlサーバー)を指定する
* plantuml.jarを[ダウンロード](#ダウンロード)する

# 事象
数ヶ月ぶりにシーケンス図を修正しようと、VSCodeでMarkdownファイルを開きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/96fab1f6-e9e9-84ff-7e94-b21175bc3e3a.png)

右クリック→「Markdown Preview Enhanced: Open Preview to the Side」と、
これで以前作ったシーケンス図が出て…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/58db5d03-5af5-84f3-7b11-8575a18d9f75.png)
**来ません！！！**
なんじゃこりゃ…何やらエラーメッセージが表示されました。
```
Error: plantuml.jar file not found: ""

Please download plantuml.jar from https://plantuml.com/download.  


If you are using VSCode, then please set the setting "markdown-preview-enhanced.plantumlJarPath" to the absolute path of plantuml.jar file. 

If you don't want to use plantuml.jar, then you can use the online plantuml server 
by setting the setting "markdown-preview-enhanced.plantumlServer" to the URL of the online plantuml server, for example: https://kroki.io/plantuml/svg/
```

# 原因
https://github.com/shd101wyy/vscode-markdown-preview-enhanced/issues/1738

Markdown Preview Enhancedのv0.7.xからplantuml.jarを含まないようにしたのが原因です。
PlantUMLの描画に必要のplantuml.jarがないためのエラーですね。
v0.7.xは2023年9月リリースなので、それ以降にアップデートを実施した人は要注意です。
自動更新ONの人も！ *←私*

# 対処法
エラーメッセージが非常に親切で、2つの対処法が提示されました。
* オンラインのPlantUMLサーバーを指定する
* plantuml.jarをダウンロードする

## PlantUMLサーバー
まずはオンラインのPlantUMLサーバーを利用する場合です。
設定項目にPlantUMLサーバーのURLを記載します。
エラーメッセージで例として挙げられたのは https://kroki.io/plantuml/svg/ です。
GitHub Issueでは https://www.plantuml.com/plantuml/svg/ も挙げられています。
PlantUMLサーバーならなんでも大丈夫だと思いますが、本記事ではKroki.io前提で進みます。

設定項目の編集方法をsettings.jsonの編集とGUI操作で分けましたので、やりやすい方をお選びください。

### settings.json

VSCodeのコマンドパレットを開きます。
「settings json」などを入力して、`Preference: Open User Settings (JSON)`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/2d401bd4-7082-0c46-b5d9-00700b247d5d.png)

JSONファイルが開きましたら、PlantUMLサーバーのURLを追記して、保存します。
```settings.json
"markdown-preview-enhanced.plantumlServer": "https://kroki.io/plantuml/svg/",
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/3bfa4f00-02c2-523b-906c-bf7a296594a5.png)

表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/a6d22c51-91c0-de7e-98bd-adc01552f7fa.png)

### GUI

拡張機能からMarkdown Preview Enhancedのページを開きます。
歯車アイコンをクリックし、`Extension Settings`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/0448a4d8-4d9c-89a7-3a9d-c9b73006bd04.png)

Markdown Preview Enhancedの設定項目一覧が表示されるので、スクロールして`Markdown-preview-enhanced: Plantuml Server`を探します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/42b388fc-8ea6-5064-83bc-d5f7ebf02bdc.png)

PlantUMLサーバーのURLを記入します。
```
https://kroki.io/plantuml/svg/
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/fb7df8c8-c4fd-e17f-ea04-ca50adad8f00.png)

表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/a6d22c51-91c0-de7e-98bd-adc01552f7fa.png)

### 問題点
オンラインのPlantUMLサーバーは手軽に設定できますが、デメリットはなんと言ってもオフラインで使えないことです。
オフラインで利用しようとすると、以下のようにエラーメッセージが表示されて、描画ができません。
```
FetchError: request to https://kroki.io/plantuml/svg/ failed, reason: getaddrinfo ENOTFOUND kroki.io
```

## ダウンロード
オンラインのPlantUMLサーバーのデメリットをカバーするのがplantuml.jarをダウンロードする方法です。
ローカルにplantuml.jarを配置することで、ネット環境に左右されずに利用できます。

ファイルダウンロードの後、設定項目の編集方法をsettings.jsonの編集とGUI操作で分けましたので、やりやすい方をお選びください。

### ファイルダウンロード
まずはplantuml.jarをダウンロードします。

https://plantuml.com/download から最新版をダウンロードできます。
ライセンスが異なるバージョンがあるようですが、推奨バージョンはGPLです。
特にこだわりがなければGPLバージョンがいいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/862131f0-eef5-bb5f-6096-6b71db6a3ea9.png)

https://github.com/plantuml/plantuml/releases から過去バージョンをダウンロードすることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/af2c0a23-d9c0-29ad-9cb4-248b6b68e1d1.png)

ローカルに適宜にファイルを配置し、**絶対パス**を控えておきます。

### settings.json

VSCodeのコマンドパレットを開きます。
「settings json」などを入力して、`Preference: Open User Settings (JSON)`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/2d401bd4-7082-0c46-b5d9-00700b247d5d.png)

JSONファイルが開きましたら、plantuml.jarの絶対パス（適宜にエスケープ）を追記して、保存します。
```settings.json
"markdown-preview-enhanced.plantumlJarPath": "C:\\Users\\aaa\\bbb\\plantuml.jar",
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/23704040-7b3e-e674-27f7-dfc1f3c6fd82.png)

表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/a6d22c51-91c0-de7e-98bd-adc01552f7fa.png)

### GUI

拡張機能からMarkdown Preview Enhancedのページを開きます。
歯車アイコンをクリックし、`Extension Settings`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/0448a4d8-4d9c-89a7-3a9d-c9b73006bd04.png)

Markdown Preview Enhancedの設定項目一覧が表示されるので、スクロールして`Markdown-preview-enhanced: Plantuml Jar Path`を探します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/7612c9e1-89ed-c17f-0f5a-3154f640d247.png)

plantuml.jarの絶対パスを記入します。
```
C:\Users\aaa\bbb\plantuml.jar
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/45b5b727-ccaf-720e-545e-0a9788363d77.png)

表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243366/a6d22c51-91c0-de7e-98bd-adc01552f7fa.png)