Zenn
🔥

WSL2 UbuntuでPlantUMLの環境を整備する

2021/09/27に公開
PlantUML
tech

クラス図やシーケンス図等の描画でよく利用される PlantUML を、WSL2 Ubuntu （Remote - WSL プラグイン 利用）で編集するための環境構築メモです。

環境

  • WSL2 Ubuntu 20.04

セットアップ

1. Javaインストール

Java が必要なので Ubuntu に Java をインストールします。

$ sudo apt install openjdk-16-jdk-headless

2. PlantUMLプラグインのインストール

WSL のターミナルから code . で VSCode を開き、PlantUML のプラグイン をインストールします。

3. 設定ファイル修正

PlantUML Server をコンテナで動かして、コンテナ上でレンダリングするため VSCode の設定を追加します。${HOME}/.vscode-server/data/Machine/settings.json をエディタで開いて以下を設定します。

{
  "plantuml.server": "http://localhost:8888",
  "plantuml.render": "PlantUMLServer",
}

4. PlantUMLコンテナ起動

PlantUML サーバのコンテナを起動させます。Docker for Windows の WSL Integration を有効にした状態で以下を実行します。

$ docker run -d -p 8888:8080 plantuml/plantuml-server:jetty
$ docker container ls
CONTAINER ID   IMAGE                            COMMAND                  CREATED       STATUS       PORTS                                       NAMES
d2557acc17c3   plantuml/plantuml-server:jetty   "/docker-entrypoint.…"   2 minutes ago   Up 2 minutes   0.0.0.0:8888->8080/tcp, :::8888->8080/tcp   busy_shamir

5. プレビュー機能の確認

VSCode で PlantUML のファイル（拡張子 .pu 等）を開き Alt + D でプレビュー表示ができることを確認します。VSCode は開き直しが必要かも。

参考

Discussion