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プラグインをインストール
- Visual Studio Code を立ち上げて、左アイコンの一番下の Extensions を押して、PlantUMLを検索、見つけたならばこれをINSTALLします。
- Visual Studio Codeを再起動する。これを行わないとうまく描画しちゃあ、くれないのです。
サンプルを作ってプレビュー表示させる
適当な.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画像を保存することができます。
- Shift + ⌘ +P を押して、コマンドパレットを開きます。
-
> plantumlとして、フィルターをかけ、PlantUML: カーソル位置のダイアグラムをエクスポートを選びます。 -
pngなど、好きなフォーマットを選びます。 - 出力されます。場所ですが、WORKSPACEに
outというディレクトリが作成されて、その下に出力されています。具体的には作成時に出てくる「
View Report」を確認すると、フルパスがわかります。
Javaランタイムのインストール
Javaランタイムがまだインストールされていない人
※Mac OS 10.7 （Lion）以降だと、Javaランタイムは自動的にインストールされなくなったとのこと。1
次の手順でJavaランタイムをインストールします。
- Javaのダウンロードページへ進み、ライセンス内容を確認し[同意して無料ダウンロードを開始]
- インストーラー（pkgファイル）を実行し、許諾内容に問題なければインストール
- VC Studioを再起動する。
おまけ
.bash_profile に次の行を追加しておくと、ターミナルでもパスが通るようになります。
export JAVA_HOME=`/usr/libexec/java_home`
UMLをコードで書くと、Gitとかで管理しやすいですよね！
PlantUMLを楽しんでくださいな！
-
Adobeの情報ページを参考にしました。 ↩