Windows環境上のVS CodeでPlantUML利用環境を構築してみる（PlantUMLServer）

PlantUMLは様々なコードを記述する事で様々なダイアグラムをレンダリングするソフトウェアですが、VS Code上でPlantUMLを記述してプレビューできる拡張機能も提供されています。

今回はWindows上のVS CodeでPlantUMLを利用する環境の構築について説明します。

## 今回利用する環境

- Windows 11 23H2
- VS Code 1.88.0
- vscode-plantuml 2.18.1

## 各種ドキュメントなど

- [PlantUML](http://plantuml.com/)
- [Welcome to The Hitchhiker’s Guide to PlantUML!](https://crashedmind.github.io/PlantUMLHitchhikersGuide/)

公式でしっかりとしたリファレンスが用意されています。
PlantUMlの記法などは公式を参照すればわかりやすいかと思います。

なお本記事ではVS CodeとPlantUMLServerを利用するため直接参照はしませんが、[PlantUMLのクイックスタートガイド](https://plantuml.com/ja/starting)にローカルインストールではローカルインストール手順が紹介されています。

- [VS Code Marketplace - jebbs.plantuml](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)

VS CodeでPlantUMLを利用できるようにする拡張機能。 VS Code上でPlantUMLの記法で作成したテキストファイルのプレビューができるようになります。
今回はこちらの拡張機能を利用します。

- [plantuml/plantuml-server](https://github.com/plantuml/plantuml-server)

今回インストールするVS Code拡張の説明を読むと、標準設定ではレンダリング方法`Local render`が設定されていますが、PlantUMLServerを立てて利用した方がレンダリングは早いようです。

[About Render](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml#about-render)

軽快に動作してくれる方がありがたいので、本記事ではPlantUMLServerを利用した環境構築について説明します。

なお`Local render`と`PlantUMLServer`でどれくらい描画に違いがあるかは[About Render](https://github.com/qjebbs/vscode-plantuml/blob/master/README.md#about-render)に記載があります。

```log
Local: 6 documents, 9 digrams, 14 files exported in 24.149 seconds
PlantUMLServer: 6 documents, 9 digrams, 14 files exported in 1.564 seconds
```

LocalとPlantUMLServerではだいぶ速度に違いがありますね。

なお別にPlantUMLServerを構築するまでもないって場合は、`Local render`を選択しjavaと[GraphViz](https://plantuml.com/ja/graphviz-dot)をインストールすれば利用できます。

- [PlantUML オンラインサーバ](http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)

本記事ではローカル環境にVS CodeとPlantUMLをインストールして環境構築していますが、オンライン上でPlantUMLを利用できるサーバもあります。
とりあえずPlantUMLがどんなものかてっとり速く確認した場合に利用できます。

## VS Code+PlantUMLの環境構築について

VS CodeのPlantUML拡張のRead Meに[How to install](https://github.com/qjebbs/vscode-plantuml/blob/master/README.md#how-to-install)として各環境へインストールの記載があるため、こちらに従ってインストール作業を行う。

### VS Codeのインストール

公式のセットアップガイドがあるので下記を参照して適宜インストールして下さい。

[SETUP Windows](https://code.visualstudio.com/docs/setup/windows)

### VS Code拡張のPlantUMLのインストール

VS Codeに[PlantUML拡張](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)をインストールする。

`ctrl+P`で開くコマンドパレットに`ext install plantuml`と入力して実行するとサイドバーで該当拡張機能が検索されるのでPlantUMLをインストール。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/35c7cba3-6daa-4a92-7131-d384c2fb73d3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/1ba9a38a-298a-b965-3a4a-f0c5ff5ede4b.png)

### PlantUML Server環境構築

今回、VS CodeのPlantUML拡張でレンダリング方法を`local render`ではなく`PlantUML Server`を利用したいので、`PlantUML Server`環境を構築します。

構築方法については下記に記載があります。

[PlantUML Server](https://github.com/plantuml/plantuml-server)

説明を読むと、普通にインストールするだけではなく、Dockerを利用した方法について記載されていますが、本記事ではDockerを利用せずに環境構築してみます。

#### 前提条件の確認（jre/jdk　と　apache maven）

[Requirements](https://github.com/plantuml/plantuml-server?tab=readme-ov-file#requirements)に下記の記載があるので、対応するバージョンをインストールします。

2024年4月現在、下記の要件となっていました。

- jre/jdk 11 or above
- apache maven 3.0.2 or above

#### jre/jdkのインストール

適宜、条件を満たすjre/jdkをインストールして下さい。

本記事では手軽にインストールできるのでwingetからマイクロソフトビルドなOpenJDKをインストールしています。

- [Microsoft Build of OpenJDK について](https://learn.microsoft.com/ja-jp/java/openjdk/overview)
- [OpenJDK の Microsoft Build をインストールする](https://learn.microsoft.com/ja-jp/java/openjdk/install)

```powershell
winget install -e --id Microsoft.OpenJDK.21
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/7a473db4-fe65-7532-759a-9dde410edcde.png)

wingetでインストール後、コンソールを再起動して確認すると環境変数 `PATH` と `JAVA_HOME`の設定までされていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/27c87ec7-0335-a04c-9bd1-a7cc722be6f8.png)

#### mavenのインストール

[Apatch Maven](https://maven.apache.org/)の[Installing Apache Maven](https://maven.apache.org/install.html)を参照してインストールしていきます。

前提としてJDKがインストールされており、環境変数`PATH`か`JAVA_HOME`が設定されているか確認後、[Downalod](https://maven.apache.org/download.cgi)から最新版のファイルダウンロードし、適当な場所に展開。

環境変数`PATH`に展開したフォルダのbinディレクトリのパスを登録して、mvnコマンドのパスを通せばインストール環境

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/5fdbd856-283e-5254-10c6-cfc64cf78908.png)

### PlantUMLServerを起動する

[How to run the server](https://github.com/plantuml/plantuml-server#how-to-run-the-server)

jdkのインストールとmavenのインストールが完了したのでPlantUML Serverを起動してみます。

まずはvscode-plantumlのリポジトリを取得して配置。
配置したディレクトリに移動して、`mvn jetty:run`を実行。

```pwsh
git clone https://github.com/plantuml/plantuml-server.git

cd plantuml-server

mvn jetty:run
```

`mvn jetty:run`を実行すると初回は色々とダウンロード処理などが走りますが。
最終的にコンソール上の処理が止まり、サーバーを起動した旨のメッセージが表示されればPlantUMLサーバが [http://localhost:8080/plantuml](http://localhost:8080/plantuml)　に立ち上がっています。

ブラウザで[http://localhost:8080/plantuml](http://localhost:8080/plantuml)にアクセスするとPlantUMLServerが立ち上がっているのが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/a2fe3379-cef4-d5a3-e813-e5cc76e40b4b.png)

PlantUMLサーバを停止する場合は処理しているコンソール上で`Ctrl+C`を実行すると停止するか確認するプロンプトがでるので y を入力で停止します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/89fc20f7-17ab-a76e-4abf-a3a4e31d2a36.png)

### dockerでの起動について

上記までで普通に環境構築して起動しましたが、ドキュメントではDockerを利用している場合についても記述があるので軽く触れておきます。

[How to run the server with Docker
](https://github.com/plantuml/plantuml-server#how-to-run-the-server-with-docker)

上記にDockerでの起動方法について説明があります。

PlantUMLServerでは　jetty or tomcat container　とそれぞれで用意されているようです。

下記のコマンドを実行すると`PlantUMLServer`が起動します。

```pwsh
# jetty
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty
# tomcat
docker run -d -p 8080:8080 plantuml/plantuml-server:tomcat
```

## VS CodeのPlantUML拡張設定

[Use PlantUML Server as Render](https://github.com/qjebbs/vscode-plantuml/blob/master/README.md#use-plantuml-server-as-render)

VS Codeの設定（ctrl+,)からPlantUMLの拡張機能を探し、RenderとServerの項目を下記画像のように変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/e10dec1d-bf0a-9153-3f84-d82596ab446c.png)

- Renderは標準の設定が`local render`になっているので、PlantUMLServerに変更
- Serverは先ほどブラウザでアクセスしたときのURL、`http://localhost:8080/plantuml/`を設定

に設定されているため下記の設定を行い、`PlantUMLServer render`に変更する。

```json
"plantuml.render": "PlantUMLServer"
"plantuml.server": "http://localhost:8080/plantuml/"
```

## VS Code上でHelloWorld

`helloworld.pu`というファイルを作成して下記を入力

```text
@startuml
Bob -> Alice : hello
@enduml
```

この状態でコマンドパレットから`PlantUML:Preview Current Diagram` もしくは　`ALT+D` でプレビューが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/90c2faaf-b2d6-1c81-d77b-59e5c56c4602.png)

## ファイルの拡張子について

Helloworldでは拡張子をpuにしていますが、サポートしている拡張子としては下記に記載があります。

[Supported Formats](https://github.com/qjebbs/vscode-plantuml#supported-formats)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/84a8e28f-1fe9-9a20-4cb4-525de8a53be5.png)

## PlantUMLServerの起動について（VS Codeのユーザータスクに登録して起動）

VS Code上でダイヤグラムをプレビューするためには、PlantUMLServerが起動している必要がありますが、毎回コマンドラインからPlantUMLServerを起動するのは面倒です。

ここでは VS Codeのユーザータスクに登録してPlantUMLServerを起動してみます。

メニューのファイルー＞ユーザー設定ー＞ユーザータスクを選択

ユーザータスクを作成した事がなければテンプレートを利用するか聞かれるので、mavenを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/39f6a42a-8e48-a8b7-dcf0-ddec6247b80b.png)

```json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start PlantUMLServer",
            "type": "shell",
            "command": "mvn -B jetty:run",
            "options": {
                "cwd": "<<plantuml-serverを配置したパス>>"
            },
            "problemMatcher": []
        },
    ]
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/99dae112-ee11-8083-ec41-143d241e12ee.png)

`Ctrl+Shift+P`からタスクの実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/e936b17d-cded-e754-b8cf-70833bc55d3c.png)


登録した Start PlantUMLServerタスクを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/a9ffa729-06d2-91b9-ce6e-1989045fd1ea.png)

裏でPlantUMLServerが起動されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1670622/fca015a1-6d93-3943-0790-e0f40ee54943.png)

## PlantUMLの記法について

公式サイトにドキュメントが用意されているのでまずはここら辺を眺めると理解が深まります。

- [pdf guide](http://plantuml.com/ja/guide)
- [Hitchhiker's Guide](https://crashedmind.github.io/PlantUMLHitchhikersGuide/)

## 総評

WindowsなVS Code上でPlantUMLを利用する環境構築について説明しました。

個人的にPlantUMLは使いこなせれば非常に強力なツールとなりますが。

そもそもUMLを上手に書くのが難しい上に、思い描いているダイヤグラムをPlantUMLで表現するためコードに落とし込むのもまた難しいといった具合に、なかなか利用するためのハードルが高いものとなっています。

なかなかとっつきづらい部分がありますが、使いこなせると強力なツールになるかと思います。