# aamir569696/mockflow-ai architecture

> Architecture diagram of the GitHub repository aamir569696/mockflow-ai, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aamir569696/mockflow-ai
- Repository: https://github.com/aamir569696/mockflow-ai

## Overview

MockFlow AI turns a natural-language API description into an editable, session-scoped mock REST API that developers can exercise, monitor, and export. The main path runs from the Playground through generation and schema editing, then serves live mock requests; separate branches cover QA/load testing, telemetry, public docs, exports, and authentication. The README documents capabilities whose route or component internals were not sampled, so those links are shown only where the tree or documented architecture supports them.

Main entry points: [`frontend/src/services/mockService.js`](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/mockService.js) (Mock API client), [`backend/server.js`](https://github.com/aamir569696/mockflow-ai/blob/main/backend/server.js) (Express API server), [`frontend/src/pages/PlaygroundPage.jsx`](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/pages/PlaygroundPage.jsx) (API playground), [`backend/routes/mock.js`](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/mock.js) (Mock request routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Playground and tools"]
  node_spa["React application<br/>[App.jsx]"]
  node_playground["API playground<br/>[PlaygroundPage.jsx]"]
  node_prompt["Prompt and schema editing<br/>[PromptPanel.jsx]"]
  node_endpointview["Endpoint preview"]
  node_requestrunner["HTTP request runner<br/>[RequestRunner.jsx]"]
  node_qa["QA and stress tools<br/>[StressTester.jsx]"]
  node_telemetry["Traffic dashboard<br/>[RegressionLog.jsx]"]
  node_publicdocs["Public API docs<br/>[DocsPage.jsx]"]
  node_export["Export and SDK tools<br/>[ExportDropdown.jsx]"]
  node_playstore[("Playground state<br/>[playgroundStore.js]")]
  node_history[("Generation history<br/>[useHistoryStore.js]")]
  node_mockservice["Mock API client<br/>[mockService.js]"]
  node_endpointservice["Saved endpoint client<br/>[endpointService.js]"]
  node_authui["Account interface<br/>[AuthModal.jsx]"]
  node_authservice["Authentication client<br/>[authService.js]"]
end

subgraph group_generation["API generation"]
  node_generateroute["Generation routes<br/>[generate.js]"]
  node_generator["Generation engine<br/>[DataGenerator.js]"]
end

subgraph group_runtime["Mock runtime"]
  node_server["Express API server<br/>[server.js]"]
  node_endpointroute["Endpoint management<br/>[endpoints.js]"]
  node_mockroute["Mock request routes<br/>[mock.js]"]
  node_resolver["Mock resolver<br/>[MockResolver.js]"]
  node_trafficroute["Traffic routes<br/>[traffic.js]"]
  node_docsroute["Documentation route<br/>[docs.js]"]
end

subgraph group_sessions["Sessions and integrations"]
  node_store[("Session mock store<br/>[SessionStore.js]")]
  node_authroute["Authentication routes<br/>[auth.js]"]
  node_authmiddleware["Auth middleware<br/>[auth.js]"]
  node_user[("User records<br/>[User.js]")]
  node_persistence["Session persistence"]
end

node_developer(("Developer"))
node_gemini{{"Gemini AI"}}
node_mongodb[("MongoDB")]

node_developer -->|"uses"| node_spa
node_spa -->|"routes to"| node_playground
node_playground -->|"edits prompt"| node_prompt
node_playground -->|"shows endpoints"| node_endpointview
node_playground -->|"runs requests"| node_requestrunner
node_prompt -->|"updates state"| node_playstore
node_playground -->|"calls API"| node_mockservice
node_mockservice -->|"sends generation"| node_generateroute
node_generateroute -->|"generates schema"| node_generator
node_generateroute -.->|"requests AI"| node_gemini
node_generator -->|"registers definitions"| node_store
node_generator -->|"returns schema"| node_playstore
node_endpointview -->|"offers exports"| node_export
node_endpointview -->|"reads endpoints"| node_playstore
node_playground -->|"saves snapshots"| node_history
node_requestrunner -->|"fires requests"| node_mockservice
node_mockservice -->|"sends mock request"| node_mockroute
node_mockroute -->|"resolves request"| node_resolver
node_resolver -->|"reads definitions and data"| node_store
node_mockroute -->|"updates collections"| node_store
node_mockroute -->|"records traffic"| node_trafficroute
node_telemetry -->|"fetches traffic"| node_mockservice
node_mockservice -->|"requests traffic"| node_trafficroute
node_qa -->|"generates tests and requests"| node_mockservice
node_publicdocs -->|"fetches docs"| node_mockservice
node_mockservice -->|"requests docs"| node_docsroute
node_docsroute -->|"reads API metadata"| node_store
node_developer -->|"opens account"| node_authui
node_authui -->|"submits credentials"| node_authservice
node_authservice -->|"calls auth API"| node_authroute
node_authroute -->|"reads and writes users"| node_user
node_endpointservice -->|"manages saved endpoints"| node_endpointroute
node_endpointroute -->|"checks access"| node_authmiddleware
node_server -->|"initializes persistence"| node_persistence
node_persistence -.->|"persists sessions"| node_mongodb
node_server -->|"mounts routes"| node_generateroute
node_server -->|"mounts routes"| node_mockroute
node_server -->|"mounts routes"| node_endpointroute
node_server -->|"mounts routes"| node_trafficroute
node_server -->|"mounts routes"| node_docsroute
node_server -->|"mounts routes"| node_authroute

click node_spa "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/App.jsx"
click node_playground "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/pages/PlaygroundPage.jsx"
click node_prompt "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/PromptPanel.jsx"
click node_endpointview "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/EndpointPreview.jsx"
click node_requestrunner "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/RequestRunner.jsx"
click node_qa "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/dashboard/StressTester.jsx"
click node_telemetry "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/dashboard/RegressionLog.jsx"
click node_publicdocs "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/pages/DocsPage.jsx"
click node_export "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/ExportDropdown.jsx"
click node_playstore "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/store/playgroundStore.js"
click node_history "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/store/useHistoryStore.js"
click node_mockservice "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/mockService.js"
click node_endpointservice "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/endpointService.js"
click node_authui "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/auth/AuthModal.jsx"
click node_authservice "https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/authService.js"
click node_server "https://github.com/aamir569696/mockflow-ai/blob/main/backend/server.js"
click node_generateroute "https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/generate.js"
click node_generator "https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/DataGenerator.js"
click node_endpointroute "https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/endpoints.js"
click node_mockroute "https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/mock.js"
click node_resolver "https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/MockResolver.js"
click node_store "https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/SessionStore.js"
click node_trafficroute "https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/traffic.js"
click node_docsroute "https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/docs.js"
click node_authroute "https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/auth.js"
click node_authmiddleware "https://github.com/aamir569696/mockflow-ai/blob/main/backend/middleware/auth.js"
click node_user "https://github.com/aamir569696/mockflow-ai/blob/main/backend/models/User.js"
click node_persistence "https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/SessionPersistence.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_spa,node_playground,node_prompt,node_endpointview,node_requestrunner,node_qa,node_telemetry,node_publicdocs,node_export,node_playstore,node_history,node_mockservice,node_endpointservice,node_authui,node_authservice toneBlue
class node_generateroute,node_generator,node_mongodb toneAmber
class node_server,node_endpointroute,node_mockroute,node_resolver,node_trafficroute,node_docsroute toneMint
class node_store,node_authroute,node_authmiddleware,node_user,node_persistence toneRose
class node_developer,node_gemini toneIndigo
```

## Components

### Playground and tools

- [React application](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [API playground](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/pages/PlaygroundPage.jsx): `frontend/src/pages/PlaygroundPage.jsx`
- [Prompt and schema editing](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/PromptPanel.jsx): `frontend/src/components/playground/PromptPanel.jsx`
- [Endpoint preview](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/EndpointPreview.jsx): `frontend/src/components/playground/EndpointPreview.jsx`
- [HTTP request runner](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/RequestRunner.jsx): `frontend/src/components/playground/RequestRunner.jsx`
- [QA and stress tools](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/dashboard/StressTester.jsx): `frontend/src/components/dashboard/StressTester.jsx`
- [Traffic dashboard](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/dashboard/RegressionLog.jsx): `frontend/src/components/dashboard/RegressionLog.jsx`
- [Public API docs](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/pages/DocsPage.jsx): `frontend/src/pages/DocsPage.jsx`
- [Export and SDK tools](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/playground/ExportDropdown.jsx): `frontend/src/components/playground/ExportDropdown.jsx`
- [Playground state](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/store/playgroundStore.js): `frontend/src/store/playgroundStore.js`
- [Generation history](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/store/useHistoryStore.js): `frontend/src/store/useHistoryStore.js`
- [Mock API client](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/mockService.js): `frontend/src/services/mockService.js`
- [Saved endpoint client](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/endpointService.js): `frontend/src/services/endpointService.js`
- [Account interface](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/components/auth/AuthModal.jsx): `frontend/src/components/auth/AuthModal.jsx`
- [Authentication client](https://github.com/aamir569696/mockflow-ai/blob/main/frontend/src/services/authService.js): `frontend/src/services/authService.js`

### API generation

- [Generation routes](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/generate.js): `backend/routes/generate.js`
- [Generation engine](https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/DataGenerator.js): `backend/services/DataGenerator.js`

### Mock runtime

- [Express API server](https://github.com/aamir569696/mockflow-ai/blob/main/backend/server.js): `backend/server.js`
- [Endpoint management](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/endpoints.js): `backend/routes/endpoints.js`
- [Mock request routes](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/mock.js): `backend/routes/mock.js`
- [Mock resolver](https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/MockResolver.js): `backend/services/MockResolver.js`
- [Traffic routes](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/traffic.js): `backend/routes/traffic.js`
- [Documentation route](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/docs.js): `backend/routes/docs.js`

### Sessions and integrations

- [Session mock store](https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/SessionStore.js): `backend/services/SessionStore.js`
- [Authentication routes](https://github.com/aamir569696/mockflow-ai/blob/main/backend/routes/auth.js): `backend/routes/auth.js`
- [Auth middleware](https://github.com/aamir569696/mockflow-ai/blob/main/backend/middleware/auth.js): `backend/middleware/auth.js`
- [User records](https://github.com/aamir569696/mockflow-ai/blob/main/backend/models/User.js): `backend/models/User.js`
- [Session persistence](https://github.com/aamir569696/mockflow-ai/blob/main/backend/services/SessionPersistence.js): `backend/services/SessionPersistence.js`

### Other components

- **Developer**
- **Gemini AI**
- **MongoDB**

## Connections

- Developer → React application: uses
- React application → API playground: routes to
- API playground → Prompt and schema editing: edits prompt
- API playground → Endpoint preview: shows endpoints
- API playground → HTTP request runner: runs requests
- Prompt and schema editing → Playground state: updates state
- API playground → Mock API client: calls API
- Mock API client → Generation routes: sends generation
- Generation routes → Generation engine: generates schema
- Generation routes → Gemini AI: requests AI
- Generation engine → Session mock store: registers definitions
- Generation engine → Playground state: returns schema
- Endpoint preview → Export and SDK tools: offers exports
- Endpoint preview → Playground state: reads endpoints
- API playground → Generation history: saves snapshots
- HTTP request runner → Mock API client: fires requests
- Mock API client → Mock request routes: sends mock request
- Mock request routes → Mock resolver: resolves request
- Mock resolver → Session mock store: reads definitions and data
- Mock request routes → Session mock store: updates collections
- Mock request routes → Traffic routes: records traffic
- Traffic dashboard → Mock API client: fetches traffic
- Mock API client → Traffic routes: requests traffic
- QA and stress tools → Mock API client: generates tests and requests
- Public API docs → Mock API client: fetches docs
- Mock API client → Documentation route: requests docs
- Documentation route → Session mock store: reads API metadata
- Developer → Account interface: opens account
- Account interface → Authentication client: submits credentials
- Authentication client → Authentication routes: calls auth API
- Authentication routes → User records: reads and writes users
- Saved endpoint client → Endpoint management: manages saved endpoints
- Endpoint management → Auth middleware: checks access
- Express API server → Session persistence: initializes persistence
- Session persistence → MongoDB: persists sessions
- Express API server → Generation routes: mounts routes
- Express API server → Mock request routes: mounts routes
- Express API server → Endpoint management: mounts routes
- Express API server → Traffic routes: mounts routes
- Express API server → Documentation route: mounts routes
- Express API server → Authentication routes: mounts routes