Flowchart

System Architecture Flow

Show a web request moving through app, API, authorization, services, cache, and database layers.

Edit this template Browse all templates

Use Cases

Explain a backend request path in a design document

Create a lightweight architecture diagram for a feature review

Compare cache and database responsibilities in one flow

Show what happens when authorization fails before domain services run

How This Workflow Works

Step	Purpose
Browser request	Shows the user-facing client initiating a request through the web application.
API route	Represents the server entry point that receives the request and prepares middleware checks.
Authorization	Splits denied requests from authorized requests before the system touches domain services.
Domain service	Holds the business logic that coordinates cache reads, database reads, and response building.
Cache and database	Shows the persistence and performance layers that support the service response.

How To Customize

Rename the web, API, service, cache, and database nodes

Add missing infrastructure such as queues, workers, or external APIs

Change the diagram direction if your architecture reads better top-down

Add observability, rate limiting, feature flag, or background job nodes

Label response paths so reviewers can see where data returns to the user

Edit This Template Visually

Open this template in the editor to work from the rendered diagram and the Mermaid source together. Click a node in supported flowchart and sequence diagrams to locate the matching code, select source lines to find the related shape, or ask AI to rename, expand, restyle, or rewrite the selected part of the workflow.

Mermaid Source

flowchart LR
    browser[Browser] --> web[Next.js app]
    web --> api[API route]
    api --> auth{Authorized?}
    auth -->|No| denied[Return denied]
    auth -->|Yes| service[Domain service]
    service --> cache[(Cache)]
    service --> db[(Database)]
    db --> service
    cache --> service
    service --> api
    api --> web