Which shapes should I use?

Services as boxes [ ], databases as cylinders [( )], queues or external systems as double brackets [[ ]], users or devices as rounded nodes ( ). The shapes carry no meaning to Mermaid; they are conventions.

Too many lines between layers

Connect whole groups with a single edge, Application layer --> Data layer, or draw only the main path and describe secondary dependencies in the text.

Is this a logical or a deployment view?

This is a logical layered view. A deployment view (which servers, which containers) uses the same syntax with groups renamed to "Server A" or "Kubernetes cluster".

Web Application Architecture Diagram Template

Four-layer architecture of a web application with a separate frontend: clients, access layer (Nginx, API gateway), application services and data stores (MySQL, Redis, object storage). For proposals and capstone reports; free PNG, Word and PowerPoint export.

Previewed in the “Indigo” theme; you can switch themes in the editor

Open in the editorFree · No sign-up · No watermark

Edit the text, pick a theme, export Word / PowerPoint / PDF

When to use it

Technical design reviews, the architecture chapter of a proposal, and the system architecture section of a capstone report built on a REST backend and a single-page frontend. Four layers from top to bottom, one group per layer, databases drawn as cylinders.

Making it yours

Rename the services to your modules (order, payment, notification), add a node and connect it from the gateway.
Put the stack in the nodes: S2[Business service<br/>Spring Boot], DB[(MySQL 8)].
Add a message queue with MQ[[RabbitMQ]]; double square brackets draw the queue or subprocess shape.
Layer names are edited after subgraph.

Mermaid code

flowchart TB
    subgraph Clients
        B[Browser]
        M[Mobile app]
    end
    subgraph Access layer
        N[Nginx reverse proxy]
        G[API gateway]
    end
    subgraph Application layer
        S1[User service]
        S2[Business service]
        S3[File service]
    end
    subgraph Data layer
        DB[(MySQL)]
        R[(Redis cache)]
        OSS[(Object storage)]
    end
    B --> N
    M --> N
    N --> G
    G --> S1
    G --> S2
    G --> S3
    S1 --> DB
    S2 --> DB
    S1 --> R
    S2 --> R
    S3 --> OSS

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

Draw a web application architecture diagram in Mermaid flowchart TB syntax with subgraph layers: Clients (browser, mobile app), Access layer (Nginx reverse proxy, API gateway), Application layer (user service, business service, file service), Data layer (MySQL, Redis cache, object storage as cylinder nodes). Clients go through Nginx to the gateway, the gateway routes to the three services, and each service connects to its data store. Output only the mermaid code block.

FAQ

Which shapes should I use?: Services as boxes [ ], databases as cylinders [( )], queues or external systems as double brackets [[ ]], users or devices as rounded nodes ( ). The shapes carry no meaning to Mermaid; they are conventions.
Too many lines between layers: Connect whole groups with a single edge, Application layer --> Data layer, or draw only the main path and describe secondary dependencies in the text.
Is this a logical or a deployment view?: This is a logical layered view. A deployment view (which servers, which containers) uses the same syntax with groups renamed to "Server A" or "Kubernetes cluster".

More in this category

All templates

Updated 2026-09-05