Block diagrams provide an intuitive way to represent complex systems, processes, or architectures visually. They are composed of blocks and connectors, where blocks represent fundamental components and connectors show relationships between them.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Block diagrams give you full control over where shapes are positioned, unlike flowcharts where automatic layout can move shapes unexpectedly.Basic syntax
Simple blocks
Create a basic block diagram with three blocks:Columns
Organize blocks into columns: This creates a 3-column layout where ‘d’ wraps to the second row.Advanced configuration
Block width
Span blocks across multiple columns: Blocks ‘b’ and ‘c’ each span 2 columns.Composite blocks
Create nested blocks:Complex layouts
Combine column widths and composite blocks:Vertical stacking
Stack blocks vertically using a single column:Block shapes
Round edged
Stadium shaped
Subroutine
Cylindrical (database)
Circle
Asymmetric
Rhombus
Hexagon
Parallelogram and trapezoid
Double circle
Block arrows and spaces
Block arrows
Indicate directional flow:Space blocks
Create intentional empty spaces: Or specify width:Connecting blocks
Basic links
Text on links
Complete example
Styling
Individual block styling
Class styling
Define reusable styles:Practical examples
System architecture
Business process flow
Tips and best practices
Ensure links between blocks use correct arrow syntax (
--> or ---) and remember to add space blocks between connected blocks for proper positioning.When applying styles, separate properties with commas and use proper CSS property format:
style A fill:#969,stroke:#333;