How to Draw Block Diagrams in Mermaid

2026-03-05 · MermZen Tutorial

Block diagrams visualize complex system component structures, hierarchical relationships, and connections. They are ideal for system architecture design, network topology, and industrial flow diagrams. Mermaid uses blockBeta keyword for block diagrams.

Declaring a Chart

Use blockBeta keyword:

blockBeta
    title Block Diagram Title

在 MermZen 中试试 →

Basic Block Definition

Create simple blocks and connections:

blockBeta
    title Basic Block Diagram
    block "Block A"
    block "Block B"
    block "Block C"

    "Block A" --> "Block B"
    "Block A" --> "Block C"
    "Block B" --> "Block C"

在 MermZen 中试试 →

Nested Block Structures

Create complex nested structures with sub-blocks:

blockBeta
    title Nested Block Diagram
    block "System" {
        block "Subsystem 1" {
            block "Component A"
            block "Component B"
        }
        block "Subsystem 2" {
            block "Component C"
            block "Component D"
        }
    }

    "Component A" --> "Component C"
    "Component B" --> "Component D"
    "Subsystem 1" --> "Subsystem 2"

在 MermZen 中试试 →

Full Example: Network Topology

blockBeta
    title Company Network Topology
    block "Headquarters Network" {
        block "Core Switch"
        block "Server Cluster" {
            block "Web Server"
            block "Database Server"
            block "Application Server"
        }
        block "Office Network" {
            block "Employee Computers"
            block "Printers"
        }
    }
    block "Branch Office" {
        block "Branch Switch"
        block "Local Server"
        block "Employee Devices"
    }
    block "Internet"

    "Core Switch" --> "Web Server"
    "Core Switch" --> "Database Server"
    "Core Switch" --> "Application Server"
    "Core Switch" --> "Employee Computers"
    "Core Switch" --> "Printers"
    "Core Switch" --> "Internet"
    "Branch Switch" --> "Local Server"
    "Branch Switch" --> "Employee Devices"
    "Branch Switch" --> "Internet"

在 MermZen 中试试 →

Quick Reference

Syntax	Function
`blockBeta`	Declare block diagram
`title Title`	Set chart title
`block "Name"`	Define block
`block "Name" { ... }`	Define block with sub-blocks
`"Block1" --> "Block2"`	Define connection between blocks
`%% comment`	Line comment

Next Step

After mastering block diagrams, continue learning Mermaid Requirement Diagrams for project requirements management and analysis.

To try the above code in MermZen, click Open Editor and paste the code there.