diff --git a/docs/prompts/create-mermaid-be-diagrams-flutter.md b/docs/prompts/create-mermaid-be-diagrams-flutter.md
new file mode 100644
index 00000000..64684b1b
--- /dev/null
+++ b/docs/prompts/create-mermaid-be-diagrams-flutter.md
@@ -0,0 +1,57 @@
+## 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**
+
+---
+
+If you'd like, I can also generate a **Cursor-optimized** version or a **Claude Projects** version.
diff --git a/firebase/internal-launchpad/assets/diagrams/diagrams-config.json b/firebase/internal-launchpad/assets/diagrams/diagrams-config.json
index 9998cdd7..d624202c 100644
--- a/firebase/internal-launchpad/assets/diagrams/diagrams-config.json
+++ b/firebase/internal-launchpad/assets/diagrams/diagrams-config.json
@@ -58,5 +58,23 @@
     "title": "Legacy App Use Cases",
     "type": "mermaid",
     "icon": "bi-diagram-2"
+  },
+  {
+    "path": "assets/diagrams/legacy/staff-mobile-application/api_map.mermaid",
+    "title": "Legacy App API Map",
+    "type": "mermaid",
+    "icon": "bi-phone"
+  },
+  {
+    "path": "assets/diagrams/legacy/staff-mobile-application/use_case_flows.mermaid",
+    "title": "Legacy App Use Cases BE Chart",
+    "type": "mermaid",
+    "icon": "bi-diagram-2"
+  },
+  {
+    "path": "assets/diagrams/legacy/staff-mobile-application/backend_architecture.mermaid",
+    "title": "Legacy App Use Cases",
+    "type": "mermaid",
+    "icon": "bi-diagram-2"
   }
 ]
\ No newline at end of file
diff --git a/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/api_map.mermaid b/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/api_map.mermaid
new file mode 100644
index 00000000..56283555
--- /dev/null
+++ b/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/api_map.mermaid
@@ -0,0 +1,57 @@
+graph TD
+    subgraph GraphQL API
+        subgraph Queries
+            Q1[getStaffStatus]
+            Q2[getMe]
+            Q3[getStaffPersonalInfo]
+            Q4[getStaffProfileRoles]
+            Q5[getShifts]
+            Q6[staffNoBreakShifts]
+            Q7[getShiftPosition]
+        end
+
+        subgraph Mutations
+            M1[updateStaffPersonalInfo]
+            M2[updateStaffPersonalInfoWithAvatar]
+            M3[uploadStaffAvatar]
+            M4[acceptShift]
+            M5[trackStaffClockin]
+            M6[trackStaffClockout]
+            M7[trackStaffBreak]
+            M8[submitNoBreakStaffShift]
+            M9[cancelStaffShift]
+            M10[declineShift]
+        end
+    end
+
+    subgraph Firebase Services
+        FS[Firebase Storage]
+        FF[Firebase Firestore]
+        FA[Firebase Auth]
+    end
+
+    M2 --> FS;
+    M3 --> FS;
+
+    Q1 --> FF;
+    Q2 --> FF;
+    Q3 --> FF;
+    Q4 --> FF;
+    Q5 --> FF;
+    Q6 --> FF;
+    Q7 --> FF;
+
+    M1 --> FF;
+    M2 --> FF;
+    M4 --> FF;
+    M5 --> FF;
+    M6 --> FF;
+    M7 --> FF;
+    M8 --> FF;
+    M9 --> FF;
+    M10 --> FF;
+
+    Q1 --> FA;
+    Q2 --> FA;
+    Q3 --> FA;
+    
\ No newline at end of file
diff --git a/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/backend_architecture.mermaid b/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/backend_architecture.mermaid
new file mode 100644
index 00000000..650e8329
--- /dev/null
+++ b/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/backend_architecture.mermaid
@@ -0,0 +1,37 @@
+graph TD
+    subgraph Flutter App
+        A[Flutter UI]
+        B[GraphQL Client]
+        C[Firebase SDK]
+    end
+
+    subgraph Backend
+        D[GraphQL Server]
+        E[Firebase]
+    end
+
+    subgraph Firebase
+        F[Firebase Auth]
+        G[Firebase Firestore]
+        H[Firebase Storage]
+        I[Firebase Cloud Functions]
+        J[Firebase Cloud Messaging]
+        K[Firebase Remote Config]
+    end
+
+    A --> B;
+    A --> C;
+
+    B --> D;
+    C --> F;
+    C --> J;
+    C --> K;
+
+    D --> G;
+    D --> H;
+    D --> I;
+    D --> F;
+
+    I --> G;
+    I --> H;
+    I --> J;
\ No newline at end of file
diff --git a/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/use_case_flows.mermaid b/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/use_case_flows.mermaid
new file mode 100644
index 00000000..e74deff7
--- /dev/null
+++ b/firebase/internal-launchpad/assets/diagrams/legacy/staff-mobile-application/use_case_flows.mermaid
@@ -0,0 +1,39 @@
+graph TD
+    subgraph User Authentication
+        direction LR
+        UA1[Flutter App] -->|Phone Number| UA2[Firebase Auth];
+        UA2 -->|Verification Code| UA1;
+        UA1 -->|Verification Code| UA2;
+        UA2 -->|Auth Token| UA1;
+        UA1 -->|Auth Token| UA3[GraphQL Server];
+        UA3 -->|User Data| UA1;
+    end
+
+    subgraph User Onboarding
+        direction LR
+        UO1[Flutter App] -->|Personal Info| UO2[GraphQL Server];
+        UO2 -->|update_staff_personal_info| UO3[Firebase Firestore];
+        UO2 -->|User Data| UO1;
+    end
+
+    subgraph Shift Management
+        direction LR
+        SM1[Flutter App] -->|Get Shifts| SM2[GraphQL Server];
+        SM2 -->|getShifts| SM3[Firebase Firestore];
+        SM3 -->|Shift Data| SM2;
+        SM2 -->|Shift Data| SM1;
+
+        SM1 -->|Accept Shift| SM2;
+        SM2 -->|accept_shift| SM3;
+        SM3 -->|Updated Shift| SM2;
+        SM2 -->|Updated Shift| SM1;
+    end
+
+    subgraph Profile Update with Avatar
+        direction LR
+        PU1[Flutter App] -->|Image| PU2[Firebase Storage];
+        PU2 -->|Image URL| PU1;
+        PU1 -->|Image URL & Personal Info| PU3[GraphQL Server];
+        PU3 -->|update_staff_personal_info & upload_staff_avatar| PU4[Firebase Firestore];
+        PU3 -->|User Data| PU1;
+    end
\ No newline at end of file