# Mermaid 块图速查表

一堵块，从左往右读。

## 块与箭头

块是带引号的标签。两个块之间的字是连接它们的那根箭头的标签。

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

![两个块 A 和 B，由一根标着 checks 的箭头连着，中间留了两个空格的间距。](/diagrams/block/basic.svg)

## 列

columns 关键字决定一行放得下几个块。

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

![三个块 A、B 和 C，排成一行。](/diagrams/block/columns.svg)

## 箭头块

箭头也是块。名字里带着方向，尖括号里装着它的标签。

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

![一根从 Frontend 指向 Backend 的宽箭头，它下方一根向下的箭头，还有一根指向左的箭头把 Disk 连到一个数据库形状。](/diagrams/block/arrows.svg)

## 样式块

classDef 给样式起名，class 把它套到你点名的那些块上。

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

![两个块，Frontend 是绿色、Backend 是灰色，它们的类定义写在上面。](/diagrams/block/styling.svg)

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。