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.

This diagram type is experimental and requires Mermaid v11 or later.

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

    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"]:3 makes the home page block span all three columns.