初心者向け：VS CodeでPlantUMLプレビューを始める方法

初心者向け：VS CodeでPlantUMLプレビューを始める方法 – 設計図を手軽に描こう

システム開発やドキュメント作成において、アイデアや構造を視覚的に表現することは非常に重要です。UML（Unified Modeling Language）をはじめとする様々な図は、複雑な概念を明確に伝え、関係者間の共通理解を深めるのに役立ちます。しかし、「図を描く」と聞くと、専用のツールを立ち上げて要素を配置し、線を引いて…といった手間を想像し、少し億劫に感じる方もいるかもしれません。

そこで注目されているのが、テキストベースで図を描けるツールです。中でも「PlantUML」は、シンプルで直感的な構文を使って、シーケンス図、ユースケース図、クラス図、アクティビティ図など、様々な種類の図を簡単に生成できます。そして、このPlantUMLを、多くの開発者が愛用する高機能テキストエディタ「Visual Studio Code（VS Code）」と組み合わせることで、図の作成・編集・確認のワークフローが劇的に効率化されます。

この記事では、プログラミング初心者の方や、これまで図をあまり描いてこなかった方でも、VS Codeを使ってPlantUMLのプレビューを手軽に始められるようになることを目指します。PlantUMLとVS Codeを使う理由から、必要な準備、拡張機能のインストール、基本的な使い方、そして困ったときの対処法まで、ステップバイステップで詳しく解説します。

さあ、VS CodeとPlantUMLを使って、あなたのアイデアを分かりやすい図にしてみましょう！

第1章：はじめに – なぜPlantUMLとVS Codeを使うのか

1.1 PlantUMLとは？テキストで図を描く力

PlantUMLは、オープンソースの作図ツールです。最大の特徴は、図形要素を配置したり、線をドラッグ＆ドロップで引いたりする代わりに、プレーンテキストで記述されたコード（構文）を解析して図を生成する点にあります。

例えば、登場人物（アクター）がいて、別の登場人物にメッセージを送る、というシーケンス図を描きたい場合、PlantUMLでは以下のようなコードで表現できます。

plantuml @startuml Alice -> Bob: Hello @enduml

このシンプルなテキストが、アリスとボブ、そして「Hello」というメッセージが書かれた矢印を含むシーケンス図として描画されます。

テキストベースで図を描くことには、いくつかの大きなメリットがあります。

習得しやすいシンプルさ: 図形ツールを使った複雑な操作を覚える必要はありません。基本的な構文をいくつか覚えるだけで、多様な図を描き始められます。
編集・修正の容易さ: 図の要素の位置調整や線の引き直しといった面倒な作業が不要です。テキストを修正するだけで図が自動的に更新されます。要素の追加や削除も簡単です。
バージョン管理との親和性: 図の定義がテキストファイルとして保存されるため、Gitなどのバージョン管理システムで容易に管理できます。変更履歴の追跡、差分（Diff）の確認、マージといった操作が、コードファイルと同じように行えます。これは、複数人で協力して図をメンテンスする上で非常に強力です。
他のドキュメントとの連携: MarkdownやAsciiDocといったドキュメント形式の中にPlantUMLコードを埋め込み、ドキュメントと図を一体として管理・生成することが可能です。
自動化の可能性: テキストファイルなので、スクリプトを使って図の生成を自動化したり、CI/CDパイプラインに組み込んだりすることもできます。

PlantUMLは、UML（シーケンス図、ユースケース図、クラス図、アクティビティ図、ステートマシン図、コンポーネント図、配置図、オブジェクト図、パッケージ図）だけでなく、非UMLダイアグラム（ワイヤーフレーム、アーキテクチャ図、マインドマップ、ガントチャート、ネットワーク図など）にも対応しており、その表現力の幅広さも魅力です。

1.2 Visual Studio Codeとは？現代的な開発環境

Visual Studio Code（VS Code）は、Microsoftが開発した、無料で利用できる高機能なソースコードエディタです。軽量でありながら、デバッグ機能、Git統合、シンタックスハイライト、インテリセンス（コード補完）、スニペットといった開発を効率化するための豊富な機能を備えています。

VS Codeの最大の強みの一つは、その強力な「拡張機能（Extension）」エコシステムです。様々なプログラミング言語のサポート、フレームワーク連携、lint/formatツール、デバッグアダプターなど、世界中の開発者が作成した膨大な数の拡張機能が公開されており、ユーザーは自分の開発スタイルやプロジェクトに合わせてVS Codeを自由にカスタマイズ・強化できます。

1.3 VS CodeとPlantUMLを組み合わせるメリット

VS CodeとPlantUMLを組み合わせることで、テキストベースの作図というPlantUMLの良さを最大限に引き出しつつ、VS Codeの快適な編集環境と強力なプレビュー機能を享受できます。

シームレスな編集とプレビュー: VS Code上でPlantUMLコードを記述しながら、別のペインにリアルタイムで表示される図を確認できます。コードを変更するたびに図が自動的に更新されるため、試行錯誤しながら効率的に図を作成できます。
コード補完とシンタックスハイライト: PlantUML拡張機能は、PlantUML構文のシンタックスハイライトやコード補完を提供します。これにより、構文エラーを防ぎ、記述を効率化できます。
ファイル管理: VS Codeのエクスプローラーを使って、プロジェクト内のPlantUMLファイルを他のコードファイルやドキュメントと一緒に整理・管理できます。
統合されたワークフロー: 図の作成・編集から、コード記述、バージョン管理まで、すべてVS Codeという単一のツール内で完結できます。

この記事の対象読者は、プログラミング経験が少ない方、またはPlantUMLを初めて使う方です。PlantUMLの高度な機能すべてを網羅するわけではありませんが、VS CodeでPlantUMLファイルの作成、編集、そして最も重要な「プレビュー」をスムーズに行えるようになることを目指します。

次の章から、実際にVS CodeでPlantUMLを使うための具体的な準備に入りましょう。

