VSCodeでPlantUMLを使えるようにした

# 環境

* Windows 10
* Visual Studio Code 1.58.2
* Java 1.8.0_301
* Graphviz 2.48.0
* PlantUML 1.2021.9

# 導入

## 前提条件

* VSCodeがインストールされていること

## 作業ログ

以下ページを参考に、VSCodeにPlantUMLのプラグインをインストールする。
https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

### Javaのインストール

以下ページからJavaのインストーラーをダウンロードする。
https://java.com/en/download/

ダウンロードしたインストーラーを実行

![Java installation 1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/591730ea-df47-0b68-ec85-9366b6c0e9ce.png)

![Java installation 2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/630e6b0a-64dd-4829-29b1-0be68c2ab84d.png)

![Java installation 3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/4b05055b-d661-1bd6-9fab-09930ef66e1a.png)

Java6が既にインストールされているらしい。
何のアプリで使われているかわからないが、必要ならまたインストールすればいいやってことで、とりあえずアンインストールする。

![Java installation 4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/d7094372-62d7-aa31-cc70-385cb1ea4bbd.png)

![Java installation 5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/095657e9-f905-83c4-ee78-765a10caed11.png)

```
PS C:\Windows\System32\WindowsPowerShell\v1.0> java -version
java version "1.8.0_301"
Java(TM) SE Runtime Environment (build 1.8.0_301-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.301-b09, mixed mode)
```

### Graphvizのインストール

以下からインストーラーをダウンロード
https://www.graphviz.org/download/

インストーラーを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/6901a18a-2b90-e646-228f-64eaf711aae3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/34c74256-af62-f9be-9e2c-77786a5ff3bf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/38c686dc-66b8-ad41-befa-019d55c84de2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/3ffd82c1-e96f-fb25-f7a6-bff16da327aa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/effcdcd6-eafc-b98d-eef7-2a66ec69fb32.png)

### PlantUMLプラグインのインストール

Ctrl+Pで`ext install plantuml`を入力

![PlantUML installation 1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/7948da4d-f58c-9277-d829-1b1dba7aeddd.png)

`PlantUML`を押下

![PlantUML installation 2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/7b00a2f6-4878-81a9-f40d-850af1b1068a.png)

`build`が`failing`になってるのが気になるが、とりぜず無視してインストールを進める。
`install`ボタンを押下し、インストールを実施

![PlantUML installation 3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/30387f3a-d96c-8ed6-10f4-00d1654071ec.png)

プラグインのインストールが完了

### PlantUMLを試してみる

ネット上にある適当なサンプルからVSCodeでpumlファイルを作成[^1]
Alt+Dで、プレビューを表示

![PlantUML Preview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/25be8d3e-76ef-bd70-870d-5f16e820314a.png)

### PlantUMLサーバーを使う方法

上記手順は、ローカルでPlantUMLを動かす方法でしたが、それとは別にPlantUMLのサーバーを使って、vscodeでプレビューを表示する方法を試します。

PlantUMLプラグインの設定を以下のように指定する。

* `Plantuml: Render`: `PlantUMLServer`
* `Plantuml: Server`: PlantUMLサーバーのURLを指定

![plantuml_plugin_settings](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350260/f1faf6f7-5eda-301c-7cb5-b56b6b69b141.png)



本記事は以上です。

[^1]: https://plantuml.com/ja/deployment-diagram