Krow-workspace/docs/prompts/create-full-architecture-diagram-flutter.md

What the prompt does

• Generate a full architecture diagram for a Flutter project based on the given overview and use case diagram
• The architecture diagram should include the frontend, backend, and database layers
• The architecture diagram should be generated using mermaid syntax

Assumption

• Flutter project is given
• Overview mermaid diagram is given
• Use case diagram is given
• Backend architecture mermaid diagram is given
• The backend architecture diagram should be generated based on the given overview and use case diagrams

How to use the prompt

For the given Flutter project, I want to generate a complete architecture document. Use the codebase together with the following Mermaid files:

• overview.mermaid
• api_map.mermaid
• backend_architecture.mermaid
• use_case_flows.mermaid
• use-case-flowchart.mermaid (duplicate file if needed for additional reference)

Your tasks:

1. Analyze the Flutter project structure, the relevant backend integrations, and all provided Mermaid diagrams.

2. Create a comprehensive Markdown architecture document (architecture.md) that includes:

   A. Introduction

   • High-level summary of the project.
   • Brief description of the core purpose of the app.

   B. Full Architecture Overview

   • Explanation of app architecture used (e.g., layered architecture, MVVM, Clean Architecture, etc.).
   • Description of key modules, layers, and responsibilities.
   • Integration points between UI, domain, and data layers.

   C. Backend Architecture

   • Based on the backend diagrams, describe:

     • How GraphQL is used.
     • How Firebase services (Auth, Firestore, Storage, Functions, etc.) are integrated.
     • How the app communicates with the backend end-to-end.
     • API flow between Flutter → GraphQL → Firebase.

   D. API Layer

   • Summaries of GraphQL queries, mutations, and subscriptions.
   • Explanation of how the app handles API errors, retries, caching, and parsing.
   • Any backend-dependent logic highlighted in diagrams.

   E. State Management

   • Identify the state management approach used (Bloc, Riverpod, Provider, Cubit, ValueNotifier, etc.).

   • Explain:

     • Why this method was chosen.
     • How state flows between UI, logic, and backend.
     • How the state management integrates with the API layer.

   F. Use-Case Flows

   • Explain each major use case using the use_case_flows.mermaid and use-case-flowchart.mermaid diagrams.
   • Describe the UI → Logic → Backend → Response cycle for each use case.

   G. Backend Replacement Section

   Add a dedicated section titled “Replacing or Plugging in a New Backend: Considerations & Recommendations”, including:

   • What parts of the codebase are tightly coupled to the current backend.
   • What should be abstracted (e.g., repositories, services, DTOs, error handling).
   • How to structure interfaces to allow backend swapping.
   • Suggested design improvements to make the architecture more backend-agnostic.
   • Migration strategies for replacing GraphQL + Firebase with another backend (REST, Supabase, Hasura, etc.).

3. Make the Markdown document clear, well-structured, and easy for developers to use as a long-term reference.

4. Output the final result as a single architecture.md file.