第2章：PlantUMLを使うための準備

PlantUMLは、その図の描画処理を行うために、いくつかの外部ソフトウェアに依存しています。主に必要なのはJava実行環境と、場合によってはGraphvizというソフトウェアです。

2.1 Java実行環境 (JRE/JDK) のインストール

PlantUML本体はJavaで書かれているため、実行にはJava実行環境（JRE: Java Runtime Environment）が必要です。もし、あなたのコンピューターに既にJavaがインストールされている場合は、このステップをスキップできるかもしれません。ただし、多くのモダンなJavaバージョンがサポートされており、最新または比較的新しいバージョンが推奨されます。

Javaがインストールされているか確認する:

コマンドプロンプト（Windows）またはターミナル（macOS/Linux）を開き、以下のコマンドを入力してEnterキーを押します。

bash java -version

もしJavaがインストールされていれば、バージョン情報が表示されます。例えば：

openjdk version "11.0.11" 2021-04-20 OpenJDK Runtime Environment (build 11.0.11+9-LTS) OpenJDK 64-Bit Server VM (build 11.0.11+9-LTS, mixed mode)

または

java version "1.8.0_291" Java(TM) SE Runtime Environment (build 1.8.0_291-b10) Java HotSpot(TM) 64-Bit Server VM (build 25.291-b10, mixed mode)

バージョン情報が表示されず、「’java’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」といったエラーが表示される場合は、Javaがインストールされていないか、正しく設定されていません。

Javaのインストール方法:

Java実行環境にはいくつか種類がありますが、ここではオープンソースで広く利用されているOpenJDKディストリビューションを推奨します。例えば、Adoptium（旧 AdoptOpenJDK）のTemurinなどが信頼できます。

Adoptium (Temurin) のウェブサイトにアクセス: https://adoptium.net/
適切なJavaバージョンとオペレーティングシステムを選択: LTS (Long-Term Support) バージョンの最新版（例: Java 11, Java 17, Java 21など）と、ご自身のOS（Windows, macOS, Linux）を選択します。JDK（Java Development Kit）にはJREが含まれているため、通常はJDKをインストールすればOKです。
インストーラーをダウンロード: 選択したOSとアーキテクチャ（32bit or 64bit）に合ったインストーラーをダウンロードします。
インストーラーを実行:
- Windows: ダウンロードした .msi ファイルを実行します。インストールオプションでは、「Set JAVA_HOME variable」にチェックを入れることを推奨します。また、「Add to PATH」も通常チェックされています。これで、コマンドプロンプトから java コマンドが実行できるようになります。インストールウィザードの指示に従ってインストールを完了してください。
- macOS: ダウンロードした .pkg ファイルを実行します。インストーラーの指示に従ってインストールを完了します。macOSの場合、通常はインストール後に自動的にPATHが設定されます。
- Linux: ディストリビューションのパッケージマネージャー（apt, yum, dnfなど）を使うのが最も簡単です。例えば、Debian/Ubuntu系なら sudo apt update && sudo apt install openjdk-VERSION-jdk のようにコマンドを実行します（VERSION はバージョン番号）。手動でインストールする場合も、Adoptiumサイトからアーカイブをダウンロードして展開し、環境変数を設定する必要があります。
インストール後の確認: 新しいコマンドプロンプト/ターミナルウィンドウを開き直し、再度 java -version コマンドを実行して、バージョン情報が表示されることを確認してください。

環境変数 PATH と JAVA_HOME:

java -version コマンドが実行できるのは、Java実行ファイルへのパスが環境変数 PATH に含まれているためです。多くのインストーラーは自動的に設定してくれます。

また、一部のソフトウェア（PlantUML拡張機能を含む）は、環境変数 JAVA_HOME を参照してJavaのインストールディレクトリを探す場合があります。WindowsのAdoptiumインストーラーで「Set JAVA_HOME variable」にチェックを入れた場合は設定済みです。手動で設定する場合は、Javaがインストールされたディレクトリ（JDKのルートディレクトリ）を指すように設定します。

Windows:
1. 「システムのプロパティ」を開き、「環境変数」をクリックします。
2. 「システム環境変数」の欄で「新規」をクリックします。
3. 変数名に JAVA_HOME、変数値にJavaのインストールディレクトリ（例: C:\Program Files\Eclipse Adoptium\jdk-11.0.11.9-hotspot）を指定してOKをクリックします。
4. PATH 環境変数に %JAVA_HOME%\bin が含まれていることを確認します。含まれていない場合は編集して追加します。
macOS/Linux:
設定ファイル（例: ~/.bash_profile, ~/.zshrc）に以下の行を追加します。
bash export JAVA_HOME=$(/usr/libexec/java_home) # macOSの場合 # または特定のパスを指定 (Linuxの場合など) # export JAVA_HOME=/path/to/your/jdk export PATH=$JAVA_HOME/bin:$PATH
ファイルを保存し、ターミナルを再起動するか、source ~/.bash_profile のように設定ファイルを再読み込みします。

これらの環境変数設定は、コマンドラインからJava関連のツールを実行する際に重要になります。VS Code拡張機能が内部でPlantUMLを実行する際にも利用される可能性があります。

2.2 Graphviz (DOTエンジン) のインストール

PlantUMLは、クラス図やユースケース図、アクティビティ図など、いくつかの種類の図を描画する際に、Graphvizという別のオープンソースソフトウェアを利用します。Graphvizは、特にノード（要素）とエッジ（線）の関係から自動的に最適な配置を計算して図を生成するのに優れています。PlantUMLでGraphvizが必要な図をローカルでレンダリングする場合、Graphvizがインストールされている必要があります。

Graphvizがインストールされているか確認する:

コマンドプロンプト/ターミナルを開き、以下のコマンドを入力してEnterキーを押します。

bash dot -V

もしGraphvizがインストールされていれば、バージョン情報が表示されます。例えば：

dot - graphviz version 2.49.3 (20211023.0002)

エラーが表示される場合は、Graphvizがインストールされていないか、正しく設定されていません。

