Block diagram (Mermaid)

Most Mermaid diagrams choose their own layout. Block diagrams let you set the columns, which is useful when the arrangement itself carries meaning.

#What this example shows

• columns, which fixes how many blocks sit per row.

• Blocks spanning several columns, for headers and groups.

• Arrows between blocks, drawn after the layout is declared.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

block-beta
  columns 3
  edge["Edge / CDN"]:3
  space:3
  web["Web tier"] api["API tier"] worker["Workers"]
  space:3
  db[("Postgres")] cache[("Redis")] queue[("Job queue")]

  edge --> web
  web --> api
  api --> db
  api --> cache
  api --> queue
  queue --> worker
  worker --> db

#Making it your own

• Change columns to reshape the whole diagram in one edit.

• space creates a gap, which is how you control vertical rhythm.

• For diagrams where layout does not matter, a flowchart is less work.

#Related

Copy it. Change one line. See what happens.