Mermaid Block Diagram

mermaidCopy

block
    columns 3
    Client["Browser"]:3
    space:3
    Web["Web server"] API["API"] Worker["Worker"]
    space:3
    DB[("PostgreSQL")]:2 Cache["Redis"]
    Client --> API
    API --> DB
    Worker --> DB
    API --> Cache

Open in the live editor

Block diagrams give you control over layout. Instead of letting Mermaid position everything automatically, you define a grid with a number of columns and place blocks in it — useful when the spatial arrangement carries meaning.

They work well for system overviews, hardware diagrams, network layers and any picture where you want boxes aligned in rows and columns.

When to use a block diagram

• High-level system overviews
• Layered architectures
• Hardware and network diagrams
• Dashboards and page layouts

Block Diagram syntax reference

Block Diagram examples

mermaidCopy

block
    columns 1
    UI["Presentation layer"]
    App["Application layer"]
    Domain["Domain layer"]
    Infra["Infrastructure layer"]

Open in the live editor

Tips and best practices

• Sketch the grid first — decide how many columns you need and which blocks should span.
• Use space blocks to create breathing room between rows.
• Prefer flowcharts when you want automatic layout and blocks when position matters.

Generate a block diagram with AI

Not sure where to start? Describe what you need and the AI block diagram generator writes the Mermaid code for you. Try prompts like:

• “Smart home system components”
• “Three-tier web application”
• “CPU and memory hierarchy”

Block Diagram templates