Graphvizのインストール方法:

Graphvizのウェブサイトにアクセス: https://graphviz.org/download/
ご自身のOSに合ったインストーラーまたはパッケージを探す:
- Windows: 「Stable releases」セクションからWindows版のインストーラー（通常は graphviz-VERSION.msi のような名前）をダウンロードします。インストーラーを実行する際に、「Add Graphviz to the system PATH for all users」またはそれに類するオプションを選択することを強く推奨します。これで、コマンドプロンプトから dot コマンドが実行できるようになります。
- macOS: Homebrewを使っている場合、ターミナルで brew install graphviz コマンドを実行するのが最も簡単です。Homebrewがインストールされていない場合は、まずHomebrewをインストールしてください (https://brew.sh/index_ja)。Homebrewを使うと、パスの設定も自動で行われます。
- Linux: ディストリビューションのパッケージマネージャーを使います。Debian/Ubuntu系なら sudo apt update && sudo apt install graphviz、Fedora系なら sudo dnf install graphviz、RHEL/CentOS系なら sudo yum install graphviz のようにコマンドを実行します。
インストール後の確認: 新しいコマンドプロンプト/ターミナルウィンドウを開き直し、再度 dot -V コマンドを実行して、バージョン情報が表示されることを確認してください。

環境変数 PATH:

dot -V コマンドが実行できるためには、Graphvizの実行ファイル（dot コマンドなど）へのパスが環境変数 PATH に含まれている必要があります。インストーラーによっては自動的に設定されますが、そうでない場合は手動で PATH にGraphvizの bin ディレクトリへのパスを追加する必要があります。Javaの PATH 設定と同様の手順で行います。

PlantUMLは、デフォルトではシステム全体の PATH を検索して java や dot コマンドを見つけようとします。もしVS CodeのPlantUML拡張機能がこれらのコマンドを見つけられない場合は、後述する拡張機能の設定で、それぞれの実行ファイルのフルパスを明示的に指定することも可能です。

第3章：VS Codeの準備とPlantUML拡張機能のインストール

PlantUMLを使うための準備が整ったら、次はVS Code側でPlantUMLを扱うための準備を行います。

3.1 VS Codeのインストール (まだの場合)

まだVS Codeをインストールしていない場合は、以下の手順でインストールしてください。

VS Code公式サイトにアクセス: https://code.visualstudio.com/
ご自身のオペレーティングシステム（Windows, macOS, Linux）に合ったダウンロードボタンをクリックして、インストーラーをダウンロードします。
ダウンロードしたインストーラーを実行し、指示に従ってインストールを完了します。Windows版のインストーラーでは、「Code を PATH に追加する (再起動後に利用可能)」にチェックを入れておくと、コマンドプロンプトから code . と入力してVS Codeを開けるようになり便利です。

インストールが完了したら、VS Codeを起動してみましょう。

3.2 PlantUML拡張機能のインストール

VS Code上でPlantUMLのコードを編集し、プレビューを表示するには、専用の拡張機能が必要です。公式に近く、最も広く使われているのは、Jake Bathurst氏によって開発された「PlantUML」拡張機能です。

拡張機能のインストール手順は以下の通りです。

VS Codeを起動します。
拡張機能ビューを開きます。
- 左側のアクティビティバーにある四角が3つと少し離れて1つあるアイコン（拡張機能アイコン）をクリックします。
- または、キーボードショートカット Ctrl+Shift+X (Windows/Linux) または Cmd+Shift+X (macOS) を押します。
(注: この画像は架空のものです。実際のVS Codeのアイコンを参照してください)
拡張機能ビューの検索ボックスに「PlantUML」と入力します。
検索結果に、様々なPlantUML関連の拡張機能が表示されます。探しているのは、通常「PlantUML」という名前で、作者名が jebbs または類似のもので、インストール数が多く、評価が高いものです。（2023年現在、最も一般的なのは PlantUML by jebbs です）。

(注: この画像は架空のものです。実際のVS Codeの検索結果を参照してください)
目的のPlantUML拡張機能を見つけたら、その項目をクリックして詳細を表示します。
詳細ビューの左上にある「インストール」ボタンをクリックします。

(注: この画像は架空のものです。実際のVS Codeの画面を参照してください)
インストールが完了すると、「インストール」ボタンが「管理」ボタンに変わります。これでPlantUML拡張機能がVS Codeに組み込まれました。

インストール後、VS Codeを再起動することを推奨します。これにより、拡張機能が完全に読み込まれ、正しく機能するようになります。

これで、VS CodeでPlantUMLコードを記述し、プレビューを表示する準備が整いました。

第4章：VS CodeでのPlantUMLプレビューの基本

いよいよ、VS CodeでPlantUMLコードを書いて、その場で図を確認してみましょう。

4.1 新しいPlantUMLファイルの作成

VS Codeで新しいファイルを作成します。File メニューから New Text File を選択するか、ショートカット Ctrl+N (Windows/Linux) または Cmd+N (macOS) を押します。
作成したファイルを保存します。File メニューから Save As... を選択するか、ショートカット Ctrl+S (Windows/Linux) または Cmd+S (macOS) を押します。
ファイル名を入力する際、拡張子を .puml または .plantuml とします。例えば sequence_diagram.puml のように名前を付けて保存します。VS Codeはファイルの拡張子を見て、そのファイルの種類を認識し、適切なシンタックスハイライトなどを適用します。.puml または .plantuml という拡張子により、VS CodeはこれがPlantUMLファイルであると認識します。

4.2 PlantUMLコードを書いてみる

保存した .puml ファイルに、PlantUMLコードを記述します。すべてのPlantUMLコードは、@startuml で始まり、@enduml で終わる必要があります。このブロックの中に、図を構成する要素や関係をテキストで記述していきます。

最もシンプルな例として、先ほども紹介したシーケンス図を書いてみましょう。

“`plantuml
@startuml

Alice -> Bob: Hello from Alice
Bob -> Alice: Hi Alice, how are you?

@enduml
“`

コードを入力すると、PlantUML拡張機能によってシンタックスハイライトが適用され、キーワードや要素が色分けされて表示されるはずです。

4.3 PlantUMLプレビューの起動方法

VS CodeでPlantUMLコードを入力したら、以下のいずれかの方法で図のプレビューを表示できます。

方法1：コマンドパレットを使う

これは最も一般的で柔軟な方法です。

VS Codeのコマンドパレットを開きます。View メニューから Command Palette... を選択するか、ショートカット Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (macOS) を押します。
コマンドパレットが表示されたら、「PlantUML」と入力し始めます。PlantUML拡張機能に関連するコマンドの候補が表示されます。
候補の中から「PlantUML: Preview Current Diagram」を選択し、Enterキーを押します。

(注: この画像は架空のものです。実際のVS Codeのコマンド候補を参照してください)

方法2：ショートカットキーを使う

PlantUML拡張機能には、プレビュー表示のためのデフォルトのショートカットキーが割り当てられています。

デフォルトのショートカットキーは Alt+D (Windows/Linux) または Option+D (macOS) です。

.puml ファイルを開いた状態でこのショートカットキーを押すと、プレビューが表示されます。もしこのショートカットが他の機能と競合しているなどで使えない場合は、VS Codeの設定でショートカットキーを変更することも可能です。

方法3：右クリックメニューを使う

エディター内で右クリックすると表示されるコンテキストメニューにも、PlantUELプレビュー関連の項目が含まれている場合があります。

.puml ファイルのエディター内で右クリックします。
メニュー項目の中から「PlantUML: Preview Current Diagram」を選択します。

(注: この画像は架空のものです。実際のVS Codeのメニューを参照してください)

方法4：VS Codeのステータスバーを使う

PlantUML拡張機能が有効になっている場合、VS Codeウィンドウの下部にあるステータスバーにPlantUML関連の情報が表示されることがあります。ここにプレビュー起動用のアイコンやボタンが表示される拡張機能もあります。

4.4 プレビューウィンドウの操作

いずれかの方法でプレビューを起動すると、通常はVS Codeウィンドウの右側または別のペインに、PlantUMLコードから生成された図が表示されます。

リアルタイム更新: コードを編集してファイルを保存すると、プレビューの図が自動的に更新されます。これがVS CodeでPlantUMLを使う最大の利点の一つです。自動更新が有効になっているか、設定を確認できます (後述)。
拡大縮小: プレビューウィンドウにマウスカーソルを合わせると、図を拡大・縮小するための操作（通常はマウスホイール）が有効になる場合があります。
スクロール: 図が大きい場合は、プレビューウィンドウ内でスクロールして全体を確認できます。
プレビューの閉じる: プレビューペインのタブにある「X」ボタンをクリックするか、再度プレビュー起動コマンド/ショートカットを実行してプレビューをトグル（表示/非表示切り替え）することで閉じられます。

これで、あなたはVS Code上でPlantUMLコードを書き、リアルタイムで図を確認する基本的なワークフローを習得しました。次は、より実践的なPlantUMLの基本的な書き方を見ていきましょう。

第5章：より実践的なPlantUMLの書き方とプレビュー

PlantUMLは様々な種類の図を描けます。ここでは、初心者の方がよく使うであろう図の種類について、基本的な書き方とVS Codeでのプレビューでの見え方を紹介します。

5.1 シーケンス図

システムやオブジェクト間のメッセージのやり取り（時間の流れに沿った相互作用）を表現するのに使われます。

参加者 (Participants): 図に参加する要素を定義します。以下のようなキーワードがあります。
- participant: 汎用的な参加者
- actor: 外部のユーザーやシステム
- boundary: システムの境界（UIなど）
- control: ロジックを制御する要素
- entity: データを保持する要素
- database: データベース
- collections: 要素の集合
- queue: キュー
participant キーワードを省略して、メッセージの送受信を記述するだけで自動的に参加者が生成されることも多いですが、明示的に定義することで表示順序などを制御できます。

“`plantuml
@startuml
actor User
participant “Frontend” as FE
participant “Backend” as BE
database “Database” as DB

User -> FE: リクエストを送信
FE -> BE: API呼び出し (データ取得)
BE -> DB: クエリ実行
DB –> BE: 結果を返す
BE –> FE: レスポンスを返す
FE –> User: 結果を表示

@enduml
“`
プレビュー: 各参加者が垂直方向に並び、メッセージが水平方向の矢印で時間の流れ（上から下）に沿って描画されます。
メッセージ: -> や <-- のような矢印記号を使って、参加者間のメッセージの流れを表現します。
- A -> B: メッセージ: AからBへの同期メッセージ
- A ->> B: メッセージ: AからBへの非同期メッセージ
- A <- B: メッセージ: BからAへの同期応答メッセージ
- A <<-- B: メッセージ: BからAへの非同期応答メッセージ
- メッセージテキストは : の後に記述します。
ライフライン: 参加者の生存期間を表現します。メッセージの送受信があると自動的に生成されますが、activate / deactivate / destroy キーワードで明示的に制御することもできます。
フラグメント (代替、オプション、ループなど): alt (代替), opt (オプション), loop (繰り返し) などのキーワードで、メッセージの流れを構造化できます。
“`plantuml
@startuml
participant Client
participant Server

Client -> Server: ログイン要求
alt 認証成功
Server –> Client: ログイン成功レスポンス
Client -> Server: データ取得リクエスト
Server –> Client: データレスポンス
else 認証失敗
Server –> Client: エラーレスポンス
end

Client -> Server: 何か処理を要求
loop 複数回繰り返す処理
Server -> Server: 内部処理
end

@enduml
`` **プレビュー:**alt/else/endやloop/end` で囲まれた領域が、点線または実線の箱で表現されます。

5.2 ユースケース図

システムと外部のアクター（ユーザーや他のシステム）の相互作用、つまりシステムが提供する機能（ユースケース）を表現します。

アクター (Actors): システムと相互作用する外部要素。actor アクター名 で定義します。人間だけでなく、他のシステムやデバイスなどもアクターになります。
ユースケース (Use Cases): システムが提供する機能やサービス。usecase ユースケース名 で定義します。通常、楕円で描画されます。
関連 (Relationships): アクターとユースケース、またはユースケース同士の関係を表します。
- アクター -- ユースケース: アクターがユースケースを利用する基本的な関連。
- ユースケース1 --|> ユースケース2: 汎化（継承）関係。
- ユースケース1 ..> ユースケース2 : include: 包含関係。ユースケース1の実行中にユースケース2が常に実行される。
- ユースケース1 <.. ユースケース2 : extend: 拡張関係。ユースケース2の実行中に特定の条件下でユースケース1が実行される。
システムの境界: rectangle キーワードで、システムが提供するユースケースを囲むことができます。

“`plantuml
@startuml
left to right direction

actor “顧客” as Customer
actor “管理者” as Admin

rectangle “オンラインストア” {
usecase “商品を閲覧する” as Browse
usecase “カートに入れる” as AddToCart
usecase “購入手続きを行う” as Checkout
usecase “注文履歴を確認する” as ViewOrders
usecase “商品を管理する” as ManageProducts
usecase “顧客情報を管理する” as ManageCustomers
}

Customer — Browse
Customer — AddToCart
Customer — Checkout
Customer — ViewOrders

Admin — ManageProducts
Admin — ManageCustomers

AddToCart .> Browse : include
Checkout .> AddToCart : include
Checkout <. (クレジットカード決済) : extend
Checkout <. (銀行振込決済) : extend

@enduml
`` **プレビュー:** アクターは棒人間、ユースケースは楕円、関連は線で描画されます。rectangleで囲まれた部分は箱で表現されます。left to right direction` で図の向きを左右に変更しています。

5.3 クラス図

システム内のクラス、その属性（フィールド）、操作（メソッド）、およびクラス間の静的な関係（関連、継承、実装など）を表現します。

クラス (Classes): class クラス名 で定義します。クラスの中には、属性と操作を記述できます。
- クラス名 { ... }: 波括弧の中に属性と操作を記述します。
- 属性は - 属性名 : 型、操作は + 操作名(引数): 戻り値型 のように可視性記号（+public, -private, #protected, ~package）を付けて記述することが多いです。
関連 (Relationships): クラス間の関係を矢印や線で表現します。
- ClassA -- ClassB: 関連
- ClassA "1" -- "*" ClassB: 多重度付き関連
- ClassA o-- ClassB: 集約 (Aggregation) – 全体(A)が部分(B)を含むが、部分(B)は全体(A)なしでも存在しうる
- ClassA *-- ClassB: コンポジション (Composition) – 全体(A)が部分(B)を含む、部分(B)は全体(A)なしでは存在しえない
- ClassA <|-- ClassB: 汎化（継承） – BがAを継承する
- ClassA <|.. ClassB: 実装 (Implementation) – BがA(インターフェースなど)を実装する
- ClassA --> ClassB: 依存 (Dependency)
“`plantuml
@startuml

class Animal {
+ name : String
+ age : int
+ eat() : void
}

class Dog {
+ breed : String
+ bark() : void
}

class Cat {
+ color : String
+ meow() : void
}

Animal <|– Dog
Animal <|– Cat

class Person {
+ name : String
}

class PetOwner {
}

Person <|– PetOwner

PetOwner “1” — “*” Animal : owns

@enduml
“`
プレビュー: クラスは区切りのある四角で、属性と操作が中にリスト表示されます。関係はそれぞれの意味を持つ線や矢印で結ばれます。

5.4 アクティビティ図

処理のフローやアクティビティ（行動）の順序を表現します。特定の時点での状態ではなく、アクションとその流れに焦点を当てます。

開始/終了: start または (*) で開始ノード、stop または (stop) または (end) で終了ノードを表します。
アクション: : アクション名; でアクションノードを表します。
流れ: アクションやノード間は --> で結び、処理の順序を示します。
条件/判断: if / then / else や switch / case を使って、条件による分岐を表現できます。
“`plantuml
@startuml
start
:リクエスト受信;

if (認証済み?) then (はい)
:処理Aを実行;
else (いいえ)
:ログインページにリダイレクト;
stop
endif

if (データが有効?) then (有効)
:データ保存;
:成功メッセージを表示;
else (無効)
:エラーメッセージを表示;
endif

:応答を送信;
end
@enduml
“`
プレビュー: アクションは角丸の四角、開始/終了は丸、条件分岐は菱形で描画され、矢印で結ばれます。
分割/結合 (Split/Join): split と end split / join と end join を使って、並行処理を表せます。
スイムレーン (Swimlanes): |泳者名| を使って、処理の担当者や責任範囲を視覚的に分割できます。

“`plantuml
@startuml
|ユーザー|
start
:注文する;

|システム|
:注文を受け付ける;
split
:在庫を確認;
split again
:決済処理を開始;
end split

:注文を確定;

|ユーザー|
:注文確認メールを受信する;

stop
@enduml
`` **プレビュー:**|泳者名|` で区切られた縦または横のレーンが描画され、その中に各担当者のアクティビティが配置されます。

これらの基本的な図の描き方を学ぶことで、あなたのアイデアや設計を素早く視覚化できるようになります。PlantUMLの構文は非常に豊富で、ここで紹介した以外にも多くの要素やオプションがあります。詳細はPlantUML公式ドキュメントを参照してください。

第6章：PlantUML拡張機能の詳細設定

VS CodeのPlantUML拡張機能は、多くの設定オプションを提供しています。これらの設定を変更することで、プレビューの動作やPlantUMLの実行方法をカスタマイズできます。

6.1 設定画面へのアクセス

VS Codeの設定画面は以下の方法で開けます。

File メニューから Preferences -> Settings を選択します。(Code メニューから Preferences -> Settings の場合もあります。)
または、ショートカット Ctrl+, (Windows/Linux) または Cmd+, (macOS) を押します。

設定画面が表示されたら、左側の検索ボックスに「plantuml」と入力すると、PlantUML拡張機能に関連する設定項目が絞り込まれて表示されます。

6.2 主要な設定項目の説明

PlantUMLのプレビューと描画に影響する主な設定項目をいくつか紹介します。

plantuml.render: PlantUMLの描画方法を指定します。
- Local: ローカル環境にインストールされたJavaとGraphvizを使って描画します。通常はこの設定が推奨されます。高速でオフラインでも利用できます。
- PlantUMLServer: インターネット上のPlantUMLサーバーにコードを送信して描画します。手元にJavaやGraphvizがない場合や、ローカル環境での描画に問題がある場合に利用できますが、セキュリティやプライバシーに注意が必要です。
- その他 (UMLGraph, Puml, etc.): 他の描画エンジンを利用する場合のオプションですが、これらは一般的ではありません。
設定値の変更方法: 設定画面で plantuml.render を検索し、ドロップダウンリストから Local または PlantUMLServer を選択します。
plantuml.server: plantuml.render が PlantUMLServer に設定されている場合に、どのPlantUMLサーバーを使用するかを指定します。デフォルトは http://www.plantuml.com/plantuml です。プライベートなサーバーを構築している場合は、ここにそのURLを指定します。
plantuml.jar: ローカルでPlantUMLを描画する (plantuml.render: Local) 場合に、PlantUMLの plantuml.jar ファイルの場所を明示的に指定します。通常、この設定は不要で、拡張機能が自動的にjarファイルを見つけてくれますが、特定のバージョンのjarファイルを使いたい場合や、自動検出に失敗する場合に設定します。指定するパスは、plantuml.jar ファイルそのものへのフルパスです。
plantuml.graphvizDot: Graphvizの dot 実行ファイルの場所を明示的に指定します。ローカルでPlantUMLを描画し、Graphvizが必要な図（クラス図など）を描く際に、拡張機能が dot コマンドを見つけられない場合に設定します。指定するパスは、dot 実行ファイルそのものへのフルパスです（例: Windowsなら C:\Program Files\Graphviz\bin\dot.exe、macOS (Homebrew) なら /usr/local/bin/dot）。
plantuml.previewAutoUpdate: エディターでPlantUMLコードを編集した際に、プレビューを自動的に更新するかどうかを指定します。デフォルトは true (自動更新) です。コードが非常に複雑で描画に時間がかかる場合など、自動更新を無効にしたい場合は false に設定します。
plantuml.previewFileType: プレビューペインに表示する図の形式を指定します。svg (Scalable Vector Graphics) がデフォルトで推奨されます。svg はベクター形式なので拡大しても劣化せず、テキストの選択なども可能です。他に png などのオプションがあります。
plantuml.includePaths: PlantUMLの !include コマンドで他のファイルを取り込む際に、ファイルを検索するディレクトリのパスを指定します。プロジェクト内で共通部品やスタイル設定を別ファイルにまとめて !include で読み込む場合などに便利です。複数のパスを指定できます。
plantuml.commandArgs: PlantUMLを実行する際に渡す追加のコマンドライン引数を指定します。例えば、描画に関する特殊なオプションなどを指定できます。

これらの設定項目は、PlantUMLの描画環境やプレビューの挙動を調整するために重要です。もしプレビューがうまく表示されないなどの問題が発生した場合は、これらの設定、特に plantuml.render, plantuml.jar, plantuml.graphvizDot の設定を確認してみてください。

設定を変更した後、VS Codeの再起動が必要な場合もあります。

第7章：図のエクスポート

VS CodeのPlantUML拡張機能は、プレビューを表示するだけでなく、作成した図を画像ファイルとしてエクスポートする機能も提供しています。これにより、図をドキュメントに貼り付けたり、共有したりすることができます。

エクスポートは、以下の方法で行えます。

7.1 コマンドパレットからのエクスポート

最も一般的なエクスポート方法です。

エクスポートしたいPlantUMLファイル (.puml) をVS Codeで開いた状態で、コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) を開きます。
「PlantUML」と入力し、エクスポート関連のコマンド候補を表示させます。
利用できるエクスポートコマンドはいくつかありますが、主に以下のコマンドを使います。
- PlantUML: Export Current File: 現在開いている .puml ファイルに含まれるすべての図をエクスポートします。一つのファイルに複数の @startuml ... @enduml ブロックが含まれている場合、それぞれのブロックが別々の画像ファイルとして出力されます。
- PlantUML: Export Current Diagram: カーソルがある位置の @startuml ... @enduml ブロックで定義された図だけをエクスポートします（一つのファイルに複数の図がある場合に便利です）。
- PlantUML: Export Workspace Diagrams: 現在開いているワークスペース（フォルダ）内のすべての .puml ファイルに含まれるすべての図をエクスポートします。プロジェクト全体を一括で出力したい場合に便利です。
選択したエクスポートコマンドを実行すると、通常はどの画像形式で出力するかを選択するプロンプトが表示されます。

