Edges & Connectors

Step-by-step guide to routing algorithms, masked arrow badges, line styles, arrowheads, and multi-lane collision avoidance.

Edges define how services, gateways, and databases communicate. @filekit-studio/diagram provides 3 analytical routing engines, automatic obstacle bypass, and interactive masked badge labels.

1. Orthogonal Elbow S-Curves (`routing: "elbow"`)

elbow is the default routing engine for software architecture. It routes connectors through rectangular clearance corridors with clean 90° turns and rounded corners, preventing lines from cutting diagonally through intermediate shapes.

elbow-routing.ts

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

export const elbowDiagram: DiagramData = {
  title: "Orthogonal S-Curve Routing",
  direction: "LR",
  nodes: [
    { id: "api", label: "Core API Service", shape: "rounded", color: "indigo" },
    { id: "worker_a", label: "Worker Node A\n(High Priority)", shape: "rounded", color: "emerald" },
    { id: "worker_b", label: "Worker Node B\n(Background Sync)", shape: "rounded", color: "purple" }
  ],
  edges: [
    { from: "api", to: "worker_a", label: "gRPC Channel", routing: "elbow", color: "#10b981" },
    { from: "api", to: "worker_b", label: "Async Dispatch", routing: "elbow", color: "#8b5cf6" }
  ],
  layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 220, nodeSpacing: 80 }
};

Orthogonal S-Curves Live Preview

Loading diagram canvas...

2. Curved Quadratic Bézier Arcs (`routing: "curved"`)

curved uses quadratic Bézier arcs that deflect smoothly around obstacles. It gives diagrams a modern, fluid aesthetic and is especially effective for feedback cycles, retries, and high-level conceptual maps.

curved-routing.ts

export const curvedDiagram: DiagramData = {
  title: "Curved Bézier Flow",
  direction: "LR",
  nodes: [
    { id: "client", label: "Mobile Client App", shape: "rounded", color: "sky" },
    { id: "queue", label: "Kafka Event Broker", shape: "cylinder", color: "amber", badge: "BROKER" },
    { id: "consumer", label: "Push Notification Worker", shape: "rounded", color: "rose" }
  ],
  edges: [
    { from: "client", to: "queue", label: "Publish Event", routing: "curved", color: "#f59e0b" },
    { from: "queue", to: "consumer", label: "Consume Stream", routing: "curved", color: "#f43f5e" },
    { from: "consumer", to: "client", label: "Client ACK Loop", routing: "curved", color: "#0ea5e9", style: "dashed" }
  ],
  layout: { direction: "LR", rankSpacing: 220, nodeSpacing: 80 }
};

Curved Bézier Arcs Live Preview

Loading diagram canvas...

3. Direct Straight Lines (`routing: "straight"`)

straight draws direct, shortest-path vectors between node anchor centers. It is ideal for peer-to-peer mesh networks, simple two-node handshakes, or class association diagrams.

straight-routing.ts

export const straightDiagram: DiagramData = {
  title: "Peer-to-Peer Mesh Network",
  direction: "LR",
  nodes: [
    { id: "node1", label: "Primary Raft Leader", shape: "rounded", color: "indigo" },
    { id: "node2", label: "Follower Replica 1", shape: "rounded", color: "emerald" },
    { id: "node3", label: "Follower Replica 2", shape: "rounded", color: "purple" }
  ],
  edges: [
    { from: "node1", to: "node2", label: "Heartbeat A", routing: "straight", color: "#10b981" },
    { from: "node1", to: "node3", label: "Heartbeat B", routing: "straight", color: "#8b5cf6" },
    { from: "node2", to: "node3", label: "Peer Sync", routing: "straight", color: "#6366f1", style: "dotted" }
  ],
  layout: { direction: "LR", rankSpacing: 220, nodeSpacing: 100 }
};

Straight Connectors Live Preview

Loading diagram canvas...

4. Interactive Masked Arrow Badges (`label`)

