はじめに
PlantUMLは、テキストベースでUML図を作成できる強力なツールです。今回の記事では、VSCodeを使用してPlantUMLを設定し、使用する方法を紹介します。これにより、開発者はシステム設計を効率的に行い、リアルタイムで図を確認することができます。
さらに、ChatGPTとの連携を活用して、システム設計情報を迅速にPlantUML形式で出力する方法についても解説します。この連携により、設計プロセスがスムーズに進み、ドキュメントの整備や共有が容易になります。
以下の手順に従って、PlantUMLとVSCodeのセットアップを行い、設計効率を向上させましょう。
ブロック崩しゲームのクラス図の例
必要なもの
- Visual Studio Code（以下、VSCode）
- Java（PlantUMLはJavaで動作します）
- Javaには商用利用可能なバージョンとそうでないバージョンがあります。商用利用する場合はライセンスを確認してください。
- PlantUML拡張機能
- Graphviz（図の描画に必要）
手順
1. Javaのインストール
PlantUMLはJavaで動作するため、Javaのインストールが必要です。
- Javaの公式サイトから最新のJDKをダウンロードしてインストールします。
- インストールが完了したら、以下のコマンドでJavaが正常にインストールされたか確認します。
java -version
2. VSCodeのインストール
まだインストールしていない場合は、VSCodeの公式サイトからダウンロードしてインストールします。
3. PlantUML拡張機能のインストール
VSCodeには多くの拡張機能がありますが、PlantUMLを使うためには専用の拡張機能をインストールする必要があります。
- VSCodeを起動します。
- サイドバーの拡張機能アイコン（四角形が四つ重なったアイコン）をクリックします。
- 検索バーに「PlantUML」と入力し、検索結果から「PlantUML」を選択します。
- 「インストール」ボタンをクリックして、拡張機能をインストールします。
4. Graphvizのインストール
PlantUMLはGraphvizを使用して画像を生成します。Graphvizのインストールが必要です。
- Graphvizの公式サイトから適切なバージョンをダウンロードしてインストールします。
- インストールが完了したら、以下のコマンドでGraphvizが正常にインストールされたか確認します。
dot -version
5. 設定の確認
拡張機能のインストールが完了したら、設定を確認します。とくにローカルで実行する場合には、まずはデフォルトの設定のまま進めていきましょう。
6. 使用方法
実際にPlantUMLを使用してみましょう。
- 新しいファイルを作成し、拡張子を
.pumlまたは.plantumlにします。 - 以下のようにUMLの記述を行います。
@startuml Alice -> Bob: Hello @enduml
- ファイルを保存し、右クリックして「PlantUML: Preview Current Diagram」を選択します。UML図がプレビュー表示されます。
7. PlantUMLの表記参考
PlantUMLの記述方法や詳細な機能については、PlantUMLの公式ドキュメントを参照してください。公式ドキュメントには、各種UML図の例や構文の詳細が掲載されています。
機能
-
プレビュー図の表示:
Alt + D（MacではOption + D）を押してPlantUMLプレビューを開始。 - 自動更新: 図がエクスポートされた場合、即座にプレビューを更新。
- ズーム&スクロールサポート
- マルチページ図のサポート
- エクスポート機能: カーソル位置の図、現在のファイルの図、ワークスペース全体の図、選択したワークスペースの図をエクスポート。
- URL生成: ローカルまたはサーバーから。
- シンボルリストサポート
- マークダウン統合サポート: マークダウンファイル内でPlantUMLを表示。
- 画像からソースを抽出
このメニューからダイアグラムをエクポートすることができる
ChatGPTを使ったPlantUML形式の設計情報指定と出力
以下は、ChatGPTを使ってPlantUML形式で設計情報を指定し、その結果を出力するプロンプト例と結果の例です。
プロンプト例
以下のシステム設計を基に、シーケンス図をPlantUML形式で出力してください。
システム名：ユーザー管理システム
処理の流れ：
ユーザーがログイン画面で名前とパスワードを入力します。
認証システムがユーザー情報を検証します。
認証システムがデータベースにユーザー情報の確認をリクエストします。
データベースが認証システムにユーザー情報を返します。
認証システムがログイン結果をユーザーに返します。
管理者がユーザー管理画面でユーザー情報を編集します。
認証システムがデータベースにユーザー情報の更新をリクエストします。
データベースが認証システムに更新結果を返します。
認証システムが管理者に更新結果を返します。
以下のシーケンス図をPlantUML形式で生成してください。
結果の例（PlantUML形式）
ChatGPTで出力したテキストを保存してVsCodeでUMLのダイアグラムを可視化して確認する。
説明
- 上記のプロンプトでは、システム設計の主要コンポーネントとそれらの関係を指定しています。
- ChatGPTはこの情報をもとに、PlantUML形式のコードを生成します。
- このPlantUMLコードをVSCodeのPlantUMLプラグインで可視化することで、システム設計を確認できます。
このようにして、システム設計の情報を具体的に指定し、PlantUML形式で出力することができます。
まとめ
今回の記事では、VSCodeでPlantUMLを使用するための環境設定と基本的な使い方について紹介しました。PlantUMLを使うことで、テキストベースで簡単にUML図を作成し、VSCodeのプレビュー機能を活用してリアルタイムで確認することができます。
さらに、ChatGPTを活用することで、システム設計情報を効率的にPlantUML形式に変換する手順も紹介しました。これにより、設計プロセスがスムーズに進み、ドキュメントの整備や共有が容易になります。
PlantUMLとVSCodeを組み合わせることで、開発効率を大幅に向上させることができます。ぜひ、この記事を参考にして、あなたのプロジェクトに導入してみてください。