【VSCode】PlantUMLを使用する環境構築

VSCodeでPlantUMLを使用する手順についてまとめました。

DB設計をする際に使えそうなツールがないかと調べていたところでPlantUMLが良さそうということで、導入してみました。

PlantUMLとは

ユースケース図やクラス図、ER図など、さまざまなダイアグラムをテキストベースで作成できるツールです。
専用の記述ルールでコードを書くと、それをもとに図としてアウトプットしてくれます。
gitなどのバージョン管理ツールで管理することもでき、便利です。

実行環境（OSや各種バージョンなど）

今回、試した環境は、以下のとおりです。

環境構築

PlantUML公式サイトのクイックスタートガイドに沿って進めます。

PlantUML.com

クイックスタートガイド

https://plantuml.com/ja/starting

PlantUML をとりあえず使ってみたい！という人向けのガイドです。

事前準備

JavaとGraphVizがインストールされている必要があります。
Windowsの場合、GraphVizはPlantUMLに含まれているので別途インストールは必要ないそうです。

以下のコマンドでJavaがインストールされているかを確認できます。

java -version

インストールされていない場合は、https://www.oracle.com/java/technologies/からダウンロードしてインストールします。

インストール完了後に、再度バージョン確認コマンドを実行すると、インストールしたバージョンが返ってきます。

$ java -version
java version "21.0.5" 2024-10-15 LTS
Java(TM) SE Runtime Environment (build 21.0.5+9-LTS-239)
Java HotSpot(TM) 64-Bit Server VM (build 21.0.5+9-LTS-239, mixed mode, sharing)  

VSCodeに拡張機能「PlantUML」をインストール

VSCodeを開いて、拡張機能「PlantUML」をインストールします。
①左側のツールバーから「Extensions」を選択して、拡張機能パネルを開きます。
②検索バーに「PlantUML」と入力します。
③該当の拡張機能を選択します。
④「Install」をクリックして、拡張機能をインストールします。

動作確認

VSCodeで、PlantUMLのコードを記述したファイル（XXX.puml）を作成します。
https://plantuml.com/ja/themeに示されているコードなどを使うと良いです。

VSCodeの右側にある[カーソル位置のダイアグラムをプレビュー（Preview Current Diagram）]ボタンをクリック（もしくは、Alt+D）すると、コードのプレビューが確認できます。

期待どおりのプレビューになっていれば成功です。

Haruna Abe

Webエンジニア

X

フロントエンドエンジニア２年目｜ReactやTypeScriptなど、フロントエンドの情報を発信していきます