今は、ChatGPT に、システム開発の上流工程をどの程度、任せられるのか、興味があります。
今日は、ChatGPT に、「システムの仕様概要図」を書いてもらいました。
投入したプロンプト
システムの仕様概要図を書いてください。 構成要素は、下記です。 1. 一般ページ 1-1. 個人予約 1-2. 法人会員登録 2.管理者ページ 2-1. 業務メニュー 2-1-1. 予約表 2-1-2. 受注一覧 3. 法人マイページ 3-1. 予約 3-1-1. 法人予約 3-2. 業務メニュー 3-2-1. 見積書 3-2-2. 発注 出力条件： 出力は、SVGファイル形式で行ってください。
ChatGPT-3.5 の回答
申し訳ありませんが、SVG形式での画像生成はこの環境ではサポートされていません。しかし、SVG形式の仕様概要図の作成手順を説明し、それを元に手動で作成することは可能です。以下に、仕様概要図の構造を説明します。
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"> <!-- 一般ページ --> <rect x="50" y="50" width="200" height="100" fill="lightblue" stroke="black" stroke-width="2"/> <text x="150" y="100" font-family="Arial" font-size="16" fill="black" text-anchor="middle">一般ページ</text> <rect x="80" y="120" width="140" height="60" fill="lightgreen" stroke="black" stroke-width="2"/> <text x="150" y="150" font-family="Arial" font-size="14" fill="black" text-anchor="middle">個人予約</text> <rect x="80" y="200" width="140" height="60" fill="lightgreen" stroke="black" stroke-width="2"/> <text x="150" y="240" font-family="Arial" font-size="14" fill="black" text-anchor="middle">法人会員登録</text> <!-- 管理者ページ --> <rect x="350" y="50" width="200" height="100" fill="lightcoral" stroke="black" stroke-width="2"/> <text x="450" y="100" font-family="Arial" font-size="16" fill="black" text-anchor="middle">管理者ページ</text> <rect x="380" y="120" width="140" height="60" fill="lightpink" stroke="black" stroke-width="2"/> <text x="450" y="150" font-family="Arial" font-size="14" fill="black" text-anchor="middle">業務メニュー</text> <rect x="380" y="200" width="140" height="60" fill="lightpink" stroke="black" stroke-width="2"/> <text x="450" y="240" font-family="Arial" font-size="14" fill="black" text-anchor="middle">予約表</text> <rect x="380" y="280" width="140" height="60" fill="lightpink" stroke="black" stroke-width="2"/> <text x="450" y="320" font-family="Arial" font-size="14" fill="black" text-anchor="middle">受注一覧</text> <!-- 法人マイページ --> <rect x="200" y="250" width="200" height="100" fill="lightgoldenrodyellow" stroke="black" stroke-width="2"/> <text x="300" y="300" font-family="Arial" font-size="16" fill="black" text-anchor="middle">法人マイページ</text> <rect x="230" y="320" width="140" height="60" fill="lightyellow" stroke="black" stroke-width="2"/> <text x="300" y="350" font-family="Arial" font-size="14" fill="black" text-anchor="middle">予約</text> <rect x="230" y="390" width="140" height="60" fill="lightyellow" stroke="black" stroke-width="2"/> <text x="300" y="420" font-family="Arial" font-size="14" fill="black" text-anchor="middle">法人予約</text> <rect x="230" y="470" width="140" height="60" fill="lightyellow" stroke="black" stroke-width="2"/> <text x="300" y="500" font-family="Arial" font-size="14" fill="black" text-anchor="middle">業務メニュー</text> <rect x="230" y="540" width="140" height="60" fill="lightyellow" stroke="black" stroke-width="2"/> <text x="300" y="570" font-family="Arial" font-size="14" fill="black" text-anchor="middle">見積書</text> <rect x="230" y="610" width="140" height="60" fill="lightyellow" stroke="black" stroke-width="2"/> <text x="300" y="640" font-family="Arial" font-size="14" fill="black" text-anchor="middle">発注</text> </svg>このSVGコードは、仕様概要図の基本的な構造を表現しています。各要素は矩形とテキストで表され、色や配置は調整可能です。SVGコードをコピーして、適切なSVGファイルに貼り付けてください。また、必要に応じてサイズやスタイルを変更してください。
Edge で、SVGファイルを表示した画面キャプチャ①
Edge で、SVGファイルを表示した画面キャプチャ②
「法人マイページ」の下の方が切れていますので、
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
として、height を「400」⇒「800」に変更した画面キャプチャが下記です。
考察
ChatGPT に、「システムの仕様概要図」を書いてもらうことができましたが、対応している階層は、2階層までみたいです。3階層目は、2階層目と同階層で、描画されています。簡単な図示であれば、実務でも使用できそうですね。
本内容に、興味がある方は、お問い合わせフォーム より、お問い合わせくださいませ。