PlantUMLは様々なコードを記述する事で様々なダイアグラムをレンダリングするソフトウェアですが、VS Code上でPlantUMLを記述してプレビューできる拡張機能も提供されています。
今回はWindows上のVS CodeでPlantUMLを利用する環境の構築について説明します。
今回利用する環境
- Windows 11 23H2
- VS Code 1.88.0
- vscode-plantuml 2.18.1
各種ドキュメントなど
公式でしっかりとしたリファレンスが用意されています。
PlantUMlの記法などは公式を参照すればわかりやすいかと思います。
なお本記事ではVS CodeとPlantUMLServerを利用するため直接参照はしませんが、PlantUMLのクイックスタートガイドにローカルインストールではローカルインストール手順が紹介されています。
VS CodeでPlantUMLを利用できるようにする拡張機能。 VS Code上でPlantUMLの記法で作成したテキストファイルのプレビューができるようになります。
今回はこちらの拡張機能を利用します。
今回インストールするVS Code拡張の説明を読むと、標準設定ではレンダリング方法Local renderが設定されていますが、PlantUMLServerを立てて利用した方がレンダリングは早いようです。
軽快に動作してくれる方がありがたいので、本記事ではPlantUMLServerを利用した環境構築について説明します。
なおLocal renderとPlantUMLServerでどれくらい描画に違いがあるかはAbout Renderに記載があります。
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をインストールすれば利用できます。
本記事ではローカル環境にVS CodeとPlantUMLをインストールして環境構築していますが、オンライン上でPlantUMLを利用できるサーバもあります。
とりあえずPlantUMLがどんなものかてっとり速く確認した場合に利用できます。
VS Code+PlantUMLの環境構築について
VS CodeのPlantUML拡張のRead MeにHow to installとして各環境へインストールの記載があるため、こちらに従ってインストール作業を行う。
VS Codeのインストール
公式のセットアップガイドがあるので下記を参照して適宜インストールして下さい。
VS Code拡張のPlantUMLのインストール
VS CodeにPlantUML拡張をインストールする。
ctrl+Pで開くコマンドパレットにext install plantumlと入力して実行するとサイドバーで該当拡張機能が検索されるのでPlantUMLをインストール。
PlantUML Server環境構築
今回、VS CodeのPlantUML拡張でレンダリング方法をlocal renderではなくPlantUML Serverを利用したいので、PlantUML Server環境を構築します。
構築方法については下記に記載があります。
説明を読むと、普通にインストールするだけではなく、Dockerを利用した方法について記載されていますが、本記事ではDockerを利用せずに環境構築してみます。
前提条件の確認（jre/jdk と apache maven）
Requirementsに下記の記載があるので、対応するバージョンをインストールします。
2024年4月現在、下記の要件となっていました。
- jre/jdk 11 or above
- apache maven 3.0.2 or above
jre/jdkのインストール
適宜、条件を満たすjre/jdkをインストールして下さい。
本記事では手軽にインストールできるのでwingetからマイクロソフトビルドなOpenJDKをインストールしています。
winget install -e --id Microsoft.OpenJDK.21
wingetでインストール後、コンソールを再起動して確認すると環境変数 PATH と JAVA_HOMEの設定までされていました。
mavenのインストール
Apatch MavenのInstalling Apache Mavenを参照してインストールしていきます。
前提としてJDKがインストールされており、環境変数PATHかJAVA_HOMEが設定されているか確認後、Downalodから最新版のファイルダウンロードし、適当な場所に展開。
環境変数PATHに展開したフォルダのbinディレクトリのパスを登録して、mvnコマンドのパスを通せばインストール環境
PlantUMLServerを起動する
jdkのインストールとmavenのインストールが完了したのでPlantUML Serverを起動してみます。
まずはvscode-plantumlのリポジトリを取得して配置。
配置したディレクトリに移動して、mvn jetty:runを実行。
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にアクセスするとPlantUMLServerが立ち上がっているのが確認できます。
PlantUMLサーバを停止する場合は処理しているコンソール上でCtrl+Cを実行すると停止するか確認するプロンプトがでるので y を入力で停止します。
dockerでの起動について
上記までで普通に環境構築して起動しましたが、ドキュメントではDockerを利用している場合についても記述があるので軽く触れておきます。
How to run the server with Docker
上記にDockerでの起動方法について説明があります。
PlantUMLServerでは jetty or tomcat container とそれぞれで用意されているようです。
下記のコマンドを実行するとPlantUMLServerが起動します。
# 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拡張設定
VS Codeの設定（ctrl+,)からPlantUMLの拡張機能を探し、RenderとServerの項目を下記画像のように変更します。
- Renderは標準の設定が
local renderになっているので、PlantUMLServerに変更 - Serverは先ほどブラウザでアクセスしたときのURL、
http://localhost:8080/plantuml/を設定
に設定されているため下記の設定を行い、PlantUMLServer renderに変更する。
"plantuml.render": "PlantUMLServer"
"plantuml.server": "http://localhost:8080/plantuml/"
VS Code上でHelloWorld
helloworld.puというファイルを作成して下記を入力
@startuml
Bob -> Alice : hello
@enduml
この状態でコマンドパレットからPlantUML:Preview Current Diagram もしくは ALT+D でプレビューが表示されます。
ファイルの拡張子について
Helloworldでは拡張子をpuにしていますが、サポートしている拡張子としては下記に記載があります。
PlantUMLServerの起動について（VS Codeのユーザータスクに登録して起動）
VS Code上でダイヤグラムをプレビューするためには、PlantUMLServerが起動している必要がありますが、毎回コマンドラインからPlantUMLServerを起動するのは面倒です。
ここでは VS Codeのユーザータスクに登録してPlantUMLServerを起動してみます。
メニューのファイルー＞ユーザー設定ー＞ユーザータスクを選択
ユーザータスクを作成した事がなければテンプレートを利用するか聞かれるので、mavenを選択。
{
// 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": []
},
]
}
Ctrl+Shift+Pからタスクの実行
登録した Start PlantUMLServerタスクを実行
裏でPlantUMLServerが起動されます。
PlantUMLの記法について
公式サイトにドキュメントが用意されているのでまずはここら辺を眺めると理解が深まります。
総評
WindowsなVS Code上でPlantUMLを利用する環境構築について説明しました。
個人的にPlantUMLは使いこなせれば非常に強力なツールとなりますが。
そもそもUMLを上手に書くのが難しい上に、思い描いているダイヤグラムをPlantUMLで表現するためコードに落とし込むのもまた難しいといった具合に、なかなか利用するためのハードルが高いものとなっています。
なかなかとっつきづらい部分がありますが、使いこなせると強力なツールになるかと思います。