Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境をDockerで作る

はじめに

※ qiita と同じ内容のものがありますが、noteとqiitaの使い勝手を比べて見るために書きました。盗作ではないです。

PlantUMLを使える環境を構築しようとするとJavaやGraphviz softwareのインストールが必要でちょっと手間です。Docker HubでPlantUML Serverの公式イメージを使うとPlantUMLを描画する環境をわりと楽に構築できたので紹介します。また、Visual Studio Codeとその拡張機能を組み合わせるとplantUMLを書きやすい環境ができたので合わせて紹介します。

構築後のイメージ

試した環境

mac OS 10.14.3
Visual Studio Code 1.33.1
Docker 18.09.2

インストールするもの

Visual StudioCode 
PlantUML （Visual Studio Codeの拡張機能）
Docker

それぞれのインストール手順は省略します。

構築手順

1. PlantUML Server を起動する

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

ここはこれだけです。
ブラウザで http:localhost:8080 を開いてください。この画面がでれば期待通り動いていることになります。

2. Visual Studio CodeのPlantUMLの設定

PlantUMLのレンダリングはPlantUML Serverでやるように設定します。

設定画面を開いて以下の設定をします。（windowsなら"ctrl + ,", macなら"⌘ + ,"で開きます）
plantumlと検索キーワードを入れると設定項目が表示されます。

・Plantuml: previewAutoUpdateにチェック
・Plantuml: RenderをPlantUMLServerに選択
・Plantuml: Serverをhttp://localhost:8080に設定

以上で構築は完了です。

使い方

試しにtest.pumlというファイルを作成してください。
ファイルには以下の内容を入力してください。

@startuml test
@enduml

ファイルを開いた状態で、Visual Studio Codeのコマンドパレット（windowsなら"ctrl + shift + p", macなら"⌘ + shift + p"）を開き、PlantUMLと打ってみてください。"PlantUML: カーソル位置のダイアグラムをプレビュー"というのが一覧にでるので選択してください。
プレビュー画面がでます。

テキストを更新するとそれに合わせて、プレビューの内容も更新されます。

PlantUMLの文法かなにかあやまりがあったりエラーがあったときは、赤いマークが出ます。カーソルをマークに合わせると何でエラーになっているのかがわかります。

以上です。
dockerのおかげでツールのインストールが楽でいいなと思いました。（小並感）