画面リストとシステム概要を入力して、画面遷移図を出力させる

INPUT

・画面リスト・システム概要

OUTPUT

・画面遷移図(PlantUML)

最終更新日時

Jan 29, 2024 7:32 AM

コンテンツカテゴリ

プロンプトカタログ

ツール

ChatGPT

利用シーン

設計/UI設計

利用するシチュエーション

要件定義/設計工程において、ある程度の画面構成が検討されており画面遷移図の雛形を作成したい。

検討が進んでいて画面ID、画面名が確定している→プロンプトA, C
検討初期段階で画面名のみ確定している→プロンプトB, D

プロンプトテンプレート

‣

A. 画面ID & 画面名が記載された遷移図を出力させる

‣

B. 画面名のみ記載された遷移図を出力させる

‣

C. 画面ID & 画面名が記載された遷移図を出力させる(プロンプト分割版

‣

D. 画面名のみ記載された遷移図を出力させる(プロンプト分割版

入出力サンプル

‣

A

‣

B

‣

C

‣

D

利用方法

利用したいプロンプトテンプレートの[ここに入力] を埋める。

#{システム概要}

GPTに画面間の遷移情報を推測してもらうための情報です。
「プロジェクト管理システム」等簡単なものでも可。

#{画面リスト}

それぞれのテンプレートに沿った形式で入力してください。
入力例

‣

プロンプトA, C

‣

プロンプトB, D

1で作成したプロンプトを実行してください。

※C, Dのプロンプトを実行する場合は、指示と画面情報を順番に実行してください。

出力されたUMLをお好みのPlantUML描画ツールで描画してください。
必要に応じて修正を行ってください。

GPTに修正を指示し再度出力してもらう。
PlantUMLを直接編集し修正する。
描画した遷移図をsvgとして出力し、excel等に取り込み編集する。

注意事項

GPT ver3.5ではうまく出力されないことが多いため、ver4の利用を推奨します。
基本的にはプロンプトA, Bをご利用ください。
画面数が多くGPTの文字数制限に引っかかってしまう場合等は、プロンプトC, Dをご利用ください。

あなたは優秀なシステム設計者です。
以下の#{出力ルール}、#{画面リスト例}、#{システム概要}、#{画面リスト}を元に画面遷移図を出力してください。

#{出力ルール}
- 画面遷移図はPlantUMLの状態遷移図形式で出力すること
- PlantUMLのフォーマットは#{PlantUML例}に則ること
- 画面名から画面同士の遷移情報を推測し、遷移情報も記載すること
- 各要素と遷移情報は省略せず全て記載すること
- PlantUMLは1つのCode Blockにまとめて出力すること
- 相互リンクも表現すること
- 遷移元が推測できないページが存在する場合は、PlantUMLに記載せずリストにまとめて出力すること
- PlantUML、遷移元不明ページの2項目のみ出力すること

#{PlantUML例}
@startuml

state "画面ID_A" as pageA
state "機能名" as functionA {
    state "画面ID_B" as pageB
    state "画面ID_C" as pageC
    state "画面ID_D" as pageD
    state "画面ID_E" as pageE
}
state "機能名" as functionB {
    state "画面ID_F" as pageF
}

' 遷移
pageA --> pageA : 認証失敗
pageA --> pageB : 認証成功
pageB --> pageA : ログアウト処理
pageB --> pageC : 詳細リンク
pageC --> pageD : 編集リンク
pageD --> pageE : 入力チェックOK
pageE --> pageC : 更新成功

' 画面名
pageA: 画面A
pageB: 画面B
pageC: 画面C
pageD: 画面D
pageE: 画面E
pageF: 画面F
@enduml

#{画面リスト例}
-- 機能名 --
画面ID-画面名
画面ID-画面名
-----

画面ID-画面名

-- 機能名 --
画面ID-画面名
画面ID-画面名
-----

#{システム概要}
[ここに入力]

#{画面リスト}
[ここに入力]

あなたは優秀なシステム設計者です。
以下の#{出力ルール}、#{画面リスト例}、#{システム概要}、#{画面リスト}を元に画面遷移図を出力してください。

#{出力ルール}
- 画面遷移図はPlantUMLの状態遷移図形式で出力すること
- PlantUMLのフォーマットは#{PlantUML例}に則ること
- 画面名から画面同士の遷移情報を推測し、遷移情報も記載すること
- 各要素と遷移情報は省略せず全て記載すること
- PlantUMLは1つのCode Blockにまとめて出力すること
- 相互リンクも表現すること
- 遷移元が推測できないページが存在する場合は、PlantUMLに記載せずリストにまとめて出力すること
- PlantUML、遷移元不明ページの2項目のみ出力すること

#{PlantUML例}
@startuml
hide empty description

state "画面A" as pageA
state "機能名" as functionA {
    state "画面B" as pageB
    state "画面C" as pageC
    state "画面D" as pageD
    state "画面E" as pageE
}
state "機能名" as functionB {
    state "画面F" as pageF
}

' 遷移
pageA --> pageA : 認証失敗
pageA --> pageB : 認証成功
pageB --> pageA : ログアウト処理
pageB --> pageC : 詳細リンク
pageC --> pageD : 編集リンク
pageD --> pageE : 入力チェックOK
pageE --> pageC : 更新成功
@enduml

#{画面リスト例}
-- 機能名 --
画面名
画面名
-----

画面名

-- 機能名 --
画面名
画面名
-----

#{システム概要}
[ここに入力]

#{画面リスト}
[ここに入力]

あなたは優秀なシステム設計者です。
以下の#{出力ルール}、#{画面リスト例}を理解し次回の入力に備えてください。
次回の入力では#{システム概要}と#{画面リスト}を入力するので、出力ルールに則って画面遷移図を出力してください。
上記を理解したら「はい」と答えてください。

#{出力ルール}
- 画面遷移図はPlantUMLの状態遷移図形式で出力すること
- PlantUMLのフォーマットは#{PlantUML例}に則ること
- 画面名から画面同士の遷移情報を推測し、遷移情報も記載すること
- 各要素と遷移情報は省略せず全て記載すること
- PlantUMLは1つのCode Blockにまとめて出力すること
- 相互リンクも表現すること
- 遷移元が推測できないページが存在する場合は、PlantUMLに記載せずリストにまとめて出力すること
- PlantUML、遷移元不明ページの2項目のみ出力すること

#{PlantUML例}
@startuml

state "画面ID_A" as pageA
state "機能名" as functionA {
    state "画面ID_B" as pageB
    state "画面ID_C" as pageC
    state "画面ID_D" as pageD
    state "画面ID_E" as pageE
}
state "機能名" as functionB {
    state "画面ID_F" as pageF
}

' 遷移
pageA --> pageA : 認証失敗
pageA --> pageB : 認証成功
pageB --> pageA : ログアウト処理
pageB --> pageC : 詳細リンク
pageC --> pageD : 編集リンク
pageD --> pageE : 入力チェックOK
pageE --> pageC : 更新成功

' 画面名
pageA: 画面A
pageB: 画面B
pageC: 画面C
pageD: 画面D
pageE: 画面E
pageF: 画面F
@enduml

#{画面リスト例}
-- 機能名 --
画面ID-画面名
画面ID-画面名
-----

画面ID-画面名

-- 機能名 --
画面ID-画面名
画面ID-画面名
-----

あなたは優秀なシステム設計者です。
以下の#{出力ルール}、#{画面リスト例}、を理解し次回の入力に備えてください。
次回の入力では#{システム概要}と#{画面リスト}を入力するので、出力ルールに則って画面遷移図を出力してください。
上記を理解したら「はい」と答えてください。

#{出力ルール}
- 画面遷移図はPlantUMLの状態遷移図形式で出力すること
- PlantUMLのフォーマットは#{PlantUML例}に則ること
- 画面名から画面同士の遷移情報を推測し、遷移情報も記載すること
- 各要素と遷移情報は省略せず全て記載すること
- PlantUMLは1つのCode Blockにまとめて出力すること
- 相互リンクも表現すること
- 遷移元が推測できないページが存在する場合は、PlantUMLに記載せずリストにまとめて出力すること
- PlantUML、遷移元不明ページの2項目のみ出力すること

#{PlantUML例}
@startuml
hide empty description

state "画面A" as pageA
state "機能名" as functionA {
    state "画面B" as pageB
    state "画面C" as pageC
    state "画面D" as pageD
    state "画面E" as pageE
}
state "機能名" as functionB {
   state "画面F" as pageF
}

' 遷移
pageA --> pageA : 認証失敗
pageA --> pageB : 認証成功
pageB --> pageA : ログアウト処理
pageB --> pageC : 詳細リンク
pageC --> pageD : 編集リンク
pageD --> pageE : 入力チェックOK
pageE --> pageC : 更新成功
@enduml

#{画面リスト例}
-- 機能名 --
画面名
画面名
-----

画面名

-- 機能名 --
画面名
画面名
-----