Mermaid template

Architecture Diagram

Cloud and system architecture with services, groups and icons - infrastructure at a glance.

architecture-beta
    group api(cloud)[Backend]

    service db(database)[Database] in api
    service server(server)[App server] in api
    service disk(disk)[Storage] in api
    service gateway(internet)[Gateway]

    gateway:R --> L:server
    server:R --> L:db
    db:B -- T:disk

An architecture diagram shows services inside groups, joined by edges that leave from a chosen side of each box. It reads like a cloud infrastructure sketch.

Declare a group, put services in it with the in keyword, and connect them with edges such as db:L -- R:server, where L, R, T and B pick the side. Built-in icons include cloud, database, server and internet.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.