TryMermaid

Mermaid Block Diagram Maker

Write block diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Block diagram example

Rendering preview…

block-beta
    columns 3
    browser["Browser"] api["API"] db[("Database")]
    space:3
    cdn["CDN"] queue["Job queue"] cache[("Cache")]
    browser --> api
    api --> db
    api --> cache
Open this example in the editor Start a blank diagram

What is a block diagram?

A block diagram arranges labelled boxes on a grid and draws arrows between them. Unlike a flowchart, which lays itself out automatically, a block diagram lets you say how many columns there are and where the gaps go. In Mermaid you write one as text starting with the block-beta keyword.

When to use a block diagram

  • System and service architecture drawings
  • Hardware or network layouts
  • Layered diagrams where position means something
  • Slides where a flowchart lays itself out badly

How to make a block diagram in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with block-beta on the first line.

  2. Step 2

    Set the grid

    Set the grid width with a columns line, such as columns 3, then list blocks in the order they should fill the grid.

  3. Step 3

    Position and connect

    Use space or space:3 to leave gaps, and connect blocks with arrows such as browser --> api.

  4. Step 4

    Export or share

    Check the live preview, then export as PNG or SVG or copy a share link.

Block diagram syntax cheat sheet

ElementSyntaxWhat it does
Startblock-betaBegins a block diagram
Grid widthcolumns 3How many blocks per row
Blockapi["API"]A labelled box
Cylinderdb[("Database")]A datastore shape
Gapspace:3Leaves empty cells
Arrowbrowser --> apiConnects two blocks
Wide blockgateway["Gateway"]:3Spans several columns

Block diagram FAQ

What is the difference between a block diagram and a flowchart?

A flowchart lays itself out automatically and is about the order that steps happen in. A block diagram puts boxes on a grid you define with a columns line, which suits architecture drawings where position carries meaning.

How do I leave a gap in the grid?

Use a space line. space:3 leaves three empty cells, which is how you push the next row into the position you want.

Can blocks use different shapes?

Yes. The bracket shapes work as they do in flowcharts, so db[("Database")] draws a cylinder and a plain name draws a rectangle.

Other Mermaid diagram types