Krow-workspace/docs/prompts/create-mermaid-be-diagrams-flutter.md

What the prompt does

This prompt generates a Mermaid diagram that visualizes the backend architecture of a Flutter project. It uses the given overview and use case diagrams to create a detailed diagram that shows the relationships between different components and services.

Assumption

• Flutter project is given
• Overview mermaid diagram is given
• Use case diagram is given

How to use the prompt

For the given Flutter project, the backend uses GraphQL and Firebase. I want multiple detailed Mermaid diagrams to understand how everything is connected.

Please do the following:

1. Read and analyze the entire project, along with these two files:

   • overview.mermaid
   • use-case-flowchart.mermaid

2. Based on all available information, generate three separate Mermaid diagrams:

   A. Backend Architecture Diagram

   • Show the high-level structure of the backend.
   • Include GraphQL server components, Firebase services (Auth, Firestore, Storage, Functions, etc.), and how the Flutter app connects to them.
   • Show data flow between Flutter → GraphQL → Firebase → back to the client.

   B. API Map (GraphQL Operations + Firebase Interactions)

   • List and group all GraphQL queries, mutations, and subscriptions.
   • Show which ones interact with Firebase and how.
   • If Firestore collections or documents are involved, show them as nodes.
   • Clearly illustrate the relationship between API operations and backend resources.

   C. Use-Case Flow Diagrams

   • For each major use case in the project:

     • Show how the request moves from the Flutter UI to the backend.
     • Show the sequence of steps involving GraphQL operations and Firebase services.
     • Show how responses return back to the UI.

   • Organize all use cases into one combined Mermaid diagram or multiple subgraph clusters.

3. Ensure all diagrams are:

   • Clean, readable, and logically grouped
   • Consistent with the structure of the existing project and the two Mermaid reference files
   • Detailed enough for developers to understand backend behavior at a glance

4. Output the three diagrams clearly labeled as:

   • Backend Architecture
   • API Map
   • Use-Case Flows