VS CodeでPlantUML with WSL2

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

# Environment
OS: Windows 11
VS Code拡張機能： [PlantUML](https://marketplace.visualstudio.com/items?itemName=jebbs.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)](https://qiita.com/whim0321/items/ed76b490daaec152dc69)で書いてたりするのでよかったら見てみてください。）

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

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

    ```bash
    sudo apt remove docker docker-engine docker.io containerd runc
    ```  
1. Dockerリポジトリの設定
2.1. リポジトリ設定に必要なパッケージをインストール

    ```bash
    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のインストール

    ```bash
    sudo apt update
    sudo apt install docker-ce docker-ce-cli containerd.io
    ```
1. ユーザをdockerグループに追加
`sudo`なしで`docker`コマンドを実行できるように、`docker`グループにユーザを追加。

    ```bash
    sudo usermod -aG docker $USER
    ```
1. dockerサービスを起動
WSL2のUbuntuでは、`systemctl`コマンドが使えないので、serviceコマンドでdockerを起動。

    ```bash
    sudo service docker start
    ```

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

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

    ```bash
    docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
    ```
1. PlantUML Serverの起動状態の確認
Windows上のブラウザで http://localhost:8080 にアクセスし、下記のような画面が表示されれば準備OK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253975/acb75c53-d703-e5ef-c598-6469d90a08c8.png)

# Install PlantUML extension into VS Code
1. WindowsでVS Codeを起動し、PlantUML拡張機能をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253975/9e90138e-5244-e9e2-e928-a1b9c12e35b7.png)

1. PlantUML拡張機能のRender Server設定を変更
PlantUML拡張機能の下記設定を変更する。
  * PlantUML: Render -> PlantUMLServer
  * PlantUML: Server -> http://localhost:8080
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253975/46653f52-a940-0b5a-f644-7816d3f2015a.png)

3. 動作確認
適当にPlantUMLで記述したファイルを用意し、`Alt + D`を押すことでプレビューを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253975/464a83e9-b901-6cb6-dafc-df61467601f6.png)

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

# Links
[PlantUML](https://plantuml.com/ja/)
[PlantUML VS Code Extension](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)
[PlantUML Server Docker Image](https://hub.docker.com/r/plantuml/plantuml-server)
[Install Docker Engine on Ubuntu](https://docs.docker.com/engine/install/ubuntu/)