1. ditflame
Changes in body
Source | HTML | Preview
@@ -1,138 +1,140 @@
この記事では、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
+5. Javaのパスを通す(通していなければ)
+ * 例)C:\Program Files (x86)\Java\jre[Javaのバージョン]\bin
### 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)