An architecture diagram shows the services and infrastructure that make up a system, along with the connections between them. Services are represented as labelled icons; groups collect related services into named areas; edges show how services communicate.

Architecture diagrams are used in technical documentation and system design. They give a high-level picture of how a system is assembled — which components exist, where they live, and how they connect.

This diagram type is experimental and requires Mermaid v11.1 or later.

architecture-beta
    group website(cloud)[Website Infrastructure]

    service cdn(internet)[CDN] in website
    service webserver(server)[Web Server] in website
    service cms(server)[CMS] in website
    service database(database)[Database] in website
    service storage(disk)[Media Storage] in website

    cdn:R --> L:webserver
    webserver:R -- L:cms
    cms:B -- T:database
    cms:R -- L:storage

Services are declared with a name, an icon type (such as server, database, disk, internet, or cloud), and an optional label. Groups use the same format but wrap their contents visually to show which services belong together.

```mermaid
architecture-beta
    group website(cloud)[Website Infrastructure]

    service cdn(internet)[CDN] in website
    service webserver(server)[Web Server] in website
    service cms(server)[CMS] in website
    service database(database)[Database] in website
    service storage(disk)[Media Storage] in website

    cdn:R --> L:webserver
    webserver:R -- L:cms
    cms:B -- T:database
    cms:R -- L:storage
```

For more architecture diagram syntax see the architecture diagram documentation at mermaid.js.org