Spacing & Density

Fine-tuning layout density, rank distance, corridor clearance, and container margins.

@filekit-studio/diagram provides granular controls to adjust graph density. You can customize spacing globally inside layout or pass individual overrides to the <Diagram /> component.

1. Compact / High-Density Mode

For complex dashboards, microservice maps with dozens of nodes, or tight documentation cards, use compact spacing:

nodeSpacing: 50 (smaller perpendicular gaps between sibling nodes).
rankSpacing: 160 (shorter distances between sequential columns).

compact-layout.ts

import type { DiagramData } from "@filekit-studio/diagram";

export const compactDiagram: DiagramData = {
  title: "High-Density Compact Grid",
  direction: "LR",
  nodes: [
    { id: "api", label: "API Gateway", shape: "rounded", color: "indigo" },
    { id: "svc_a", label: "User Pod", shape: "rounded", color: "purple" },
    { id: "svc_b", label: "Billing Pod", shape: "rounded", color: "emerald" },
    { id: "svc_c", label: "Mail Pod", shape: "rounded", color: "amber" }
  ],
  edges: [
    { from: "api", to: "svc_a", label: "Route A" },
    { from: "api", to: "svc_b", label: "Route B" },
    { from: "api", to: "svc_c", label: "Route C" }
  ],
  layout: { direction: "LR", edgeRouting: "elbow", nodeSpacing: 50, rankSpacing: 160 }
};

Compact High-Density Live Preview

Loading diagram canvas...

2. Spacious Production Pipeline Mode

For system architecture diagrams presented in blog posts or executive reports, spacious layouts give the eye room to breathe and provide long clearance corridors for readable edge labels:

nodeSpacing: 100
rankSpacing: 260

spacious-layout.ts

export const spaciousDiagram: DiagramData = {
  title: "Spacious Multi-Tier Pipeline",
  direction: "LR",
  nodes: [
    { id: "edge_lb", label: "Global Anycast Edge\n(Cloudflare)", shape: "diamond", color: "sky", badge: "CDN" },
    { id: "core_cluster", label: "Core Processing Engine\n(State Machine Cluster)", shape: "rounded", color: "purple", badge: "CORE" },
    { id: "db_primary", label: "Aurora Multi-AZ Database\n(Synchronous ACID Store)", shape: "cylinder", color: "emerald", badge: "DATA" }
  ],
  edges: [
    { from: "edge_lb", to: "core_cluster", label: "gRPC Streaming Channel", color: "#6366f1" },
    { from: "core_cluster", to: "db_primary", label: "ACID Commit Transaction", color: "#10b981" }
  ],
  layout: { direction: "LR", edgeRouting: "elbow", nodeSpacing: 100, rankSpacing: 260 }
};

Spacious Pipeline Live Preview

Loading diagram canvas...

3. Spacing Parameters Reference

JSON

{
  "layout": {
    "direction": "LR",
    "nodeSpacing": 95,
    "rankSpacing": 220,
    "clusterSpacing": 200,
    "groupPadding": 56,
    "intraRankSpacing": 120,
    "defaultNodeWidth": 210,
    "defaultNodeHeight": 90,
    "padding": 90
  }
}

Parameter	Type	Default	Description
`nodeSpacing`	`number`	`95`	Gap between parallel sibling nodes on the same rank (perpendicular to direction).
`rankSpacing`	`number`	`220`	Distance between sequential layers / columns (parallel to direction).
`clusterSpacing`	`number`	`220`	Clearance gap between compound group frames so clusters never collide.
`groupPadding`	`number`	`56`	Internal padding inside group container frames around member nodes.
`intraRankSpacing`	`number`	`120`	Distance between ranks located inside compound group frames.
`defaultNodeWidth`	`number`	`210`	Baseline width assigned to nodes if not explicitly declared on the node.
`defaultNodeHeight`	`number`	`90`	Baseline height assigned to nodes if not explicitly declared on the node.
`padding`	`number`	`90`	Outer margin around the entire diagram graph.

1. Compact / High-Density ModeCopy Anchor Link

2. Spacious Production Pipeline ModeCopy Anchor Link

3. Spacing Parameters ReferenceCopy Anchor Link

On this page

1. Compact / High-Density Mode

2. Spacious Production Pipeline Mode

3. Spacing Parameters Reference