Layout Patterns

Master common diagram layouts with positioning formulas and reusable patterns for timelines, grids, flowcharts, and more.

Coordinate System

Understanding the coordinate system is essential for positioning elements:

Pattern: Card Layout

📦 Card with Title and Description

A rectangle container with centered title and secondary text. Great for process steps, feature boxes, or info cards.

// Card at position (100, 100), size 240×140
{
  "elements": [
    {
      "type": "rectangle",
      "id": "card-bg",
      "x": 100, "y": 100, "w": 240, "h": 140,
      "borderRadius": 12,
      "options": { "fill": "#dbeafe", "stroke": "#3b82f6", "fillStyle": "solid" }
    },
    {
      "type": "text",
      "id": "card-title",
      "x": 100, "y": 140, "w": 240, "h": 30,
      "text": "Card Title",
      "fontSize": 18, "fontWeight": "bold", "align": "center",
      "options": { "stroke": "#1e40af" }
    },
    {
      "type": "text",
      "id": "card-desc",
      "x": 110, "y": 175, "w": 220, "h": 50,
      "text": "Description text goes here",
      "fontSize": 13, "align": "center",
      "options": { "stroke": "#64748b" }
    }
  ]
}

Pattern: Horizontal Flow

➡️ Process Steps (Left to Right)

Sequential boxes connected with arrows. Common for workflows and process diagrams.

Formula for Evenly Spaced Items

Variable Formula
Item X position startX + (index × (itemWidth + gap))
Arrow X start itemX + itemWidth
Arrow width gap 
// 3 boxes with arrows: startX=50, itemWidth=120, gap=80
{
  "elements": [
    // Box 1 at x=50
    { "type": "rectangle", "id": "box-1", "x": 50, "y": 100, "w": 120, "h": 60 },
    { "type": "text", "id": "t1", "x": 50, "y": 120, "w": 120, "h": 20, "text": "Step 1", "align": "center" },
    
    // Arrow 1: x=170 (50+120), w=80
    { "type": "arrow", "id": "arr-1", "x": 170, "y": 130, "w": 80, "h": 1 },
    
    // Box 2 at x=250 (50+120+80)
    { "type": "rectangle", "id": "box-2", "x": 250, "y": 100, "w": 120, "h": 60 },
    { "type": "text", "id": "t2", "x": 250, "y": 120, "w": 120, "h": 20, "text": "Step 2", "align": "center" },
    
    // Arrow 2: x=370, w=80
    { "type": "arrow", "id": "arr-2", "x": 370, "y": 130, "w": 80, "h": 1 },
    
    // Box 3 at x=450
    { "type": "rectangle", "id": "box-3", "x": 450, "y": 100, "w": 120, "h": 60 },
    { "type": "text", "id": "t3", "x": 450, "y": 120, "w": 120, "h": 20, "text": "Step 3", "align": "center" }
  ]
}

Pattern: Vertical Timeline

📅 Timeline with Spine and Nodes

Vertical line with circle markers and content cards alternating left/right.

Timeline Structure

// Vertical timeline spine centered at x=200
{
  "elements": [
    // Spine
    { "type": "rectangle", "id": "spine", "x": 195, "y": 50, "w": 10, "h": 500,
      "options": { "fill": "#e2e8f0", "stroke": "#94a3b8" } },
    
    // Node 1 at y=100
    { "type": "ellipse", "id": "node-1", "x": 180, "y": 85, "w": 40, "h": 40,
      "options": { "fill": "#dbeafe", "stroke": "#3b82f6" } },
    
    // Card 1 to the right (x=250)
    { "type": "rectangle", "id": "card-1", "x": 250, "y": 75, "w": 200, "h": 70,
      "borderRadius": 8, "options": { "fill": "#f8fafc", "stroke": "#e2e8f0" } },
    
    // Node 2 at y=200
    { "type": "ellipse", "id": "node-2", "x": 180, "y": 185, "w": 40, "h": 40,
      "options": { "fill": "#dcfce7", "stroke": "#22c55e" } }
  ]
}

Pattern: Grid Layout

⊞ 2×2 or 3×3 Grid of Cards

Evenly spaced cards in rows and columns. Great for feature lists, comparisons, or dashboards.

Grid Position Formula

Variable Formula
Row Math.floor(index / columns)
Column index % columns
X position startX + (column × (itemWidth + gapX))
Y position startY + (row × (itemHeight + gapY))
LLM Tip

When generating grids, iterate through items and calculate positions using the formulas above. This produces clean, evenly-spaced layouts.

Spacing Guidelines

Element Type Recommended Spacing
Cards in a row 24-48px gap
Rows in a grid 24-48px gap
Arrow between boxes 40-80px
Text padding inside card 10-20px from edges
Timeline node spacing 100-150px vertical