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

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

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

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

Graphviz をインストール

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

$ brew install graphviz

Visual Studio Code をインストール

Visual Studio Code の公式サイトからダウンロードしてインストールしてください。

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

1. Visual Studio Code を立ち上げて、左アイコンの一番下の Extensions を押して、PlantUMLを検索、見つけたならばこれをINSTALLします。
   
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のインストールを参照のこと。

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

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

Dockerで立ち上げる

DockerイメージがDocker-Hubに用意されているので、これをさくっと使えます。

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

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

Visual Studio Code の設定を変更する

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

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

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

サンプルを表示させる

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

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

UML画像の保存

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

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

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

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

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

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

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

おまけ

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

export JAVA_HOME=`/usr/libexec/java_home`

---

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

1. Adobeの情報ページを参考にしました。 ↩