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: RenderPlantUMLServer
Plantuml: Serverhttp://localhost:8080/

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

サンプルを表示させる

先ほどのサンプルのプレビューを表示させてみます。

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

UML画像の保存

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

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

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

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

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

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

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

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

export JAVA_HOME=`/usr/libexec/java_home`

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


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