Edge labels in @filekit-studio/diagram are rendered inside native backdrop-masked pill badges:

Background Occlusion: The pill mask clears a clean zone over the underlying arrow line so the text remains 100% legible without line collisions.
Corridor Staggering: When multiple parallel edges travel down the same corridor, the layout engine automatically staggers badge positions so they never stack or obscure each other.
Light & Dark Theme Adaptive: Pill backgrounds and borders automatically adjust their color values to maintain contrast against any canvas background.

badge-demo.ts

export const badgeDiagram: DiagramData = {
  title: "Multi-Lane Staggered Arrow Badges",
  direction: "LR",
  nodes: [
    { id: "gateway", label: "API Gateway", shape: "diamond", color: "indigo" },
    { id: "service_a", label: "User Service", shape: "rounded", color: "emerald" },
    { id: "service_b", label: "Payment Service", shape: "rounded", color: "purple" }
  ],
  edges: [
    { from: "gateway", to: "service_a", label: "GET /users (Auth Token)", color: "#10b981" },
    { from: "gateway", to: "service_b", label: "POST /checkout (Idempotency Key)", color: "#8b5cf6" }
  ],
  layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 260, nodeSpacing: 90 }
};

Staggered Arrow Badges Live Preview

Loading diagram canvas...

5. Directional Arrowheads (`arrowStart` & `arrowEnd`)

Control the direction of arrows using arrowStart and arrowEnd:

Unidirectional (Default): arrowEnd: true, arrowStart: false → Standard forward request.
Bidirectional: arrowEnd: true, arrowStart: true → Full-duplex WebSocket, mutual TLS, or sync replication (<--->).
Undirected / Bus: arrowEnd: false, arrowStart: false → Network bus, optical link, or passive association line (---).

bidirectional.ts

export const arrowheadsDiagram: DiagramData = {
  title: "Directional & Bidirectional Connectors",
  direction: "LR",
  nodes: [
    { id: "client_ws", label: "Trading Client", shape: "rounded", color: "sky" },
    { id: "engine_ws", label: "Matching Engine", shape: "rounded", color: "emerald" },
    { id: "logger", label: "Audit Log Collector", shape: "cylinder", color: "amber" }
  ],
  edges: [
    { from: "client_ws", to: "engine_ws", label: "Full-Duplex WebSocket", arrowStart: true, arrowEnd: true, color: "#10b981" },
    { from: "engine_ws", to: "logger", label: "One-Way Stream", arrowStart: false, arrowEnd: true, color: "#f59e0b" }
  ],
  layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 240 }
};

Directional Arrowheads Live Preview

Loading diagram canvas...

6. Stroke Styles & Line Thickness (`style` & `strokeWidth`)

Property	Values	Description
`style`	`"solid"`	Primary synchronous request flow (default).
`style`	`"dashed"`	Asynchronous message queues, background workers, or event-driven webhooks.
`style`	`"dotted"`	Telemetry streams, healthchecks, and optional fallbacks.
`strokeWidth`	`number`	Line thickness in pixels (default: `2`).

1. Orthogonal Elbow S-Curves (routing: "elbow")Copy Anchor Link

2. Curved Quadratic Bézier Arcs (routing: "curved")Copy Anchor Link

3. Direct Straight Lines (routing: "straight")Copy Anchor Link

4. Interactive Masked Arrow Badges (label)Copy Anchor Link

5. Directional Arrowheads (arrowStart & arrowEnd)Copy Anchor Link

6. Stroke Styles & Line Thickness (style & strokeWidth)Copy Anchor Link

On this page

1. Orthogonal Elbow S-Curves (`routing: "elbow"`)

2. Curved Quadratic Bézier Arcs (`routing: "curved"`)

3. Direct Straight Lines (`routing: "straight"`)

4. Interactive Masked Arrow Badges (`label`)

5. Directional Arrowheads (`arrowStart` & `arrowEnd`)

6. Stroke Styles & Line Thickness (`style` & `strokeWidth`)