Visual Studio CodeでPlantUMLを利用する方法（2020/10/30作成）

2020年10月30日まででVisualStudioCodeでPlantUMLを利用する方法をメモとして挙げておきます。
この方の記事をもとに作成しました。（https://qiita.com/couzie/items/9dedb834c5aff09ea7b2）

手順は以下の通りです。
環境導入
1.Visual Studio Code のインストール
2．Javaのインストール
3．Graphvisのインストール
4．PlantUMLのインストール

動作確認
1．ファイル作成とプレビュー表示
2．画像ファイル出力

各エラーの対処法

参考情報

#環境導入
### 1. Visual Studio Codeのインストール
 
　※すでにVisual Studio Codeをインストールしている場合この作業は必要ありません。

　1．Visual Studio Code (https://code.visualstudio.com/) を開く
　2．[Download for Windows] を押してインストーラーをダウンロードする
　3．インストローラーを実行する

###2.Javaのインストール
PlantUMLの実効環境としてJavaをインストールします。
　
　1.java.com（https://java.com/ja/) より[無料Javaのダウンロード]ボタンを押す
　2.[同意して無料ダウンロードを開始]を押し、インストーラーをダウンロードする
　3．インストローラーを実行する


###3．Graphvizのインストール

PlantUMLでUMLを描画するために使用しているソフトウェアです。

※Graphvizは公式サイトのインストローラ－場所が変わる場合があります、この記事では2020/10/31時点でのインストール方法を提示しております。

1．Graphviz（http://www.graphviz.org/) を開く
2．サイト上のバーより[Download]を開く
3．DownloadページのWindowsより**Development Windows install packages**をクリック
4.その後 **10/→cmake/→Release/→x64/**とクリックして**[graphviz-install-2.44.2]**をダウンロードしてください
以下の画像の場所にあります
![スクリーンショット 2020-10-31 221429.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/2063b313-e2bf-6085-357b-f31398c4f3a2.png)

　※わからない人はこのリンク（https://www2.graphviz.org/Packages/development/windows/10/cmake/Release/x64/) よりgraphviz-install-2.44.2をダウンロードしてください
 
5.ダウンロードしたインストローラを実行する。
　※インストール時に以下のような画面が出ますが[Do not add Graphviz to the system PATH]を選択してください。
![スクリーンショット 2020-10-31 174136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/ead0489a-5105-1dfb-1125-e4a56159a4d2.png)



またこのような画面が表示された場合は**[実行]**を押してください。
![スクリーンショット 2020-11-03 224155.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/e5496c86-5c7a-56dd-2ba7-eca591fa8413.png)


###4.PlantUMLのインストール
Visual Studio Codeの拡張機能としてPlantUMLをインストールします。

**※事前注意
リモート状態で拡張機能をインストールすると動作しないため、リモート接続していないことを確認する。**
VSCodeの左下より、リモートを行っていないことを確認する
![スクリーンショット 2020-10-31 223501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/58a2472c-5a42-195c-1071-02d0ba287a8b.png)
緑色のマークがこの状態ならOK
 
 
 

1.Visual Studio Code を起動
2．拡張機能より**PlantUML**を検索してインストール
![スクリーンショット 2020-10-31 222515.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/499475e6-cdf9-766f-c285-b71b37ff2f42.png)
3.インストール完了後、再度読み込むを押してVSCodeを再起動する

以上で環境導入は完了

#動作確認とUML画像の保存
##1.ファイル作成とプレビューの表示

1．Visual Studio Code を起動
2.VSCode左上のファイルより、**ファイル→新規ファイル**を選択
3.新規ファイル作成後、拡張子**.pu**でファイルを保存する。
※今回はファイル名をUML1とした![スクリーンショット 2020-10-31 225355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/adfc2e49-f60b-eb3f-8b68-1fdf8244e574.png)
4．Graphvizの動作確認のため、ファイルに以下を入力し、**"Alt+D"**を入力してプレビュー表示する

```
@startuml

(*) --> "Find Event"
"Find Event" -> "Attend Event"

if "Capacity?" then
  ->[ok] "Create Ticket"
else
  -->[full] if "Standby?" then
    ->[ok] "Standby Ticket"
  else
    -->[no] "Cancel Ticket"
    "Cancel Ticket" --> (*)
  endif
endif

"Create Ticket" --> ==show==
"Standby Ticket" --> ==show==
==show== --> "Show Ticket"
"Show Ticket" --> (*)

@enduml
```


![スクリーンショット 2020-10-31 230635.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/8c8fe8b2-fcb4-c1be-1b76-533f8e81c014.png)

上記画像のようなプレビュー画面が表示されればOK
　※表示されなかった場合は**[各エラーの対処法]**より確認する。

##2．画像ファイルの出力
作成したUMLを画像として出力します

1.**"Ctrl + Shift + P"**でコマンドパレットを開く
2.** PlantUML: Export Current Diagram** と入力する
![スクリーンショット 2020-10-31 232032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/c8a9d2d1-1038-78b5-74e1-409f8aa5384a.png)


3.**png, svg, eps, pdf, vdx, xmi, scxml, html**から出力形式を選択する
![スクリーンショット 2020-10-31 232103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/63553b5c-3f8d-7c61-9738-ab3eb11af221.png)




4．コードの保存先ディレクトリに画像が保存されている。（ターミナルより保存先の確認が可能）![UML1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/783ecf61-9030-ec65-7a05-386717e43e18.png)

***ここまで出来れば導入は完了。ただエラー画像が表示された方は各エラーの対処法を閲覧***

#各エラーの対処法
**"Alt+D"**を入力した場合にエラー画像が出力された場合の原因と対処法を記載しておきます。
　主にエラーはGraphvizかPlantUMLのインストールに不備がある場合に出力されます。

##出力失敗例1
![スクリーンショット 2020-10-31 233143.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/5b0ce54f-9485-8795-a47c-266d7447d5ad.png)
このような出力の場合はGraphvizがインストール出来ていない場合。
Graphvizがインストール出来ているか保存先を確認する。

##出力失敗例2
![Untitle1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/f008aeda-c2a2-0d9d-eef7-988bc2501ca6.png)
上記の画像の場合はGraphvizのPATHが通っていない場合が考えられる。
今回インストールしたバージョンではこのような画像は出ないが、別バージョンの場合出力されるときがある。
対処法としては
1．(https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd) の記事における**パスの設定**を行う。
2．コマンドプロンプトを管理者権限で開く（コマンドプロンプト上で右クリック）
![スクリーンショット 2020-10-31 235625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/840c30b0-ad0a-c10f-6e44-25140d11c71f.png)
3．以下のコードを入力

```
 dot -c
```
4.再度プレビュー表示

##出力失敗例3
![スクリーンショット 2020-11-01 000123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837080/d63594a7-83bd-7c2e-f325-284b7d60645b.png)
この画像はPlantUMLをリモート環境下で実行している。もしくはリモート環境にPlantUMLをインストールしている場合がある。
リモート環境下ではないことを確認してPlantUMLをインストールすること。



#最終手段
どうしてもPlantUMLが使えない方はオンラインサーバー(http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)
　を利用すること。
ただコードは保存できないので、別で保存するよう注意が必要。


#参考情報・参考資料
環境導入に関して
https://qiita.com/couzie/items/9dedb834c5aff09ea7b2
https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd
https://qiita.com/walkerjito/items/a7dd3fece3c6414867b2

PlantUMLの記述方法に関する記事

PlantUML Check Sheet(https://qiita.com/ogomr/items/0b5c4de7f38fd1482a48)
PlantUMLでUMLお絵描き生活(https://qiita.com/qualitia_cdev/items/55644b15eaf7e8328ac1)
PlantUML概要(https://plantuml.com/ja/)

など[PlantUML]で検索すればかなりでてくる