この記事では、VS CodeにPlantUMLを導入して、UML図をテキストで作成・プレビュー・PNG/SVG出力する方法を解説します。

はじめに

PlantUMLは、テキストを書くだけでUML図を作成できるツールです。シーケンス図、クラス図、状態遷移図、ユースケース図などを、コードのように管理できます。

通常、UML図を書くときはマウスで図形を並べたり、線をつないだりします。一方、PlantUMLでは、次のような短いテキストから図を生成できます。

@startuml
Alice -> Bob: Hello
@enduml

テキストで図を書けるため、次のようなメリットがあります。

図の修正がしやすい
Gitで変更履歴を管理しやすい
設計書やREADMEと一緒に管理しやすい
同じ書き方で複数の図を作れる

VS CodeでPlantUMLを使うと、.pumlファイルを編集しながらすぐにプレビューでき、作成した図をPNGやSVGとして出力できます。

必要なもの
1. ローカル描画とPlantUML Server描画の違い
Javaをインストールする方法
1. Javaのインストール確認
Graphvizをインストールする方法
1. Graphvizのインストール確認
VS CodeにPlantUML拡張機能をインストール
PlantUMLファイルを作成する
プレビューを表示する
PNGやSVGとして出力する
まとめ

必要なもの

VS CodeでPlantUMLを使うには、次のものを用意します。

Visual Studio Code
PlantUML拡張機能
Java
Graphviz

使用する拡張機能は、VS Code MarketplaceのPlantUMLです。作者がjebbsのものを選びます。拡張機能IDはjebbs.plantumlです

ローカル描画とPlantUML Server描画の違い

描画方法	特徴
Local	自分のPC上でJavaとPlantUMLを使って描画します。
PlantUMLServer	PlantUML Serverに図の内容を送って描画します。チームでサーバーを用意している場合に便利です。

Local描画ではJavaが必要です。Graphvizも基本的には必要ですが、WindowsではPlantUML拡張機能にPlantUML jarとGraphvizが同梱されており、通常はそのまま動く場合があります。エラーが出る場合や別バージョンを使いたい場合は、GraphvizをインストールしてPATHまたはGRAPHVIZ_DOTを設定します。

Javaをインストールする方法

Windowsでは、Adoptium Temurin JDKを入れる方法が分かりやすいです。JDKはJava Development Kitの略で、Javaを動かすために必要な実行環境を含んだパッケージです。

Windows 10/11でwingetが使える場合は、PowerShellまたはコマンドプロンプトで次のコマンドを実行します。

インストールコマンド:

winget install -e --id EclipseAdoptium.Temurin.21.JDK
...
Do you agree to all the source agreements terms?
[Y] Yes  [N] No: Y　　//　＜－同意する
Found Eclipse Temurin JDK with Hotspot 21 [EclipseAdoptium.Temurin.21.JDK] Version 21.0.11.10
This application is licensed to you by its owner.
Microsoft is not responsible for, nor does it grant any licenses to, third-party packages.
Downloading https://github.com/adoptium/temurin21-binaries/releases/download/jdk-21.0.11+10/OpenJDK21U-jdk_x64_windows_hotspot_21.0.11_10.msi
  ██████████████████████████████   171 MB /  171 MB
Successfully verified installer hash
Starting package install...
Successfully installed //　＜－成功

wingetが使えない場合は、Adoptium公式サイトからWindows用のTemurin JDKをダウンロードしてインストールします。LTS版のJava 21を選ぶとよいでしょう。LTSはLong Term Supportの略で、長期間サポートされる安定版という意味です。

Javaのインストール確認

インストール後は、開いているコマンドプロンプトやPowerShellをいったん閉じて、もう一度開き直します。そのうえで次のコマンドを実行します。

確認コマンド:

> java -version
// 実行結果
openjdk version "21.0.11" 2026-04-21 LTS
OpenJDK Runtime Environment Temurin-21.0.11+10 (build 21.0.11+10-LTS)
OpenJDK 64-Bit Server VM Temurin-21.0.11+10 (build 21.0.11+10-LTS, mixed mode, sharing)

バージョンが表示されればJavaは使えます。次のように表示される場合は、Javaが未インストール、またはPATHが通っていません。

'java'は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。

Javaをインストールしたのにjavaコマンドが見つからない場合は、PATHが反映されていない可能性があります。まずはコマンドプロンプト、PowerShell、VS Codeをすべて開き直してください。それでも解決しない場合は、Windowsを再起動してから再確認します。再起動後も失敗する場合は、Javaのbinフォルダが環境変数PATHに追加されているか確認します。

Graphvizをインストールする方法

Graphvizは、図の要素や線の配置を計算するためのツールです。特にクラス図やコンポーネント図などで使われます。
Windows 10/11でwingetが使える場合は、PowerShellまたはコマンドプロンプトで次のコマンドを実行します。

