Flow Direction
Step-by-step guide to horizontal (LR, RL) and vertical (TB, BT) hierarchy layouts with live previews.
@filekit-studio/diagram supports all four cardinal layout directions. You can set the flow orientation via the top-level direction property or within layout.direction:
{
"direction": "LR" | "TB" | "RL" | "BT"
}1. Left-to-Right (LR)
LR is the most common layout direction for cloud system designs, CI/CD deployment pipelines, data processing pipelines, and request-response streams.
Services progress from left to right across vertical ranks:
import type { DiagramData } from "@filekit-studio/diagram";
export const lrPipeline: DiagramData = {
title: "Continuous Delivery Pipeline (LR)",
direction: "LR",
nodes: [
{ id: "git", label: "1. GitHub Push\n(main branch)", shape: "rounded", color: "indigo", badge: "GIT" },
{ id: "ci", label: "2. Build & Test\n(GitHub Actions)", shape: "rounded", color: "amber", badge: "CI" },
{ id: "docker", label: "3. Docker Image\n(Artifact Registry)", shape: "cylinder", color: "purple", badge: "REGISTRY" },
{ id: "k8s", label: "4. K8s Production\n(Rolling Pods)", shape: "rounded", color: "emerald", badge: "PROD" }
],
edges: [
{ from: "git", to: "ci", label: "Trigger Action" },
{ from: "ci", to: "docker", label: "Push Image" },
{ from: "docker", to: "k8s", label: "Rolling Deploy" }
],
layout: { direction: "LR", edgeRouting: "elbow", rankSpacing: 180, nodeSpacing: 60 }
};2. Top-to-Bottom (TB)
TB arranges nodes vertically from top to bottom. It is the ideal layout for organizational hierarchies, decision trees, class inheritance graphs, and waterfall logic trees:
export const tbTree: DiagramData = {
title: "API Routing Hierarchy (TB)",
direction: "TB",
nodes: [
{ id: "root_gw", label: "Root API Gateway\n(api.domain.com)", shape: "diamond", color: "indigo", badge: "ROUTER" },
{ id: "users_svc", label: "User Management\n(/v1/users)", shape: "rounded", color: "purple" },
{ id: "orders_svc", label: "Order Processor\n(/v1/orders)", shape: "rounded", color: "emerald" },
{ id: "billing_svc", label: "Stripe Billing\n(/v1/billing)", shape: "rounded", color: "amber" }
],
edges: [
{ from: "root_gw", to: "users_svc", label: "Route /users" },
{ from: "root_gw", to: "orders_svc", label: "Route /orders" },
{ from: "root_gw", to: "billing_svc", label: "Route /billing" }
],
layout: { direction: "TB", edgeRouting: "elbow", rankSpacing: 140, nodeSpacing: 80 }
};3. Right-to-Left (RL)
RL inverts the horizontal flow, moving from right to left. It is commonly used for telemetry log ingestion, backup drains, and return synchronization pipelines:
export const rlIngestion: DiagramData = {
title: "Telemetry Ingestion & Sink (RL)",
direction: "RL",
nodes: [
{ id: "edge_devices", label: "IoT Edge Sensors\n(Publishers)", shape: "rounded", color: "sky", badge: "INGRESS" },
{ id: "aggregator", label: "MQTT Aggregator", shape: "rounded", color: "purple" },
{ id: "data_lake", label: "Parquet S3 Lake\n(Cold Storage)", shape: "cylinder", color: "emerald", badge: "STORAGE" }
],
edges: [
{ from: "edge_devices", to: "aggregator", label: "Publish MQTT" },
{ from: "aggregator", to: "data_lake", label: "Batch Flush" }
],
layout: { direction: "RL", edgeRouting: "elbow", rankSpacing: 220 }
};4. Bottom-to-Top (BT)
BT organizes components upwards from physical infrastructure to application layers. It is ideal for software architecture stacks and OSI model layers:
export const btStack: DiagramData = {
title: "Cloud Infrastructure Abstraction Stack (BT)",
direction: "BT",
nodes: [
{ id: "hardware", label: "Bare Metal Hardware\n(AWS Nitro / EPYC)", shape: "rectangle", color: "neutral", badge: "L0" },
{ id: "hypervisor", label: "KVM Hypervisor & Linux Kernel", shape: "rounded", color: "indigo", badge: "L1" },
{ id: "container_runtime", label: "Containerd Runtime & Kubernetes", shape: "rounded", color: "purple", badge: "L2" },
{ id: "web_app", label: "Next.js SaaS Application", shape: "rounded", color: "emerald", badge: "L3" }
],
edges: [
{ from: "hardware", to: "hypervisor", label: "Virtualize" },
{ from: "hypervisor", to: "container_runtime", label: "Cgroups & Namespaces" },
{ from: "container_runtime", to: "web_app", label: "Host Workload" }
],
layout: { direction: "BT", edgeRouting: "elbow", rankSpacing: 130 }
};