Mermaid template
Block Diagram
Blocks on a grid you control - system overviews where layout matters as much as links.
Source
Open in editorblock-beta
columns 3
Browser["Browser"]:3
space:3
space Api["API server"] space
space:3
Cache["Cache"] Db[("Database")] Queue["Queue"]
Browser --> Api
Api --> Cache
Api --> Db
Api --> Queue
A block diagram lets you decide where things sit. You choose the number of columns, then blocks fill the grid in order, with space to leave a gap and a span to stretch a block over several columns.
Use it for architecture overviews and layered stacks, where a flowchart's automatic layout would scatter the boxes.