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;