(注: この画像は架空のものです。実際のVS Codeのプロンプトを参照してください)
出力形式 (PNG, SVGなど) の選択: よく使われる形式は PNG (.png) と SVG (.svg) です。
- PNG: ピクセルベースの画像形式です。一般的な画像として扱いやすく、様々なドキュメントやウェブサイトに貼り付けられます。
- SVG: ベクターベースの画像形式です。拡大しても劣化せず、ファイルサイズも小さくなることが多いです。Webページでの表示や、拡大が必要なドキュメントに適しています。テキスト情報も保持される場合があります。
- その他、JPEG, PDF, LaTeX, EPSなどの形式も選択肢として表示されることがあります。
出力形式を選択すると、PlantUML拡張機能はPlantUMLの描画エンジンを使って図を生成し、指定された形式のファイルとして保存します。
出力先の指定: デフォルトでは、エクスポートされた画像ファイルは元の .puml ファイルと同じディレクトリに保存されることが多いです。ファイル名は通常、元のファイル名に図の種類や連番、そして拡張子 (.png, .svg など) が付加されたものになります（例: sequence_diagram.puml から sequence_diagram.png または sequence_diagram-01.png など）。拡張機能の設定で出力先ディレクトリを変更できる場合もあります。

7.2 プレビューウィンドウからのエクスポート (拡張機能による)

