対象読者:ソフトウェア エンジニア、アーキテクト、IT プロフェッショナル、デザイナーなど。
記事の目標:作業効率を向上させる
適切なコンテンツでトレーニングされた大規模な言語モデルは、英語のテキストを超える応答を生成できます。たとえば、ChatGPT はいくつかのプログラミング言語でコードを生成できることが知られています。実際、ChatGPT に画像や図などの他のコンテンツを生成するように依頼することもできます。
はじめましょう。
概要
この記事は 3 つの部分に分かれています。
- システム設計フレーム図の構築
- シーケンス図を構築する
- グラフィック生成の制限とコツ
システム設計フレーム図の構築
今日のソフトウェア業界では、スケーラビリティを考慮することは避けられません。これは、かなり大規模なシステムをより小さな部分に分割し、独立したハードウェア上で実行する必要があることを意味します。これらの部分はネットワークを通じて連携してタスクを完了します。これは、ソフトウェアが 1 台のコンピュータにインストールされて実行されるように設計されていた、インターネット以前の時代とはまったく対照的です。
モバイル アプリケーションと対話できるクラウド ベースのファイル ストレージ システムを考えてみましょう。インターネットを検索すると、多数のユーザーをサポートするためにこのようなシステムがどのように構築されているかを理解するのは難しくありません。しかし、百聞は一見に如かずです。このようなシステムを ChatGPT に記述し、画像を生成するように依頼できます。プロンプトは次のとおりです。
クラウド ファイル ストレージ サービスには次のコンポーネントがあります。
1. ローカル データベース、インデックス コントローラー、ブロック コントローラー、およびオブザーバー コンポーネントを含むモバイル クライアント
2. コントローラーおよびオブザーバー コンポーネントは、ロード バランサーを通じてサーバー側と対話します
。 3. サーバー上には通知サーバーがあり、メッセージはクライアントにプッシュされ、クライアントのウォッチャー コンポーネントがメッセージを処理します。
4. ファイルのアップロードとダウンロードはファイル処理サーバーによって処理され、ファイルはインデックス付けされてチャンクに分割されます。これらのブロックはクラウド ストレージに保存されます。
5. ファイルのメタデータはメタデータ サーバーによって処理され、メタデータ データベースに保存されます。
6. これらすべての操作は、Kafka 上に構築されたメッセージ キューを使用して簡素化されます。Mermaid 構文を使用してこれのブロック図を作成してください。
このようなヒントの構築には、次の 2 つの重要な特性があります。
- システムコンポーネントとそれらがどのように相互作用するかを明確に記録します
- 図に Mermaid 構文を使用するリクエスト
図に要素を正しく表示するには、どのコンポーネントを含める必要があるか、およびコンポーネントがどのように相互作用するかを詳細に説明することが重要です。ただし、ChatGPT はテキストを生成できますが、グラフィックは生成できません。グラフを取得するには、プレーン テキストで表示できるグラフ生成言語が必要です。Mermaid.js はその一例です。
ChatGPT は次のように応答します。
確かに！以下は、クラウド ファイル ストレージ サービス内のコンポーネントとその相互作用を表すブロック図です。
mermaid Copy code graph TD subgraph Mobile Client A[Local Database] --> B[Index Controller] B --> C[Chunk Controller] C --> D[Watcher] end subgraph Server Side E[Load Balancer] --> F[Controllers] E --> G[Watcher] F --> H[File Processing Server] H --> I[Cloud Storage] F --> J[Metadata Server] J --> K[Metadata Database] J --> L[Notification Server] L --> G end subgraph Message Queue M[Kafka] end A -- Notify changes --> D D -- Watch events --> G G -- Notify events --> D F -- Upload/Download files --> H H -- Store/Retrieve chunks --> I F -- Process metadata --> J J -- Store metadata --> K F -- Push notifications --> L L -- Publish messages --> M M -- Subscribe to messages --> Gモバイル クライアントは、ローカル データベース、インデックス コントローラー、ブロック コントローラー、およびウォッチャーのコンポーネントで構成されます。これらのコンポーネントは、ロード バランサーを通じてサーバー側コンポーネントと対話します。サーバー側は、コントローラー、ファイル処理サーバー、メタデータ サーバー、および通知サーバーで構成されます。ファイル処理サーバーは、ファイルのアップロードとダウンロードを処理し、ファイルをチャンクに分割してクラウド ストレージに保存します。メタデータ サーバーは、ファイルのメタデータを処理し、メタデータ データベースに保存します。通知サーバーはメッセージ (ファイル更新など) をクライアントにプッシュし、ウォッチャー コンポーネントによって処理されます。これらの操作はすべて、Kafka 上に構築されたメッセージ キューを使用して簡素化されます。これは簡略化された表現であり、クラウド ファイル ストレージ サービスの特定の実装に応じて追加のコンポーネントや相互作用が存在する可能性があることに注意してください。
応答内のコード ブロックは、Mermaid.js 構文の図です。これらをオンラインのMermaid Live Editorにコピーすると、次のような結果が得られます。
Mermaid は、Web 上でさまざまなグラフィックをレンダリングできる Javascript ライブラリです。コードをさらに調整して、色を追加したり、ブロックをキャンバス上の別の位置に移動したりできます。ただし、システムの視覚化が必要な場合は、ChatGPT がすでに大きな助けとなります。
実際、このテクニックを他のテクニックと組み合わせることができます。たとえば、ChatGPT にシステムの概要を表示させ、システム コンポーネントについて教えてもらうように依頼することができます。次に、フォローアップ プロンプトで、ChatGPT にグラフに変換するように依頼します。
例として次のヒントを試すことができます。
Twitter などのソーシャル メディアの背後にあるシステム コンポーネントは何ですか? 彼らはどのように相互作用するのでしょうか？
その後のプロンプトで、
上記の Mermaid 文法のブロック図を提供してください。
シーケンス図を構築する
別の例として、ChatGPT にシーケンス グラフを生成するように依頼してみましょう。これもソフトウェア エンジニアリングでよく使用されるグラフで、さまざまなコンポーネントがタイムラインでどのように相互作用するかを示します。
上記とは逆に、ChatGPT にコンポーネントと相互作用を理解させ、同じプロンプト内で画像を生成させます。
ユーザーはどのように Web アプリケーションを操作し、OAuth2 を使用してログインしますか? PlantUML 構文を使用してシーケンス図を生成して説明してください。
OAuth2 は Web アプリケーションの一般的な認証方法であり、Web アプリケーション サーバーではアカウントを作成する必要はありませんが、代わりに他のプラットフォームのアカウントが使用されます。たとえば、Google アカウントを使用して ChatGPT にログインできます。Google はパスワードをチェックしますが、アプリケーション (ChatGPT) は Google が所有するものではありません。このプロセスには多くの関係者が関与します。
ChatGPT がプロセスをどのように説明するかは次のとおりです。
確かに！PlantUML 構文を使用してユーザーが Web アプリケーションと対話し、OAuth2 を使用してログインする方法を示すシーケンス図を生成するお手伝いをします。表示は次のとおりです。
plantuml Copy code @startuml actor User participant "Web App" as WebApp participant "OAuth2 Provider" as OAuthProvider User -> WebApp: Access web app WebApp -> User: Display login button User -> WebApp: Clicks login button WebApp -> OAuthProvider: Redirects user to OAuthProvider User -> OAuthProvider: Enters credentials OAuthProvider -> User: Validates credentials OAuthProvider -> WebApp: Redirects user with authorization code WebApp -> OAuthProvider: Sends authorization code OAuthProvider -> WebApp: Sends access token WebApp -> User: Logs in user @endumlこの図の手順は次のとおりです。1. ユーザーが Web アプリケーションにアクセスします。
2. Web アプリケーションはユーザーにログイン ボタンを表示します。
3. ユーザーが「ログイン」ボタンをクリックします。
4. Web アプリケーションはユーザーを OAuth2 プロバイダーにリダイレクトします。
5. ユーザーは、OAuth2 プロバイダーのログイン ページに資格情報を入力します。
6. OAuth2 プロバイダーはユーザーの資格情報を検証します。
7. OAuth2 プロバイダーは、認証コードを使用してユーザーを Web アプリケーションにリダイレクトします。
8. Web アプリは認証コードを OAuth2 プロバイダーに送信します。
9. OAuth2 プロバイダーは、アクセス トークンの認証コードを交換します。
10. OAuth2 プロバイダーは、アクセス トークンを Web アプリケーションに送り返します。
11. Web アプリケーションは、アクセス トークンを使用してユーザーをログインします。この図は OAuth2 ログイン プロセスの高レベルの概要を示しており、プロトコルの複雑さや特定の実装の詳細がすべて含まれているわけではないことに注意してください。これは、一般的なプロセスを簡略化して表現したものです。
ここでは、別のグラフィカル構文「言語」、PlantUML が必要です。上記のコードをコピーして、PlantUML Online Server で実行できます。得られる画像は次のとおりです。
このシーケンス図は、ログインと認証がどのように行われるか、およびアクセス トークンがどのように作成されるかを説明します。
ChatGPT がこのプロセスがどのように機能するかを正確に明確にしているため、これが機能することに注意してください。プロセスが複雑すぎる場合、または ChatGPT が認識できない場合は、ヒントでさまざまなコンポーネントがどのように相互作用するかの詳細を提供し、ChatGPT に説明をグラフィック言語に翻訳するよう依頼する必要があります。
グラフィック生成の制限とコツ
言語モデルとしては、そのトレーニング データによってその機能が大幅に制限されます。グラフの生成は、ChatGPT の構築における主な関心事ではないかもしれません。ChatGPT は、電子回路図などの一部のグラフィックスに弱いことが知られています。
また、ChatGPT にグラフを要求すると、デフォルトでは、ある種の「ASCII アート」を参照していると想定されますが、これは通常正しく見えません。したがって、使用するグラフィック言語を指定し、出力をグラフィックとしてレンダリングする必要があります。ここではいくつかの例を示します。
- 上の最初の例でわかるように、Mermaid はフローチャート、シーケンス図、エンティティ関係図、ガント チャート、マインド マップを作成できます。
- 上記の別の例で使用されている PlantUML は、シーケンス図、状態図、クラス図などの多くの UML 図を作成できます。
- 他の単純なグラフ (ノードと矢印のみを含むグラフなど) の場合は、「ドット言語」とも呼ばれる Graphviz 構文を使用できます。
- 一般的なグラフィックスの場合は、LaTeX のパッケージである TikZ 構文を要求できます。
- サーキットについては、TikZ の特殊バージョンである Circuitikz があります。
要約する
この投稿では、ChatGPT がテキストだけでなく、グラフィック言語の形式ではあるもののグラフィックも生成できることを学びました。具体的には、ChatGPT がどのように行われるかを見ました。
- あなたの説明に基づいて関係者の相互作用を示すブロック図を生成します
- シーケンス図を生成して複雑なロジックを説明し、質問に答えます
最も重要なことは、ChatGPT にグラフを生成させるための鍵は、グラフがどのように生成されたかについて十分な詳細を提供することです。形式 (たとえば、Mermaid 構文) を指定し、視覚化の内容について十分な詳細を提供する必要があります。