Zenn
💎

シーケンス図を楽して書こう, 30秒で。

2024/07/07に公開
diagram
Mermaid
Generative AI
tech

はじめに

みなさん、こんにちわ
設計時や顧客説明時だけでなく、チーム内で仕様を共有する際にもシーケンス図は大事な役割を果たすと思います。ですので、簡単にサクサクかけたら嬉しいですね。
今回は時短目的で、説明もサクッと要点だけ書きます。

概要

生成AIを使うと、ほら簡単。

  • このプロンプトでどーん。
  • Mermaid でぺーん。

プロンプトを作ろう

生成AIにお願いをする呪文は次の通り（仕様部分をどんどん書き足してください）です。
出来上がったら、AIにどーん:

あなたはテックカンパニーのアーキテクチャです。設計書に使用するシーケンス図を、Mermaid形式で作成してください。
（ここから仕様部分です。状況に合わせて書き換えてください）
該当サービスでは、OICDを採用しています。
バックエンドは、AWSのLambdaで動いています。
セッション管理に AWS Cognite を採用しています。
初回ログインからAPIへのデータ取得を記載してください。

Mermaid editor とは？

好きなエディターを使ってください。こちらに良くまとまってます。
https://notepm.jp/blog/15456
ちなみに私は Mermaid Live Editor を使用してますので、こちらをお勧めします。
https://mermaid.live/edit

あとは、仕様に合わせて直せばよい

早速、 GPT-3.5 Turbo で実行した結果がこちらです。以下のコードが生成されます。

sequenceDiagram
    participant User
    participant Browser
    participant OIDC_Provider as OIDC Provider
    participant AWS_Cognito as AWS Cognito
    participant AWS_Lambda as AWS Lambda
    participant API as API
    User->>Browser: Open Application
    Browser->>OIDC_Provider: Authorization Request
    OIDC_Provider->>Browser: Authorization Response (Auth Code)
    Browser->>AWS_Cognito: Exchange Auth Code for Tokens
    AWS_Cognito->>OIDC_Provider: Token Request (Auth Code)
    OIDC_Provider->>AWS_Cognito: Token Response (ID Token, Access Token, Refresh Token)
    AWS_Cognito->>Browser: Tokens (ID Token, Access Token, Refresh Token)
    Browser->>AWS_Cognito: Store Tokens (Session Management)
    User->>Browser: Request Data from API
    Browser->>AWS_Cognito: Retrieve Access Token
    AWS_Cognito->>Browser: Access Token
    Browser->>AWS_Lambda: API Request (Access Token)
    AWS_Lambda->>AWS_Cognito: Validate Access Token
    AWS_Cognito->>AWS_Lambda: Token Valid
    AWS_Lambda->>API: Fetch Data
    API->>AWS_Lambda: Return Data
    AWS_Lambda->>Browser: Return Data
    Browser->>User: Display Data

ちなみに、Zennは mermaid.js によるダイアグラム表示に対応しています。コードブロックの言語名をmermaidとすることで自動的にレンダリングされます。（最初にやった時はちょっとした感動ものでした。私だけかもですが）
https://zenn.dev/zenn/articles/markdown-guide#ダイアグラム
そして、あっという間の結果がこちら↓ 超簡単！

他の生成AIだと、どうなる？

（ちなみに、弊社社員は生成AIを使い放題となっております。大変ありがたい会社です。）
Claud 3.5 Sonnet での結果です。解説までつきました。日本語だと少しホッとします；

このシーケンス図は以下の流れを示しています：
ユーザーがアプリを起動
OIDCプロバイダーを通じて認証
認証後、IDトークンが発行される
クライアントがAWS Cognitoにサインイン
Cognitoがアクセストークンをクライアントに発行
クライアントがアクセストークンを使用してAPI Gatewayにリクエスト
API GatewayがLambda関数を呼び出し
Lambdaがデータベースからデータを取得
取得したデータがクライアントに返され、ユーザーに表示される
この図は、OIDCを使用した認証フロー、AWS Cognitoによるセッション管理、そしてAWS LambdaをバックエンドとしたAPIの呼び出しを示しています。

さいごに

今回のタイトルに書いた通り、30秒もかからずにシーケンス図を作成できたと思います。いかがでしたか？
慣れると、複雑な仕様を生成AIに要約させて、それをシーケンス図にするケースも増えると思います。
生産性は大事ですね。

Discussion