Mermaid 块图速查表

块与箭头

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

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

两个块 A 和 B，由一根标着 checks 的箭头连着，中间留了两个空格的间距。

列

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

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

箭头块

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

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

一根从 Frontend 指向 Backend 的宽箭头，它下方一根向下的箭头，还有一根指向左的箭头把 Disk 连到一个数据库形状。

样式块

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

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 是灰色，它们的类定义写在上面。

Mermaid 块图速查表

块与箭头

列

箭头块

样式块

在 Mernyx 里画出来