こんにちは、CX事業本部 Delivery部の若槻です。
まだベータ提供ではありますが、ChatGPT でついに公式プラグイン機能（ChatGPT plugins）が使えるようになりました。
これらのうちまだ数は少ないですが、ソフトウェア開発に役立つプラグインもすでにいくつか提供されています。
| Name | Description (日本語訳) |
|---|---|
| CreatiCode Scratch | Scratchプログラムを画像として表示し、CreatiCode Scratchの拡張機能を使用して2D/3Dプログラムを作成します。 |
| Diagram It (Show me) | チャットで直接ダイアグラムを作成し、編集します。 |
| Noteable | データを探索し、ビジュアライズし、ノートブックを全員と共有するためにPython、SQL、Markdownでノートブックを作成します。 |
今回は、これらのうち「Diagram it (※ Show me)」プラグインを使って視覚的なシステム構成図をチャット上に表示しながら作成することができたので紹介します。
※ 一夜明けたらプラグインの名前が Diagram it から Show me に変わっていました。
試してみた
プラグインのインストール
プラグインをチャットにインストールします。プラグインは GPT-4 バージョンでのみ利用できます。
新規チャットで GPT-4 -> Plugins を選択。
すると Plugin store が表示されます。ここでインストールしたいプラグインを探します。
Diagram It を見つけたら Install をクリックします。
プラグインがインストールされました。
プラグインを使ってみる
チャットで質問をしてみます。
まずは次の質問をコンソールに入力してみました。
次のサービスから成る AWS サーバーレス構成のシステム構成図を作成してください
- Amazon API Gateway REST API
- AWS Lambda Function
- Amazon DynamoDB Tableすると Diagram It が回答の生成を始めました。ChatGPT から API へのリクエストが行われているようです。
10秒ほど待つと回答が返ってきました。
以下が要求されたAWSサーバーレス構成のシステム構成図です：
[この図をオンラインで編集したい場合はこちらをクリックしてください。](https://showme.redstarplugin.com/s/RO81WVtU)
この図では、次のようなプロセスが示されています：
1. Amazon API Gateway REST APIがAWS Lambda Functionをトリガーします。
2. AWS Lambda FunctionはAmazon DynamoDB Tableに対して読み書きを行います。
これにより、クライアントからのリクエストがAPI Gatewayを経由してLambda Functionに渡され、その結果がDynamoDB Tableに保存されるという流れが視覚化されています。質問では3つのリソースを利用するようにのみ指定しましたが、回答ではそれらリソースを利用したよくあるパターンの構成図とプロセスが記載されています。
回答中の この図をオンラインで編集したい場合はこちらをクリックしてください。 からリンクを開くと Mermaid Live Editor（※）で図が開きました。こちらで構成図のコードを確認したり、編集をしたりすることができるようになっています。
※ Mermaid Live Editor は、Mermaid オープンソースプロジェクトから生まれた Mermaid Chart 社 により提供される、視覚化された図をテキストベースで作成できるサービスです。
また回答中に表示されている構成図は Mermaid Live Editor 上の構成図の画像リンクとなっており、開くと図のみをブラウザで表示させることができます。
回答冒頭の Used Diagram Id というメニューを開くと、API にリクエストされた mermaid のコードおよび、レスポンスが確認できます
さらに質問をしてみる
直前の回答の図を修正するように追加の質問をしてみます。
REST API で Amazon Cognito Authorizer によるIDトークンを利用した認可をするように上記の図を修正してすると直前の回答の図を修正する形で回答が返ってきました。
以下が修正されたAWSサーバーレス構成のシステム構成図です：
[この図をオンラインで編集したい場合はこちらをクリックしてください。](https://showme.redstarplugin.com/s/9xCnstU3)
この図では、次のようなプロセスが示されています：
1. Amazon API Gateway REST APIがIDトークンを用いてAmazon Cognito Authorizerに認可を要求します。
2. Amazon Cognito Authorizerが認可を行い、その結果を基にAWS Lambda Functionをトリガーします。
3. AWS Lambda FunctionはAmazon DynamoDB Tableに対して読み書きを行います。
これにより、クライアントからのリクエストがAPI Gatewayを経由してCognito Authorizerによる認可を受け、その結果に基づいてLambda Functionが動作し、その結果がDynamoDB Tableに保存されるという流れが視覚化されています。文脈を理解してチャットをしながら、図を作成してくれるのはとても便利ですね。
注意点
図のURLには認証なしでアクセスできる
Diagram It プラグインが利用する Mermaid Live Editor で作成された図のURLには認証なしでアクセスできてしまいます。
機密情報などは入力しないように注意しましょう。
Diagram It は未検証のプラグインである
本記事前半の検証は昨日行ったのですが、本日改めて Diagram It プラグインを触ってみると、回答でアプリに UNVERIFIED（未検証）マークが付くようになっていました。
新規チャットでのプラグイン選択メニューでもUNVERIFIED マークが付いています。
また Plugin store では「Unverified plugins」に分類されています。この分類は昨日まではありませんでした。
Diagram It プラグインがなぜ急に未検証となってしまったのかは謎ですが（提供者が名前を変えたから？）、推移を見守ってみます。
おわりに
ChatGPT plugins を使って視覚的なシステム構成図をチャット上に表示しながら作成する体験をしてみました。
ChatGPT UI を使って Mermaid 構文を出力する試みは以前下記ブログでやったことがありましたが、回答上でビジュアライズに表示しながら作成できるというのはなかなか便利です。
今後ソフトウェア開発を便利にするプラグインがどんどん登場してくると思うので要チェックをしたいです。
参考
以上
4
