# Mermaid Block Diagram Cheat Sheet

A wall of blocks, read from left to right.

## Blocks and arrows

A block is a quoted label. The words between two blocks label the arrow that joins them.

```mermaid
block-beta
  a["A"] space:2 b["B"]
  a -- "checks" --> b
```

![Two blocks, A and B, joined by an arrow labelled checks, with a gap of two spaces between them.](/diagrams/block/basic.svg)

## Columns

The columns keyword sets how many blocks fit on one row.

```mermaid
block-beta
  columns 3
  a["A"]
  b["B"]
  c["C"]
```

![Three blocks, A, B and C, laid out in a single row.](/diagrams/block/columns.svg)

## Arrow blocks

An arrow is a block too. Its name carries the direction, and the angle brackets hold its label.

```mermaid
block-beta
  Frontend blockArrowId6<[" "]>(right) Backend
  space:2 down<[" "]>(down)
  Disk left<[" "]>(left) Database[("Database")]
```

![A wide arrow from Frontend to Backend, a downward arrow below it, and a left-pointing arrow joining Disk to a database shape.](/diagrams/block/arrows.svg)

## Styling blocks

classDef names a style, and class applies it to the blocks you name.

```mermaid
block-beta
  columns 2
  Frontend["Frontend"] Backend["Backend"]
  classDef front fill:#696,stroke:#333;
  classDef back fill:#969,stroke:#333;
  class Frontend front
  class Backend back
```

![Two blocks, Frontend in green and Backend in grey, with their class definitions above them.](/diagrams/block/styling.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.