Block Diagram
Free Online Block Diagram Maker
A block diagram shows the main parts of a system as blocks and the connections between them as lines or arrows. Mermaid lays the blocks on a grid you control, so it suits system overviews where the position of each part matters.
Set the number of columns, write the blocks row by row, and connect them with arrows. You decide where each block sits.
Last updated: · Mermaid v11
Try it live
When to use block diagram
System overviews
Show clients, services and data stores in the rows you want them in, so the picture matches how the team talks about the system.
Hardware and signal chains
Lay out components and the signals between them in a fixed grid, the traditional use of a block diagram in electronics and control systems.
Layered architecture
Put each layer on its own row, presentation, services, data, and draw only the connections that cross layers.
Key syntax
A newer Mermaid diagram type. Mermaid 11.10 and later also accept plain block, but block-beta works in every Mermaid version that has this diagram, including the older ones some sites and apps still run.
block-betaDeclare the diagram (Mermaid 11.10+ also accepts block)columns 3Grid widthA["Label"]A block; blocks fill the grid left to rightspace:2Leave empty cellsA["Label"]:2A block spanning two columnsDB[("Postgres")]Cylinder shapeA --> BArrow between blocksHow to create a block diagram with Mermaid
Open the FlowViz editor and type block-beta on the first line.
Set the grid width: columns 3.
Write the blocks row by row, using space for empty cells.
Pick shapes with brackets, for example [("...")] for a database.
Connect blocks with arrows after the layout: A --> B.
Export as SVG or PNG, or copy a share link.
Frequently asked questions
How is a block diagram different from a flowchart?
In a flowchart the layout engine decides where every box goes. In a block diagram you place blocks on a grid yourself, row by row, which suits system overviews where position carries meaning.
How do I leave a gap in the grid?
Write space for one empty cell, or space:3 for three. Blocks fill the grid left to right, wrapping after the number of columns you set.
Can a block span several columns?
Yes. Add :N after the block, as in API["API"]:2, to make it span N columns.
Is the FlowViz block diagram maker free?
Yes. It is free with no account, and you can export SVG or PNG or share the diagram as a link.
Start diagramming now
No signup. No install. Just open the editor and start writing.