Markdown block diagram maker

Lay out a grid of labelled blocks, group them and connect them with arrows. Set how many columns a level uses, give a block a wider span, and build a Mermaid block diagram to drop straight into your document.

Mermaid block diagram syntax

A block diagram is a grid of blocks. You start with block-beta, set the number of columns, then list the blocks. Mermaid fills the grid row by row. Here is each piece you can write.

Blocks in a grid

Set the column count with columns, then list blocks as id["Label"]. Blocks fill left to right and wrap to the next row.

You write

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

You get

Wide blocks and gaps

Add :N after a block to span N columns. Use space for an empty cell, or space:N to skip several.

You write

block-beta
  columns 3
  a["A"]
  space
  b["B"]
  c["Wide"]:3

You get

Groups

Wrap blocks in block:id … end to make a group. A group has its own columns count and can hold its own blocks.

You write

block-beta
  columns 2
  a["A"]
  block:team["Team"]
    columns 2
    b["B"]
    c["C"]
  end

You get

Shapes and arrows

Wrap the label in different brackets for a shape, and connect blocks with -->. Put a label on an arrow with -- "text" -->.

You write

block-beta
  columns 2
  a("Start")
  b{"Choice"}
  a -- "yes" --> b

You get

Cheat sheet

Write this	You get
`block-beta`	Start a block diagram
`columns 3`	Lay this level out in 3 columns
`id["Label"]`	A block with a label
`id["Label"]:2`	A block that spans 2 columns
`space` / `space:2`	An empty cell, or skip 2 cells
`block:id ... end`	A group holding its own blocks
`a --> b`	An arrow from a to b
`a -- "text" --> b`	An arrow with a label
`id("round")` `id{"rhombus"}`	Round or diamond shapes
`id(("circle"))` `id>"flag"]`	Circle or flag shapes