# Mermaid Blockdiagramm-Spickzettel

Eine Wand aus Blöcken, von links nach rechts gelesen.

## Blöcke und Pfeile

Ein Block ist eine Beschriftung in Anführungszeichen. Die Wörter zwischen zwei Blöcken beschriften den Pfeil, der sie verbindet.

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

![Zwei Blöcke, A und B, verbunden durch einen Pfeil mit der Beschriftung „checks“, mit zwei Leerzeichen Abstand dazwischen.](/diagrams/block/basic.svg)

## Spalten

Das Schlüsselwort columns legt fest, wie viele Blöcke in eine Zeile passen.

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

![Drei Blöcke, A, B und C, in einer einzigen Zeile angeordnet.](/diagrams/block/columns.svg)

## Pfeilblöcke

Ein Pfeil ist auch ein Block. Sein Name trägt die Richtung, und die spitzen Klammern enthalten seine Beschriftung.

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

![Ein breiter Pfeil von „Frontend“ zu „Backend“, darunter ein nach unten zeigender Pfeil und ein nach links zeigender Pfeil, der „Disk“ mit einer Datenbankform verbindet.](/diagrams/block/arrows.svg)

## Stilblöcke

classDef benennt einen Stil, und class wendet ihn auf die benannten Blöcke an.

```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
```

![Zwei Blöcke, „Frontend“ in Grün und „Backend“ in Grau, mit ihren Klassendefinitionen darüber.](/diagrams/block/styling.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.