はじめに

フロー図の作成、好きですか？私はシステム構成や処理を考えることは好きですが、それをフロー図という資料に写し取る作業は時間がかるので嫌いです。
そんな資料作成が嫌いな私が、ChatGPTを使ってどれだけ楽にフロー図を作成できるかを検証します。
方法としては、PlantUMLのVScode拡張機能をインストールし、ChatGPTにシステム構成を説明してUMLを作成してもらう方法を解説します。
最終的に、次のような少し複雑なページ遷移図も作れました。

PlantUML + VScode環境の準備

まずは以下の手順でPlantUMLとJavaのインストールを行います。

PlantUMLのインストール

PlantUMLの公式サイトからPlantUMLをダウンロードし、インストールします。
Javaが必要なので、インストールされていない場合はJavaの公式サイトからインストールしてください。

VScodeの準備

PlantUMLのインストールが出来たら、VScodeで使用するための設定を行います。

Visual Studio Codeをダウンロードしてインストールします。
VScodeを起動し、拡張機能マーケットプレイスから「PlantUML」をインストールします。
PlantUMLが動作するために、Graphvizも必要です。Graphvizの公式サイトからダウンロードしてインストールします。

ChatGPTにシステム構成を説明してUMLを作成してもらう

いよいよ、ChatGPTにシステム構成などの情報を渡してUMLをテキストとして生成してもらいます。

プロンプトの作り方

ChatGPTにシステム構成を説明するための効果的なプロンプトの作り方を以下に示します。

サンプルプロンプト

私は現在、ウェブアプリケーションのシステム構成図を作成しています。以下の情報をもとに、PlantUML形式でUML図を作成してください。

- ユーザーがWebブラウザからアクセスする。
- Webサーバー（Apache）がリクエストを受け取る。
- Webサーバーはアプリケーションサーバー（Tomcat）にリクエストを転送する。
- アプリケーションサーバーはデータベースサーバー（MySQL）と通信する。
- データベースサーバーはデータを返し、アプリケーションサーバー経由でWebサーバーに戻る。
- 最後に、Webサーバーがユーザーにレスポンスを返す。

ChatGPTが生成したUMLテキストの例

@startuml
actor User
User -> WebServer: リクエスト
WebServer -> AppServer: リクエスト転送
AppServer -> Database: データ取得
Database --> AppServer: データ返却
AppServer --> WebServer: データ返却
WebServer --> User: レスポンス
@enduml

コマンドパレットを開いてUMLをレンダーする手順

ChatGPTに生成してもらったテキストは以下の手順でプレビューできます。

VScodeを開き、UMLのソースコードが書かれたファイルを開きます。
キーボードショートカット Ctrl + Shift + P (Macの場合は Cmd + Shift + P) を押して、コマンドパレットを開きます。
コマンドパレットに PlantUML: Preview Current Diagram と入力し、Enterキーを押します。
VScodeの右側にUML図が表示されます。

シンプルなUML図を使うメリット

日頃から思っているのですが、プロジェクトによりますがAWSやAzure等のサービスのアイコンをフロー図やシステム構成図に使用するのは避けた方が無難です。
AWS等のサービス固有のアイコンを使うのではなく、UML図のシンプルな図で表現することには以下のメリットがあります。

汎用性：特定のサービスに依存しないため、他のプロジェクトや環境でも使い回しがしやすい。
理解しやすさ：サービス固有のアイコンはそのサービスに詳しくない人にはわかりにくいが、UMLのシンプルな図は基本的な構成要素だけで表現されているため、誰にでも理解しやすい。

ChatGPTを使うメリット

エンジニアの皆さんはすでにChatGPTを業務利用することは多くなっていると思います。
ChatGPTと相談しながら資料作成を進めることは以下のようなメリットがあると思います。

効率的：複雑なシステム構成を短時間で図にすることができる。
直感的：自分で書き直しながら完成させるよりも、ChatGPTに相談しながら進めることで、手順がわかりやすくなる。

実際に使ってみた感想

ChatGPTを使ってフロー図を作成する方法は非常に直感的で効率的でした。
自分で書き直しながら完成させるよりも、ChatGPTに相談しながら進めることで、手順がわかりやすくなりました。
ただし、色の調整や線のつながりが間違っていることもあるため、最終的な細かい修正は自分でできるようにしておくことが重要です。

結論

ChatGPTを活用することで、PlantUML + VScodeによるフロー図の作成が非常に効率的かつ直感的になりました。
しかし、最終的な細かい修正は自分で行う必要があるため、そのスキルも併せて持っていることが理想です。

以上で、ChatGPTを使ったPlantUML + VScodeによるフロー図作成の方法を解説しました。この方法を活用して、皆さんも効率的にフロー図を作成してみてください。