Architecture Diagram

Use Mermaid architecture-beta when you want to show systems, groups, services, and directional relationships at a higher level than a flowchart.

Basic template

architecture-beta
    group api(cloud)[API Layer]
    service web(server)[Web App] in api
    service db(database)[Database]

    web:R --> L:db

Core syntax

• Start with architecture-beta
• Define containers with group id(icon)[Label]
• Define components with service id(icon)[Label]
• Place a service inside a group with in groupId
• Connect components with leftId:Side --> Side:rightId

Common example

architecture-beta
    group edge(cloud)[Edge]
    group app(server)[Application]
    group data(database)[Data]

    service cdn(internet)[CDN] in edge
    service web(server)[Web App] in app
    service worker(server)[Job Worker] in app
    service db(database)[Postgres] in data
    service cache(disk)[Redis] in data

    cdn:R --> L:web
    web:B --> T:db
    web:R --> L:cache
    worker:B --> T:db
    worker:R --> L:cache

Good for

• System context diagrams
• Platform overviews
• Team handoff documentation

Watch for

• This syntax is newer than classic Mermaid diagrams
• Side markers like L, R, T, and B control attachment points
• Keep labels short or the diagram gets crowded fast