Visual Studio Code で UML を描こう！

この記事では、Windows 環境に **Visual Studio Code** と **PlantUML** をセットアップする手順を説明します。

![test.gif](https://qiita-image-store.s3.amazonaws.com/0/93531/73504287-8de6-b6ec-22f1-09cbfdf0ac8c.gif)


# PlantUML とは

[PlantUML](http://plantuml.com/) は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。

* シーケンス図 / Sequence diagram
* ユースケース図 / Usecase diagram
* クラス図 / Class diagram
* アクティビティ図 / Activity diagram
* コンポーネント図 / Component diagram
* 状態遷移図 / State diagram
* オブジェクト図 / Object diagram


# 環境

下記の環境で動作確認しました。

- Windows 10 Pro (64bit)
- [Visual Studio Code 1.11](https://code.visualstudio.com/)
- [Java SE Runtime Environment 8 Update 121](https://www.java.com/ja/)
- [Graphviz 2.38](http://www.graphviz.org/)
- [PlantUML 1.4.0](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml) (plugin)

# セットアップ

## Visual Studio Code のインストール

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

## PlantUML のセットアップ

### 1. Java のインストール

PlantUML の実行には、Javaの実行環境が必要となります。

1. [java.com](https://java.com/ja/) を開く
2. [無料Javaのダウンロード]ボタンを押す
3. [同意して無料ダウンロードを開始]を押し、インストーラーをダウンロードする
4. ダウンロードしたインストーラーを実行する
  * 例）JavaSetup8u121.exe

### 2. Graphviz のインストール

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

1. [Graphviz - Graph Visualization Software](http://www.graphviz.org/) を開く
2. 左側のバーから [Download](http://www.graphviz.org/Download.php) を開く
3. License ページの末尾にある[Agree]を押す
4. Download ページの Windows の Stable and development Windows Install packages をクリックする
5. MSIファイルを選択してインストーラーをダウンロードする
6. ダウンロードしたインストーラーを実行する
  * 例）graphviz-2.38.msi

> インストール先を変更した場合には、環境変数"GRAPHVIZ_DOT"でパスを指定する必要があるそうです。

### 3. PlantUML のインストール

Visual Studio Marketplace で PlantUML をインストールします。

1. Visual Studio Code を起動する
2. **"Ctrl + P"** と入力して、Quick Open を開く
3. Quick Open に **ext install plantuml** と入力して、Enter キーを押す
    ![install.png](https://qiita-image-store.s3.amazonaws.com/0/93531/f30feab7-2d5b-ab03-fa6b-89d70ae8f5e5.png)
4. 検索結果から **PlantUML** を選択し、[インストール]を押す
    ![PlantUML.png](https://qiita-image-store.s3.amazonaws.com/0/93531/ff887377-5789-936a-a628-c33149e3b5d6.png)
5. インストール完了後に[再度読み込む]を押して Visual Studio Code を再起動する

# 動作確認

## 1. プレビュー表示

1. Visual Studio Code を起動する
2. 拡張子 **.pu** で新規ファイルを作成する
3. ファイルに以下を入力し、**"Alt + D"**でプレビューを表示する

```PlantUML:test.pu
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml
```
![test_result.png](https://qiita-image-store.s3.amazonaws.com/0/93531/74a37139-ea56-e725-abc2-885a79c68ed3.png)

## 2. 画像ファイルとして出力

1. **"Ctrl + Shift + P"** でコマンドパレットを開く
2. **PlantUML: Export Current Diagram** と入力する
    ![export.png](https://qiita-image-store.s3.amazonaws.com/0/93531/5a981d89-5033-26f4-b1ad-b1feaf4a644e.png)
3. **png, svg, eps, pdf, vdx, xmi, scxml, html** から出力形式を選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/93531/543d1d83-7226-27cf-5864-f234b62aca26.png)


PNGファイルとして出力した時のディレクトリ構成は、以下のようになります。

```:ディレクトリ構成
 test.pu
 test/
     シーケンス図.png
```

出力結果のPNGファイルは以下のようになります。

![シーケンス図.png](https://qiita-image-store.s3.amazonaws.com/0/93531/213753b8-fb0e-a5de-470e-1c95f3a1db01.png)


# PlantUML言語リファレンス

PlantUMLの文法は、"PlantUML Language Reference Guide"としてPDFファイルが提供されています。

1. http://plantuml.com/download を開く
2. PlantUML Language Reference Guide にある日本国旗を選択する
3. "PlantUML_Language_Reference_Guide_JA.pdf"がダウンロードされる

なお、[plantuml.com](http://plantuml.com/) でも同様の説明がありますが、広告表示が鬱陶しいため、PDFファイルの方が読みやすいです。


# 終わりに

まだまだ PlantUML を使い始めたばかりですが、他のUMLの描画ツールと比べて以下の点が気に入っています。

* テキストで UML を描けるため、Gitで管理しやすい
* 図の細かいレイアウト調整などを気にしなくて良い


# 参考情報

* [PlantUML](http://plantuml.com/)
* [PlantUML - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)
* [Visual Studio Codeで自由自在にUMLを描こう](http://blog.okazuki.jp/entry/2016/09/01/215508)