Block Diagrams

Block diagrams provide a structured way to visualize system components and their relationships using a column-based layout. They are ideal for system architecture overviews, component diagrams, and high-level technical documentation.

Basic Example

block-beta
    columns 3
    a["Frontend"] b["API"] c["Database"]
    a --> b --> c

What You Get

Mermaid Studio provides comprehensive support for block diagrams:

• Syntax highlighting for blocks, columns, and connections
• Code completion for block types and connection syntax
• Rename refactoring to safely rename block identifiers across your diagram
• Find usages to locate all references to a block
• Code folding to collapse complex sections
• Formatting to automatically clean up diagram structure
• Inspections for detecting common issues
• Navigation bar for quick access to diagram elements

Quick Syntax Reference

block-beta
    columns 2

    %% Define blocks with labels
    block1["Service A"]
    block2["Service B"]

    %% Create connections
    block1 --> block2

    %% Span multiple columns
    block3["Wide Block"]:2

Key elements:

• columns N - Set the number of columns in the layout
• id["Label"] - Define a block with an ID and display label
• id:N - Make a block span N columns
• --> - Create directional connections between blocks

For complete syntax details, see the Mermaid Block Diagram documentation.