# Mermaid Architecture Diagram Cheat Sheet

Services, the groups they live in, and the edges between them.

## Services

The parentheses pick the icon, the brackets pick the label, and the id is what the other lines point at.

```mermaid
architecture-beta
  service web(server)[Web app]
  service db(database)[Database]
  service cache(disk)[Cache]
```

![Three service boxes: a Web app with a server icon, a Database with a database icon, and a Cache with a disk icon.](/diagrams/architecture/services.svg)

## Groups

A group is a box that holds services. The in keyword puts a service inside one.

```mermaid
architecture-beta
  group api(cloud)[API]
  service web(server)[Web] in api
  service db(database)[DB] in api
```

![A group labelled API holding two services, Web and DB.](/diagrams/architecture/groups.svg)

## Edges

The letter before the colon says which side the edge leaves from, and the one after says which side it arrives at.

```mermaid
architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  service c(server)[Service C]
  a:R --> L:b
  a:B --> T:c
```

![Three service boxes. Service A connects to Service B on its right and to Service C on its top, with each arrow leaving from the matching side.](/diagrams/architecture/edges.svg)

## Junctions

A junction is a dot several edges meet at. It is drawn without a box of its own.

```mermaid
architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  junction hub
  a:R -- L:hub
  hub:R -- L:b
```

![Two service boxes connected through an unlabelled dot in the middle.](/diagrams/architecture/junction.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.