Mermaid Block Diagrams

calendarDec 12, 2024 · 2 min read · mermaid block architecture diagram system-design diagrams  ·
Share on: linkedincopy

Block diagrams show system components as blocks with connections. Perfect for visualizing system architecture, data flow, and component relationships.

Use Case

Use block diagrams when you need to:

  • Show system architecture
  • Visualize component relationships
  • Document data flow
  • Design system components
  • Communicate system structure

Code (Basic)

 1```mermaid
 2block-beta
 3    columns 2
 4
 5    block:Left
 6      A[Component A]
 7      B["Component B"]
 8    end
 9
10    block:Right
11      C[Component C]
12      D[Component D]
13    end
14
15    A --> B
16    B --> C
17    C --> D
18```

Result:

Explanation

  • block-beta - Start block diagram (beta syntax)
  • columns N - Optional, defines column layout
  • block:ID / end - Define a vertical block region with an identifier
  • Inside a block you place regular nodes like A[Label]
  • --> - Connection between nodes (same as in flowcharts)

Examples

Example 1: System Layout with Columns and Space

 1```mermaid
 2block-beta
 3    columns 1
 4
 5    db(("DB"))
 6    blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
 7
 8    block:ID
 9      A
10      B["A wide one in the middle"]
11      C
12    end
13
14    space
15
16    D
17
18    ID --> D
19    C --> D
20
21    style B fill:#969,stroke:#333,stroke-width:4px
22```

Result:

Example 2: Simple System Architecture

 1```mermaid
 2block-beta
 3    columns 2
 4
 5    block:ClientSide
 6      Client[Web Client]
 7    end
 8
 9    block:ServerSide
10      API[API Gateway]
11      Auth[Auth Service]
12      DB[(Database)]
13    end
14
15    Client --> API
16    API --> Auth
17    API --> DB
18```

Result:

Block Elements & Styling

  • [Label] - Rectangle
  • (Label) - Rounded rectangle
  • ([Label]) - Stadium shape
  • [[Label]] - Double rectangle
  • [(Label)] - Cylinder (database)
  • block:ID - Logical group of vertically stacked nodes
  • space - Adds horizontal space between blocks
  • style ID ... - Apply CSS-like style to a node or block

Notes

  • Use block-beta for modern block diagrams
  • Combine columns, block:ID, space, and arrows to control layout
  • Connections use --> for directed edges
  • Layout is still mostly automatic; you influence it via columns and blocks

Gotchas/Warnings

  • ⚠️ Indentation: Block contents must be consistently indented under block:ID
  • ⚠️ IDs: block:ID defines an identifier you can later connect from/to
  • ⚠️ HTML: If you use &nbsp; inside labels, be sure your renderer passes it through correctly
  • ⚠️ Beta: block-beta is still evolving; check Mermaid docs if syntax changes

Related Snippets