一部のPlantUML拡張機能のバージョンや設定によっては、プレビューウィンドウ自体にエクスポート用のボタンや右クリックメニューが表示されることがあります。もしプレビューウィンドウにエクスポート機能が見つかれば、そちらを利用することも可能です。

図をエクスポートすることで、作成した図を開発ドキュメント、設計書、プレゼンテーション資料などに活用できます。テキストベースで管理しているので、図の修正が発生しても、コードを少し修正して再度エクスポートするだけで済むため、図のメンテナンスが非常に容易になります。

第8章：よくあるトラブルと解決策

VS CodeでPlantUMLを使っている際に、プレビューが表示されない、図が正しく描画されない、といった問題が発生することがあります。ここでは、よくあるトラブルとその解決策を紹介します。

8.1 プレビューが表示されない/エラーになる

これが最もよくある問題です。PlantUMLが図を描画するためには、前述の通りJava実行環境と、特定の図種ではGraphvizが必要です。これらの環境が正しく設定されていないと、描画に失敗します。

確認すべきこと:

Javaがインストールされているか？
- コマンドプロンプト/ターミナルで java -version を実行し、Javaがインストールされているか確認します。インストールされていない場合は、第2章を参考にインストールしてください。
Java実行ファイルへのパスが正しく設定されているか？
- java -version がコマンドプロンプト/ターミナルから実行できることを確認します。実行できない場合は、Javaのインストールディレクトリの bin サブディレクトリが環境変数 PATH に含まれているか確認します。
- 場合によっては、環境変数 JAVA_HOME が正しく設定されているか確認し、VS Codeを再起動してみてください。
Graphvizがインストールされているか？ (特にクラス図、ユースケース図など)
- 描画したい図の種類がクラス図、ユースケース図、アクティビティ図（特定形式）、コンポーネント図など、Graphvizが必要なものか確認します。
- コマンドプロンプト/ターミナルで dot -V を実行し、Graphvizがインストールされているか確認します。インストールされていない場合は、第2章を参考にインストールしてください。
Graphviz実行ファイル (dot) へのパスが正しく設定されているか？
- dot -V がコマンドプロンプト/ターミナルから実行できることを確認します。実行できない場合は、Graphvizのインストールディレクトリの bin サブディレクトリが環境変数 PATH に含まれているか確認します。
- もし PATH 設定が難しい場合や機能しない場合は、VS CodeのPlantUML拡張機能設定 (plantuml.graphvizDot) で、dot 実行ファイルへのフルパスを明示的に指定してみてください。
VS CodeのPlantUML拡張機能の設定は適切か？
- plantuml.render 設定が Local になっているか確認します。もし PlantUMLServer になっていて問題が発生している場合は、インターネット接続を確認するか、Local に変更してローカル環境での描画を試みてください。
- plantuml.jar や plantuml.graphvizDot の設定が、もし手動でパスを指定している場合、そのパスが正しいか確認します。
PlantUMLコードに構文エラーがないか？
- PlantUMLコード自体に構文エラーがあると、描画に失敗します。VS Codeのエディター上で、PlantUML拡張機能が構文エラーを指摘してくれる場合があります（波線の下線などが表示されます）。エラー箇所を確認し、修正してください。
- 例えば、@startuml と @enduml のペアが正しく閉じられているか、要素名の記述ミス、矢印の記述ミスなどがないか確認します。
VS Codeや拡張機能の出力ウィンドウ/ログを確認する:
- VS Codeの View メニューから Output を選択します。出力ウィンドウが表示されたら、右上のドロップダウンリストから「PlantUML」または「Log (Extension Host)」などを選択します。ここに、PlantUML実行時のエラーメッセージなどが表示されている場合があります。表示されたエラーメッセージを参考に、原因を特定します。
VS Codeの再起動: 環境変数の変更や新しいソフトウェアのインストールを行った後は、VS Codeを再起動することで設定が反映されることがあります。
PC自体の再起動: ごくまれに、環境変数がシステムに完全に反映されていないなどの理由で、PC自体の再起動が必要になる場合があります。
拡張機能の再インストール: PlantUML拡張機能自体に問題が発生している可能性もゼロではありません。一度拡張機能をアンインストールし、再度インストールしてみることで問題が解消されることがあります。

