VS CodeでPlantUML with WSL2

VS Codeで、PlantUMLを使って、シーケンス図やアクティビティ図を描く環境の準備方法。

Environment

OS: Windows 11
VS Code拡張機能： PlantUML
PlantUML Server: Ubuntu 20.04.2 LTS on WSL2

PlantUMLのレンダリングサーバは外部サーバ（ https://plantuml.io/ ）を使うこともできるが、仕事で使う場合は自前で用意した方が安心。個人的に一番手軽に用意できそうな、WSL2上のUbuntuのDockerでPlantUML Serverのコンテナを使う方法を説明する。
なお、VS Codeのインストール方法、WSL2でUbuntu環境準備方法に関しては、適宜ググってほしい。
（WSL2に関しては、Windows 10でLinuxを使う(WSL2)で書いてたりするのでよかったら見てみてください。）

Install docker into Ubuntu 20.04.2 LTS on WSL2

Ubuntuの標準リポジトリに用意されているパッケージは古いので、最新版をインストールする。こだわりがなければ、標準リポジトリからsudo apt install dockerすればよいと思う。

1. 念のため、dockerの古いバージョンを削除

   sudo apt remove docker docker-engine docker.io containerd runc
   

2. Dockerリポジトリの設定
   2.1. リポジトリ設定に必要なパッケージをインストール

   sudo apt update
   sudo apt install ca-certificates curl gnupg lsb-release
   

2.2. Docker公式GPG keyを追加

```bash
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
```  

2.3. Dockerリポジトリの追加

```bash
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

1. Dockerのインストール

   sudo apt update
   sudo apt install docker-ce docker-ce-cli containerd.io
   

2. ユーザをdockerグループに追加
   sudoなしでdockerコマンドを実行できるように、dockerグループにユーザを追加。

   sudo usermod -aG docker $USER
   

3. dockerサービスを起動
   WSL2のUbuntuでは、systemctlコマンドが使えないので、serviceコマンドでdockerを起動。

   sudo service docker start
   

なお、Microsoft Store版WSLではsystemdを有効化できるので、systemctlコマンドを使える。自動起動設定もできるので、個人的にはこっちを使うようにしている。

Run PlantUML Server container

1. PlantUML Serverのdocker imageをダウンロードして起動

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

2. PlantUML Serverの起動状態の確認
   Windows上のブラウザで http://localhost:8080 にアクセスし、下記のような画面が表示されれば準備OK。
   

Install PlantUML extension into VS Code

1. WindowsでVS Codeを起動し、PlantUML拡張機能をインストール
   

2. PlantUML拡張機能のRender Server設定を変更
   PlantUML拡張機能の下記設定を変更する。

• PlantUML: Render -> PlantUMLServer
• PlantUML: Server -> http://localhost:8080
  

1. 動作確認
   適当にPlantUMLで記述したファイルを用意し、Alt + Dを押すことでプレビューを確認。
   

あとは自由に使い倒しましょう。

Links

PlantUML
PlantUML VS Code Extension
PlantUML Server Docker Image
Install Docker Engine on Ubuntu