Visual Studio Codeでプレビューを見ながらPlantUMLを書ける環境をDockerで作る
はじめに
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
それぞれのインストール手順は省略します。
構築手順
PlantUML Server を起動する
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
ここはこれだけです。
ブラウザで http:localhost:8080 を開いてください。この画面がでれば期待通り動いていることになります。
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のおかげでツールのインストールが楽でいいなと思いました。(小並感)