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]をダウンロードしてください
以下の画像の場所にあります

 ※わからない人はこのリンク(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]を選択してください。

またこのような画面が表示された場合は[実行]を押してください。

4.PlantUMLのインストール

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

※事前注意
リモート状態で拡張機能をインストールすると動作しないため、リモート接続していないことを確認する。

VSCodeの左下より、リモートを行っていないことを確認する

緑色のマークがこの状態ならOK

1.Visual Studio Code を起動
2.拡張機能よりPlantUMLを検索してインストール

3.インストール完了後、再度読み込むを押してVSCodeを再起動する

以上で環境導入は完了

動作確認とUML画像の保存

1.ファイル作成とプレビューの表示

1.Visual Studio Code を起動
2.VSCode左上のファイルより、ファイル→新規ファイルを選択
3.新規ファイル作成後、拡張子.puでファイルを保存する。
※今回はファイル名をUML1とした
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

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

2.画像ファイルの出力

作成したUMLを画像として出力します

1."Ctrl + Shift + P"でコマンドパレットを開く
2.** PlantUML: Export Current Diagram** と入力する

3.png, svg, eps, pdf, vdx, xmi, scxml, htmlから出力形式を選択する

4.コードの保存先ディレクトリに画像が保存されている。(ターミナルより保存先の確認が可能)

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

各エラーの対処法

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

出力失敗例1


このような出力の場合はGraphvizがインストール出来ていない場合。
Graphvizがインストール出来ているか保存先を確認する。

出力失敗例2


上記の画像の場合はGraphvizのPATHが通っていない場合が考えられる。
今回インストールしたバージョンではこのような画像は出ないが、別バージョンの場合出力されるときがある。
対処法としては
1.(https://qiita.com/BARANCE_TW/items/c3f7816d38cc9e746bbd) の記事におけるパスの設定を行う。
2.コマンドプロンプトを管理者権限で開く(コマンドプロンプト上で右クリック)

3.以下のコードを入力

 dot -c

4.再度プレビュー表示

出力失敗例3


この画像は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]で検索すればかなりでてくる