8.2 図が崩れる/期待通りに描画されない

プレビューは表示されるものの、図の要素の配置がおかしい、線が正しく繋がっていないなど、期待通りの図にならない場合があります。

確認すべきこと:

Graphvizが必要な図か？ Graphvizは正しく機能しているか？
- クラス図やユースケース図など、Graphvizが必要な図を描いている場合、Graphvizが正しくインストールされ、パスが通っているか再度確認します。Graphvizが見つからない、または正しく機能しない場合、これらの図のレイアウトが崩れることがあります。
PlantUMLコードの構文が正しいか？
- 図の構成要素（クラス、アクターなど）の定義や、それらを結ぶ関係（矢印など）の記述に誤りがないか、PlantUMLの公式ドキュメントなどを参考に確認します。特に複雑な図では、小さな記述ミスが全体のレイアウトに大きな影響を与えることがあります。
PlantUMLのバージョンが古い？
- もし手動でPlantUML jarファイルを指定している場合や、ローカル環境のJavaが古い場合、最新の構文に対応していない可能性があります。PlantUML jarファイルやJavaを最新版に更新してみてください。
拡張機能のバージョンが古い？
- VS CodeのPlantUML拡張機能が古い場合、最新のPlantUMLの機能に対応していなかったり、不具合を含んでいたりする可能性があります。拡張機能のアップデートを確認し、最新版にしてみてください。

