PlantUML Server で爆速プレビュー！ for Mac

[Visual Studio Code](https://code.visualstudio.com/) のPlantUMLプラグインを使うと、エディットしながらUML画像をリアルタイムでプレビューできるのですが、デフォルトではすごく遅いです。
プレビュー用サーバを用意して、**描画の高速化を図りましょうか**。

以下、Mac環境で話を進めます。

## Visual Studio Code と PlantUMLプラグインのインストール

### Graphviz をインストール

[Graphviz](https://www.graphviz.org/) が画像描画ツールで、PlantUMLのコードを画像化する場合に必要です。
Homebrew と Xcodeコマンドラインツールはインストールしておいてください。
また、単体のPlantUMLもHomeBrewでインストールできますが、ここでは割愛します。

```shell-session
$ brew install graphviz
```

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

[Visual Studio Code の公式サイト](https://code.visualstudio.com/)からダウンロードしてインストールしてください。

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

1. Visual Studio Code を立ち上げて、左アイコンの一番下の *Extensions* を押して、**PlantUML**を検索、見つけたならばこれを**INSTALL**します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/98745/4187f99e-4eec-9ff9-daeb-7fbe97cb5529.png)
2. **Visual Studio Codeを再起動する**。これを行わないとうまく描画しちゃあ、くれないのです。

### サンプルを作ってプレビュー表示させる

適当な.puファイルをエディットします。
ここでは、公式サイトに書いてあったサンプルを用いましょうか。

```:sample.pu
@startuml　sample
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
```

`@startuml`と`@enduml`の間にカーソルを持ってきて、 **option + D** を押してみましょう。新たなタブに画像が表示されますね。UMLコードをUML画像化したもののプレビューです。
…でも、ちょっと遅いデース。

※ ”Javaがインストールされていないよ”とかのエラー出る人や、`∂`という文字がでるだけの人は、[（参考）Javaのインストール](#java%E3%83%A9%E3%83%B3%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)を参照のこと。

![plantUML-local.gif](https://qiita-image-store.s3.amazonaws.com/0/98745/3a21d36b-5235-e424-d85f-fbb181a7a648.gif)


## 爆速のためにPlantUMLサーバを立ち上げる

ドキュメントによると、PlantUML Server を使えば15倍速くなるとのこと、さっそく試してみましょう！

### Dockerで立ち上げる

Dockerイメージが[Docker-Hubに用意されているので](https://hub.docker.com/r/plantuml/plantuml-server)、これをさくっと使えます。

```shell-session
$ docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
```

これでローカルの http://localhost:8080 がPlantUML用のインターフェースになりました。


### Visual Studio Code の設定を変更する

Setting （:gear:） で PlantUML の設定値を変更します。

`Plantuml: Render` → `PlantUMLServer`
`Plantuml: Server` → `http://localhost:8080/`

"plantuml" でフィルタをかけると探しやすいです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/98745/6cfc38b4-e01c-e1ec-60e0-25c9750ba298.png)


### サンプルを表示させる

先ほどのサンプルのプレビューを表示させてみます。
**option + D** で表示させましょう。

![plantuml-server.gif](https://qiita-image-store.s3.amazonaws.com/0/98745/b0034a43-bded-c2ba-375a-05afd36f1bd7.gif)

おぉ！かなり速くなりました！ 爆速じゃあ、ないですか！

### UML画像の保存

プレビューされたUML画像を保存することができます。

1. Shift + ⌘ +P を押して、コマンドパレットを開きます。
2. `> plantuml` として、フィルターをかけ、 `PlantUML: カーソル位置のダイアグラムをエクスポート` を選びます。
3. `png` など、好きなフォーマットを選びます。
4. 出力されます。場所ですが、WORKSPACEに`out`というディレクトリが作成されて、その下に出力されています。具体的には作成時に出てくる「 :information_source: View Report」を確認すると、フルパスがわかります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/98745/94708d2f-bb80-6506-69d1-6cd6dc5dbf04.png)



### Javaランタイムのインストール

#### Javaランタイムがまだインストールされていない人

※Mac OS 10.7 （Lion）以降だと、Javaランタイムは自動的にインストールされなくなったとのこと。[^adobeinfo]

次の手順でJavaランタイムをインストールします。

[^adobeinfo]: [Adobeの情報ページ](https://helpx.adobe.com/jp/x-productkb/global/install-java-jre-mac-os.html)を参考にしました。

1. [Javaのダウンロードページ](https://www.java.com/ja/download/)へ進み、ライセンス内容を確認し[同意して無料ダウンロードを開始]
2. インストーラー（pkgファイル）を実行し、許諾内容に問題なければインストール
3. VC Studioを再起動する。

##### おまけ

.bash_profile に次の行を追加しておくと、ターミナルでもパスが通るようになります。

```
export JAVA_HOME=`/usr/libexec/java_home`
```


---

UMLをコードで書くと、Gitとかで管理しやすいですよね！
PlantUMLを楽しんでくださいな！