VSCode+DockerでPlantUMLの環境を構築する

背景

最近、仕事していてguiの作図ツールでシーケンスを書くのがそろそろ辛くなってきたよね、という話になり、PlantUMLでコード化することになりました。その際に、環境構築がスムーズにいく人といかない人がいたのでdockerでお手軽に環境構築できないかなと思い調べてみました。
記事内で書いたファイルなどは、Githubで公開しています。

前提

前提となるマシンの環境です

• dockerが使える
• docker-composeが使える
• VSCodeがinstallされている

やること

PlantUML ServerのDockerイメージが公開されていましたのでそちらを利用します。
VSCodeの拡張機能の設定でlocalに起動したPlantUML Serverを使ってレンダリングするように変更します。

1. docker-compose.ymlを作成

毎回ポートを指定してdocker runするのが面倒なのと、後処理も簡単に済ませられるようにしたいのでdocker-composeで起動、終了できるようにします。
適当なディレクトリを作成し、以下のdocker-compose.ymlファイルを置いてください。

docker-compose.yml

version: '3'
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-local-server
    ports:
      - "8080:8080"

2. VSCodeの設定

• 拡張機能PlantUMLをインストール
• インストールしたPlantUMLのExtension settingsから以下を設定
  • Plantuml:Render -> PlantUML Server
  • Plantuml:Server -> http://localhost:8080

設定は以上です。

使い方

plantumlで図を書きたい時に、docker-compose.ymlを置いたディレクトリに移動してから以下のようにplantuml-serverを起動します。

$ docker-compose up -d

VSCodeでpuファイルを作成します。ファイルの場所は任意。

sample.pu

@startuml sample
alice -> Bob: Hello, Bob!
alice <-- Bob: Hello, Alice!
@enduml

VSCodeのcommand paletteを開き(windowsならctrl+shift+p macならcommand+shift+p)、
PlantUML: Preview Current Diagramを選択するとプレビューが表示されます。そのままファイルを編集するとプレビューも更新されます。

終了する時は、

$ docker-compose down

でOKです。

追記(2022/1/24)

以下の内容を.vscode/tasks.jsonに書いておくと、vscodeでプロジェクトを開いたときに自動でdocker-compose upしてくれます。

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Launch PlantUML Server",
      "type": "shell",
      "command": "docker-compose",
      "args": ["up", "-d"],
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

参考情報

UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する