これらのトラブルシューティングの手順を試すことで、多くの描画問題を解決できるはずです。特に、JavaとGraphvizのインストールおよび環境変数 PATH / JAVA_HOME の設定は、PlantUMLをローカルで使う上での最初の障壁となることが多いので、時間をかけて正確に設定することをお勧めします。

第9章：応用的な使い方（簡易紹介）

基本的なプレビューができるようになったら、PlantUMLの持つより便利な機能も試してみましょう。

9.1 インクルード機能 (`!include`)

共通で使う定義（例：特定のアクターの定義、標準的な色設定など）を別のファイルにまとめておき、それを複数の .puml ファイルから読み込むことができます。これにより、図のメンテナンス性が向上します。

plantuml ' common.puml ファイルに以下を記述 @startuml !definelong ADMIN_ACTOR actor "管理者" as Admin !enddefinelong @enduml

“`plantuml
‘ main_diagram.puml ファイルに以下を記述
@startuml
!include common.puml

ADMIN_ACTOR

rectangle “管理システム” {
usecase “ユーザー管理” as ManageUsers
}

Admin — ManageUsers

@enduml
``!include common.pumlのように記述することで、common.pumlの内容がその場所に挿入されます。パスは相対パスまたは絶対パスで指定できます。拡張機能の設定plantuml.includePaths` でインクルードファイルの検索パスを指定することも可能です。