インストールコマンド:

winget install -e --id Graphviz.Graphviz
// 実行結果
Found Graphviz [Graphviz.Graphviz] Version 15.0.0
This application is licensed to you by its owner.
Microsoft is not responsible for, nor does it grant any licenses to, third-party packages.
Downloading https://gitlab.com/api/v4/projects/4207231/packages/generic/graphviz-releases/15.0.0/windows_10_cmake_Release_graphviz-install-15.0.0-win64.exe
  ██████████████████████████████  7.70 MB / 7.70 MB
Successfully verified installer hash
Starting package install...
Successfully installed

wingetが使えない場合は、Graphviz公式サイトのダウンロードページからWindows用インストーラーを入手してインストールします。

Graphvizのインストール確認

インストール後は、コマンドプロンプトやPowerShellを開き直して次のコマンドを実行します。

確認コマンド:

> dot -V
dot - graphviz version 15.0.0 (20260523.1842)

dotはGraphvizに含まれるコマンドです。バージョンが表示されればGraphvizは使えます。次のように表示される場合は、Graphvizが未インストール、またはPATHが通っていません。

'dot' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。

この場合は、GraphvizのbinフォルダがPATHに入っていない可能性があります。多くの環境では、次のパスをPATHに追加します。

C:\Program Files\Graphviz\bin

また、PlantUML拡張機能からGraphvizの場所を明示したい場合は、環境変数GRAPHVIZ_DOTに次のようにdot.exeのフルパスを設定します。

C:\Program Files\Graphviz\bin\dot.exe

PATHや環境変数を変更したあとは、まずVS Codeを再起動してください。コマンドプロンプトでは認識されるのにVS Codeでは認識されない場合、VS Codeが古い環境変数のまま起動していることがあります。それでも解決しない場合は、Windowsを再起動してから再確認するのが確実です。

VS CodeにPlantUML拡張機能をインストール

VS Codeを開き、左側の拡張機能アイコンをクリックします。検索欄に次のように入力します。

PlantUML

「インストール」をクリックします。

PlantUMLファイルを作成する

VS Codeで作業フォルダを開き、sample.pumlを作成します。

PlantUMLのファイル拡張子は、.pumlや.puなどが使えます。VS CodeのPlantUML拡張機能も両方に対応しています。この記事では、PlantUMLファイルだと分かりやすい.pumlを使います。

次の内容を入力します。

@startuml
title サンプルシーケンス図

ユーザー -> VSCode: PlantUMLファイルを作成
VSCode -> PlantUML: 図を生成
PlantUML --> VSCode: プレビュー表示

@enduml

@startumlから@endumlまでが1つの図として扱われます。このサンプルは、処理の流れやメッセージのやり取りを時系列で表すシーケンス図です。

プレビューを表示する

sample.pumlを開いた状態で、次のショートカットを押します。

Alt + D

成功すると、VS Code内にPlantUMLのプレビューが表示されます。

PNGやSVGとして出力する

PlantUML拡張機能では、図を画像として出力できます。

ここで説明するエクスポート手順は、主にLocal描画を前提にしています。PlantUML Server描画を使っている場合は、サーバー設定やVS Code拡張機能の設定によって、利用できる出力形式や動作が変わることがあります。

sample.pumlを開いた状態で右クリックし、PlantUMLのExportメニューを選びます。

コマンドパレットから実行する場合は、Ctrl + Shift + Pを押して、次のようなコマンドを検索します。

PlantUML: Export Current Diagram
PlantUML: Export Current File Diagrams

カーソル位置のダイアグラムをエクスポートまたはPlantUML: Export Current Diagramは、カーソル位置のダイアグラムだけを出力します。1つの.pumlファイルに複数の図がある場合、いまカーソルがある図だけを出力したいときに使います。

ファイル内のダイアグラムをクスポートまたはPlantUML: Export Current File Diagramsは、開いているファイル内のすべてのダイアグラムをまとめて出力します。1つのファイルに複数の@startumlから@endumlまでの図を書いている場合に便利です。
出力形式は、PNGやSVGなどを選べます。

形式	用途
PNG	WordPress、PowerPoint、チャット共有向け
SVG	Webページや拡大表示向け
PDF	印刷・資料化向け

まとめ

VS Codeに作者jebbsのPlantUML拡張機能を入れると、UML図をテキストで作成し、Alt + Dでプレビューできます。

Local描画ではJavaが必要です。GraphvizはWindowsでは同梱版で動くこともありますが、エラーが出る場合はGraphvizをインストールし、PATHまたはGRAPHVIZ_DOTを設定すると解決しやすくなります。

PlantUMLはGit管理と相性がよく、設計図の変更履歴を残せます。まずはシーケンス図から始め、慣れてきたらクラス図や状態遷移図にも挑戦してみましょう。

以上

VS CodeにPlantUMLを導入する方法｜画像出力まで解説