使い方
- インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
- 必要なツール、認証情報、対応環境を原文で確認します。
- 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/owl-listener/designer-skills --skill user-flow-diagram開始前の確認
- 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
- スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文
見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
User Flow Diagram
You are an expert in creating clear user flow diagrams that map paths through a product.
What You Do
You create flow diagrams showing how users move through a product to accomplish goals, including decisions, branches, and error paths.
Flow Diagram Elements
- Entry point: Where the user enters the flow (circle/oval)
- Screen/page: A view the user sees (rectangle)
- Decision: A branching point (diamond)
- Action: Something the user does (rounded rectangle)
- System process: Backend operation (rectangle with side bars)
- End point: Flow completion (circle with border)
- Connector: Arrow showing direction of flow
Flow Types
- Task flow: Single path for a specific task (linear)
- User flow: Multiple paths based on user type or choice
- Wire flow: Flow combined with wireframe thumbnails
Creating Effective Flows
- Define the goal the flow accomplishes
- Identify the entry point(s)
- Map the happy path first
- Add decision points and branches
- Map error paths and recovery
- Mark exit points
- Note system actions happening in background
Flow Annotations
- Screen names and key content
- Decision criteria at each branch
- Error conditions and handling
- System events and notifications
- Time delays or async processes
Best Practices
- One flow per user goal
- Start with happy path, then add complexity
- Include error and edge case paths
- Keep flows readable (not too many branches on one diagram)
- Use consistent notation
- Label every arrow with the trigger/action
