A block diagram arranges content into a grid of rectangular blocks. Unlike a flowchart, which emphasises direction and logic, a block diagram emphasises structure and spatial grouping — which things sit alongside each other and how they are connected.

Block diagrams are useful for showing the layout of a website, the sections of a document, the structure of an organisation, or any system that is better understood as a spatial arrangement than as a sequence of steps.

block-beta
    columns 5
    Home["Home Page"]:5
    space:5
    Recipes["Recipes"] space:1
    Blog["Blog"] space:1
    About["About"]
    space:5
    Italian["Italian"] British["British"] Vegan["Vegan"]
    space:11 
    Reviews["Reviews"]

    Home --> Recipes
    Home --> Blog
    Home --> About
    Recipes --> Italian
    Recipes --> British
    Recipes --> Vegan
    Blog --> Reviews

The columns declaration sets the grid width. Blocks can span multiple columns using the :n suffix — Home["Home Page"]:5 makes the home page block span all five columns.

```mermaid
block-beta
    columns 5
    Home["Home Page"]:5
    space:5
    Recipes["Recipes"] space:1
    Blog["Blog"] space:1
    About["About"]
    space:5
    Italian["Italian"] British["British"] Vegan["Vegan"]
    space:11 
    Reviews["Reviews"]

    Home --> Recipes
    Home --> Blog
    Home --> About
    Recipes --> Italian
    Recipes --> British
    Recipes --> Vegan
    Blog --> Reviews
```

For more block diagram syntax see the block diagram documentation at mermaid.js.org