Block Diagram

Core Diagram Type

Full IDE intelligence (completions, inspections, formatting, refactoring) is available with a Core or Studio license. Compare editions →

Mermaid Studio provides full language support for Block diagrams inside IntelliJ-based IDEs, turning them into a first-class option for system architecture overviews, component diagrams, and high-level technical documentation. Block diagrams use a column-based layout to visualize system components and their relationships.

Syntax Highlighting

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.

Armada Dark

Islands Dark

Islands Light

IDE Support

Mermaid Studio provides comprehensive support for block diagrams:

• Syntax highlighting for blocks, columns, connections, and CSS properties
• Code completion for block types, arrow operators, CSS properties and values, class names, node references, and column keywords
• Rename refactoring to safely rename block identifiers, CSS class names, and node references across your entire diagram
• Find usages to locate all references to a block or CSS class
• Go-to-definition to navigate from class and style references to their definitions
• Code folding to collapse composite blocks
• Formatting with configurable code style settings for indentation, spacing, and wrapping
• Inspections for duplicate nodes, duplicate class definitions, unresolved class references, unused classes, and invalid composite block shapes
• Annotations for undeclared nodes, zero-width blocks, invalid arrow syntax, empty composite blocks, unclosed blocks, and more
• Brace matching for all shape delimiters and composite block boundaries
• Code Vision showing usage counts for CSS class definitions
• Color provider with gutter color swatches and a color picker for hex colors in classDef and style statements
• Navigation bar for quick access to diagram elements
• Structure view for a hierarchical overview of the diagram
• Quick fixes for splitting edge chains, quoting edge labels, and converting Markdown strings
• Auto-indent inside composite blocks - pressing Enter after a block header automatically inserts proper indentation and a closing end

Quick Syntax Reference

Layout

block
  columns 3

  A["API"]
  B["Web"]
  C["DB"]

  %% Span multiple columns
  D["Wide Block"]:2
  space

• columns N - Set the number of columns (or columns auto)
• id:N - Make a block span N columns
• space or space:N - Insert empty cells for spacing

Node Shapes

Syntax	Shape
id["Label"]	Rectangle
id("Label")	Rounded rectangle
id(("Label"))	Circle
id((("Label")))	Double circle
id{"Label"}	Diamond
id{{"Label"}}	Hexagon
id(["Label"])	Stadium/pill
id[["Label"]]	Subroutine
id[("Label")]	Cylinder
id[/"Label"/]	Lean right
id[\"Label"\]	Lean left
id[/"Label"\]	Trapezoid
id[\"Label"/]	Inverted trapezoid
id>"Label"]	Arrow rectangle
id<["Label"]>(right, down)	Block arrow

Connections

Syntax	Description
-->	Arrow
---	Line (no arrowhead)
--"label"-->	Arrow with label
<-->	Bidirectional arrow
-.->	Dotted arrow
--o	Circle endpoint
--x	Cross endpoint
--->	Long arrow

Composite Blocks

Composite blocks group nested blocks together with their own layout:

block
  columns 3

  block:clients:3
      columns 2
      web["Web App"]
      mobile["Mobile App"]
  end

  gateway["API Gateway"]:3

  block:services:3
      columns 3
      auth["Auth"]
      orders["Orders"]
      billing["Billing"]
  end

  block:data:3
      columns 3
      cache[("Cache")]
      db[("Database")]
      queue[["Queue"]]
  end

  web --> gateway
  mobile --> gateway
  gateway --> auth
  gateway --> orders
  gateway --> billing
  auth --> cache
  orders --> db
  billing --> queue

Styling

block
  columns 2

  A["Primary"]
  B["Secondary"]

  %% Define CSS classes
  classDef primary fill:#4CAF50,color:#fff,stroke:#388E3C
  classDef secondary fill:#2196F3,color:#fff

  %% Apply classes
  class A primary
  class B secondary

  %% Inline style
  style A stroke-width:2px

• classDef name properties - Define a reusable CSS class
• classDef default properties - Set default styling for all blocks
• class id1,id2 className - Apply a class to one or more blocks
• style id properties - Apply inline CSS to a specific block

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