Skip to content
Mernyx
Open menu

Mermaid Architecture Diagram Cheat Sheet

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

Every picture on this page was drawn byMernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

Services

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

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.Expand diagram

Groups

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

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.Expand diagram

Edges

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

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.Expand diagram

Junctions

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

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.Expand diagram

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.

Buy Mernyx Pro — $19Download free

Diagram preview