Mermaid Architecture

Mermaid can represent more specialized engineering diagrams.

The source includes:

architecture-beta
packet-beta

These are useful for infrastructure and protocol documentation.

Architecture Diagram

architecture-beta supports explicit directional connections.

architecture-beta
    group api(cloud)[API Layer]

    service gateway(internet)[Gateway] in api
    service server(server)[Node.js] in api
    service db(database)[PostgreSQL]

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

Directional ports such as L, R, T, and B help control connections.

Packet Diagram

Packet diagrams can represent bit-level protocol fields.

packet-beta
    title TCP Header

    0-15: "Source Port"
    16-31: "Destination Port"
    32-63: "Sequence Number"
    64-95: "Acknowledgment Number"
    96-99: "Data Offset"
    100-105: "Reserved"
    106-111: "Control Flags"
    112-127: "Window Size"

The example represents fields across a 32-bit-grid-style packet layout.

1. Basic Architecture Diagram

architecture-beta
    service user(server)[User]
    service web(server)[Web Server]
    service db(database)[Database]

    user:R --> L:web
    web:R --> L:db

2. Web Application Architecture

architecture-beta
    group frontend(cloud)[Frontend]
    group backend(cloud)[Backend]

    service browser(internet)[Browser] in frontend
    service web(server)[Web Server] in frontend

    service api(server)[API Server] in backend
    service database(database)[Database] in backend

    browser:R --> L:web
    web:R --> L:api
    api:R --> L:database

3. Cloud Architecture

architecture-beta
    group cloud(cloud)[Cloud]

    service loadbalancer(server)[Load Balancer] in cloud
    service app(server)[Application Server] in cloud
    service database(database)[Database] in cloud

    loadbalancer:R --> L:app
    app:R --> L:database

4. Architecture with Multiple Services

architecture-beta
    service user(internet)[User]

    group backend(cloud)[Backend]

    service api(server)[API] in backend
    service auth(server)[Auth Service] in backend
    service database(database)[Database] in backend

    user:R --> L:api
    api:R --> L:auth
    api:R --> L:database

Basic syntax

architecture-beta
    service <id>(<icon>)[Label]

    group <id>(<icon>)[Label]

    service-a:R --> L:service-b

Common built-in icons include:

cloud
database
server
internet

The R and L specify connection sides, such as Right → Left. You can also use T (top) and B (bottom).