Smart Routing & Obstacle Evasion
Analytical corridor seeking, automatic obstacle evasion, and submerged passthrough tunneling.
In complex distributed diagrams, connectors often need to span across several intermediate tiers. @filekit-studio/diagram includes an analytical router that prevents connector spaghetti, finds open vertical clearance channels, and activates X-ray passthrough tunneling when necessary.
1. Clearance Corridor Seeking
When connecting a node on Rank 1 to a target on Rank 3, cutting diagonally through Rank 2 creates an unreadable collision.
Instead, the corridor-seeking algorithm:
- Scans the open vertical gutters between adjacent columns.
- Routes the connector cleanly through the vacant channel.
- Arrives at the target node with zero overlap over intermediate services.
import type { DiagramData } from "@filekit-studio/diagram";
export const corridorDiagram: DiagramData = {
title: "Clearance Channel Corridor Routing",
direction: "LR",
nodes: [
{ id: "client", label: "Public Client Ingress", shape: "rounded", color: "indigo" },
{ id: "auth_guard", label: "Authentication Guard", shape: "rounded", color: "amber" },
{ id: "billing_engine", label: "Billing Engine", shape: "rounded", color: "rose" },
{ id: "analytics_lake", label: "Central Data Lake\n(Span Across)", shape: "cylinder", color: "emerald", badge: "DATA" }
],
edges: [
{ from: "client", to: "auth_guard", label: "Auth POST" },
{ from: "client", to: "billing_engine", label: "Billing POST" },
{ from: "client", to: "analytics_lake", label: "Telemetry Stream (Spans Open Channel)", color: "#10b981" }
],
layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 240, nodeSpacing: 80 }
};2. Submerged Passthrough Tunneling (X-Ray Effect)
In dense topologies where no open clearance corridor exists without making an extreme detour, the engine activates submerged tunneling:
- Outside Shapes: The arrow renders at 100% opacity with its configured color.
- Underneath Shapes: The traversed portion dims to 50% opacity with a dashed stroke pattern rendered underneath the shape's body.
- Exit: Returns to full 100% solid opacity immediately upon clearing the shape boundary.
export const tunnelingDiagram: DiagramData = {
title: "Submerged Passthrough Tunneling",
direction: "LR",
nodes: [
{ id: "sensor", label: "Edge IoT Sensor", shape: "rounded", color: "sky" },
{ id: "firewall", label: "Perimeter Firewall\n(Traversed Shape)", shape: "diamond", color: "amber", badge: "WALL" },
{ id: "collector", label: "Internal Metric Collector", shape: "cylinder", color: "emerald" }
],
edges: [
{ from: "sensor", to: "firewall", label: "Edge Connect" },
{ from: "sensor", to: "collector", label: "Raw Bypass Tunnel (X-Ray Occlusion)", routing: "straight", color: "#6366f1" }
],
layout: { direction: "LR", rankSpacing: 220 }
};3. Parallel Corridor Staggering
When multiple edges originate from different services and converge on the same target rank, the router calculates lane offsets to ensure connectors travel along parallel lanes without overlapping:
export const parallelDiagram: DiagramData = {
title: "Multi-Lane Parallel Routing",
direction: "LR",
nodes: [
{ id: "producer_1", label: "Producer Alpha", shape: "rounded", color: "indigo" },
{ id: "producer_2", label: "Producer Beta", shape: "rounded", color: "purple" },
{ id: "hub", label: "Central Message Hub", shape: "cylinder", color: "emerald", badge: "HUB" }
],
edges: [
{ from: "producer_1", to: "hub", label: "Partition 0 (Lane A)", color: "#6366f1" },
{ from: "producer_2", to: "hub", label: "Partition 1 (Lane B)", color: "#8b5cf6" }
],
layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 240, nodeSpacing: 80 }
};