9.2 テーマ/スタイル設定 (`!theme`, `skinparam`)

PlantUMLでは、図の色、フォント、要素の形状、線の太さなどを細かくカスタマイズできます。

!theme theme_name: 定義済みのテーマを適用します。モダンな見た目などに変更できます。
skinparam ElementType { ... }: 特定の要素タイプ（例: participant, class, usecase）や全体のスタイル（例: linetype, arrowcolor）を設定します。

“`plantuml
@startuml
!theme materia

skinparam sequence {
ActorBorderColor blue
ParticipantBorderColor green
LifeLineBorderColor #555555
ArrowColor black
StereotypeBorderColor blue
BoxBorderColor #bbbbbb
BoxBackgroundColor #ffffff
ActorBackgroundColor aqua
ParticipantBackgroundColor #aaffff
}

actor User #red
participant “処理モジュール” as Process #yellow

User -> Process: リクエスト

@enduml
“`
これらのスタイル設定をインクルードファイルにまとめておくと、複数の図で一貫した見た目を実現できます。

9.3 AsciiDoc/Markdownとの連携

PlantUMLコードはテキストなので、AsciiDocやMarkdownといったドキュメント形式の中に直接埋め込むことができます。

AsciiDoc:
asciidoc [plantuml, format="svg", filename="sequence"] .... @startuml Alice -> Bob: Hello @enduml ....
Markdown:
markdownplantuml
@startuml
Alice -> Bob: Hello
@enduml

VS Codeには、これらのドキュメント形式とPlantUMLを連携させてプレビューを表示する拡張機能（例: AsciiDoc拡張機能、Markdown Preview Enhancedなど）もあります。これらの拡張機能とPlantUML拡張機能を組み合わせることで、ドキュメントと図を一体で編集・確認できるようになります。

9.4 バージョン管理システムとの連携

PlantUMLファイルはテキストファイルなので、Gitなどのバージョン管理システムで管理するのが非常に容易です。コードの変更履歴と同じように、図の変更履歴を追跡したり、変更内容を比較したりできます。これにより、設計の変更経緯を明確に管理できます。

第10章：まとめ

この記事では、VS Codeを使ってPlantUMLのプレビューを手軽に始める方法を詳しく解説しました。

PlantUMLがテキストベースで図を描くことのメリット（簡単さ、編集性、バージョン管理との親和性）を理解しました。
VS CodeとPlantUMLを組み合わせることで、リアルタイムプレビューという強力なワークフローが実現できることを学びました。
PlantUMLをローカルで描画するために必要なJavaとGraphvizのインストールおよび環境変数設定の手順を確認しました。
VS CodeにPlantUML拡張機能をインストールする具体的な方法を知りました。
.puml ファイルを作成し、基本的なPlantUMLコードを記述し、VS Codeのコマンドパレットやショートカットを使ってプレビューを表示する手順を習得しました。
シーケンス図、ユースケース図、クラス図、アクティビティ図といった主要な図の基本的なPlantUML構文と、それがどのようにプレビューされるかを確認しました。
PlantUML拡張機能の重要な設定項目（plantuml.render, plantuml.graphvizDot など）の意味と変更方法を知りました。
作成した図をPNGやSVGなどの画像ファイルとしてエクスポートする方法を学びました。
プレビューが表示されないなどの一般的なトラブルに対して、原因を特定し解決するための確認事項と手順を知りました。
!include や skinparam といった応用的な機能についても簡単に触れました。

VS CodeとPlantUMLを組み合わせることで、テキストエディタの familiar な操作感で、プロフェッショナルな見た目の図を素早く作成・更新できるようになります。これは、システムの設計、ソフトウェアの構造説明、ビジネスプロセスの可視化など、様々な場面であなたのコミュニケーションを強力にサポートしてくれるでしょう。

PlantUMLの構文は非常に豊富で奥深いものです。この記事で紹介したのはそのほんの一端にすぎません。さらに様々な図の種類を描きたい場合や、より高度な表現に挑戦したい場合は、PlantUMLの公式ドキュメント（https://plantuml.com/）を参照することをお勧めします。また、VS Codeの拡張機能マーケットプレイスには、PlantUML関連の役立つ拡張機能が他にも存在するかもしれません。

さあ、学んだ知識を活かして、あなたの次のプロジェクトでPlantUMLとVS Codeを活用し、設計図を効率的に作成・共有してみてください！きっと、あなたのアイデアを形にする強力な味方になってくれるはずです。