Markdown architecture diagram maker

Diagram a system architecture. Mermaid architecture blocks lay out services, groups and the connections between them for your design docs.

Mermaid architecture syntax

An architecture diagram is a set of services, optionally gathered into groups, with connections between them. You give each service an icon and a label, then join them by their sides. Here is each piece you can write.

Services

Declare each service with an id, an icon in round brackets and a label in square brackets.

You write

architecture-beta
  service web(internet)[Web]
  service api(server)[API]
  service db(database)[Database]

You get

Connections

Join two services by a side letter: L, R, T or B.

You write

architecture-beta
  service api(server)[API]
  service db(database)[Database]
  api:R -- L:db

You get

Groups

Put services in a group and lay out the group as a unit.

You write

architecture-beta
  group cloud(cloud)[Cloud]
  service api(server)[API] in cloud
  service db(database)[Database] in cloud
  service disk(disk)[Storage] in cloud
  api:R -- L:db
  db:B -- T:disk

You get

Cheat sheet

Write this	You get
`architecture-beta`	Start an architecture diagram
`service id(icon)[Label]`	A service with an icon and label
`group id(icon)[Label]`	A group
`service id(icon)[Label] in group`	Place a service inside a group
`a:R -- L:b`	Connect two services by their sides
`L R T B`	Left, right, top and bottom sides
icons	`cloud`, `database`, `server`, `disk`, `internet`