From 89dd9b1d05ab0558b12a8dce51895e3d6ddd3237 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 30 Apr 2026 23:25:00 -0400
Subject: [PATCH 1/2] feat: Add Elk layout component

---
 .changeset/silent-lines-hide.md               |   5 +
 docs/src/content/components/Elk.md            |  70 ++
 docs/src/examples/catalog/Chart.json          | 114 ++-
 docs/src/examples/catalog/Circle.json         |  44 +-
 docs/src/examples/catalog/Elk.json            | 802 ++++++++++++++++++
 docs/src/examples/catalog/Group.json          | 121 ++-
 docs/src/examples/catalog/Layer.json          | 114 ++-
 docs/src/examples/catalog/Line.json           |   9 +-
 docs/src/examples/catalog/Rect.json           | 100 ++-
 docs/src/examples/catalog/Spline.json         | 114 ++-
 docs/src/examples/catalog/Text.json           | 177 +++-
 .../components/Elk/architecture.svelte        | 144 ++++
 docs/src/examples/components/Elk/basic.svelte |  98 +++
 .../examples/components/Elk/cluster.svelte    | 108 +++
 docs/src/examples/components/Elk/erd.svelte   | 172 ++++
 .../examples/components/Elk/flowchart.svelte  | 150 ++++
 docs/src/examples/components/Elk/force.svelte |  94 ++
 .../examples/components/Elk/layered.svelte    | 111 +++
 .../src/examples/components/Elk/mrtree.svelte |  97 +++
 .../examples/components/Elk/oauth-flow.svelte | 167 ++++
 .../examples/components/Elk/playground.svelte | 119 +++
 .../src/examples/components/Elk/radial.svelte | 110 +++
 .../components/Elk/sequence-diagram.svelte    | 131 +++
 .../components/Elk/state-composite.svelte     | 156 ++++
 .../components/Elk/state-machine.svelte       | 138 +++
 .../src/examples/components/Elk/stress.svelte |  94 ++
 .../components/Elk/tcp-state-diagram.svelte   | 115 +++
 .../components/controls/ElkControls.svelte    | 145 ++++
 .../controls/ElkPlaygroundControls.svelte     |  42 +
 .../controls/ElkSettingsControls.svelte       |  20 +
 packages/layerchart/package.json              |   1 +
 .../src/lib/components/graph/Elk.svelte       | 272 ++++++
 .../src/lib/components/graph/index.ts         |   2 +
 .../layerchart/src/lib/utils/graph/elk.ts     | 463 ++++++++++
 pnpm-lock.yaml                                |   8 +
 35 files changed, 4619 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/silent-lines-hide.md
 create mode 100644 docs/src/content/components/Elk.md
 create mode 100644 docs/src/examples/catalog/Elk.json
 create mode 100644 docs/src/examples/components/Elk/architecture.svelte
 create mode 100644 docs/src/examples/components/Elk/basic.svelte
 create mode 100644 docs/src/examples/components/Elk/cluster.svelte
 create mode 100644 docs/src/examples/components/Elk/erd.svelte
 create mode 100644 docs/src/examples/components/Elk/flowchart.svelte
 create mode 100644 docs/src/examples/components/Elk/force.svelte
 create mode 100644 docs/src/examples/components/Elk/layered.svelte
 create mode 100644 docs/src/examples/components/Elk/mrtree.svelte
 create mode 100644 docs/src/examples/components/Elk/oauth-flow.svelte
 create mode 100644 docs/src/examples/components/Elk/playground.svelte
 create mode 100644 docs/src/examples/components/Elk/radial.svelte
 create mode 100644 docs/src/examples/components/Elk/sequence-diagram.svelte
 create mode 100644 docs/src/examples/components/Elk/state-composite.svelte
 create mode 100644 docs/src/examples/components/Elk/state-machine.svelte
 create mode 100644 docs/src/examples/components/Elk/stress.svelte
 create mode 100644 docs/src/examples/components/Elk/tcp-state-diagram.svelte
 create mode 100644 docs/src/lib/components/controls/ElkControls.svelte
 create mode 100644 docs/src/lib/components/controls/ElkPlaygroundControls.svelte
 create mode 100644 docs/src/lib/components/controls/ElkSettingsControls.svelte
 create mode 100644 packages/layerchart/src/lib/components/graph/Elk.svelte
 create mode 100644 packages/layerchart/src/lib/utils/graph/elk.ts

diff --git a/.changeset/silent-lines-hide.md b/.changeset/silent-lines-hide.md
new file mode 100644
index 000000000..0ff9a6518
--- /dev/null
+++ b/.changeset/silent-lines-hide.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Add Elk layout component
diff --git a/docs/src/content/components/Elk.md b/docs/src/content/components/Elk.md
new file mode 100644
index 000000000..a5ad0d7fe
--- /dev/null
+++ b/docs/src/content/components/Elk.md
@@ -0,0 +1,70 @@
+---
+description: Layout component which arranges directed graphs using the Eclipse Layout Kernel (elkjs), supporting layered, tree, force, stress, radial, and other algorithms with extensive routing and spacing options.
+category: layout
+layers: [svg, canvas]
+related: [Dagre]
+---
+
+## Usage
+
+:example{name="basic"}
+
+## Algorithms
+
+### Layered
+
+Sugiyama-style layered layout — the default and most flexible.
+
+:example{name="layered"}
+
+### Mr. Tree
+
+Compact tree layout for strictly hierarchical graphs.
+
+:example{name="mrtree"}
+
+### Force
+
+Force-directed layout for general undirected graphs.
+
+:example{name="force"}
+
+### Stress
+
+Stress-majorization layout that preserves graph-theoretic distances.
+
+:example{name="stress"}
+
+### Radial
+
+Radial tree layout that arranges nodes on concentric circles.
+
+:example{name="radial"}
+
+## Compound (hierarchical) graphs
+
+Nodes with a `parent` reference are nested as children of that parent. Combine with `hierarchyHandling="include-children"` to route edges across hierarchy levels.
+
+:example{name="cluster"}
+
+:example{name="architecture"}
+
+## Diagrams
+
+:example{name="flowchart"}
+
+:example{name="sequence-diagram"}
+
+:example{name="oauth-flow"}
+
+:example{name="state-machine"}
+
+:example{name="state-composite"}
+
+:example{name="erd"}
+
+:example{name="tcp-state-diagram"}
+
+## Playground
+
+:example{name="playground"}
diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json
index fa6db086c..2a1783c67 100644
--- a/docs/src/examples/catalog/Chart.json
+++ b/docs/src/examples/catalog/Chart.json
@@ -1923,6 +1923,118 @@
       "lineNumber": 18,
       "line": "<Chart"
     },
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 74,
+      "line": "<Chart"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 38,
+      "line": "<Chart"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 38,
+      "line": "<Chart"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 81,
+      "line": "<Chart"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 66,
+      "line": "<Chart"
+    },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 37,
+      "line": "<Chart"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 38,
+      "line": "<Chart"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 37,
+      "line": "<Chart"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 70,
+      "line": "<Chart"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 40,
+      "line": "<Chart"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 53,
+      "line": "<Chart"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 59,
+      "line": "<Chart"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 62,
+      "line": "<Chart"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 60,
+      "line": "<Chart"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 37,
+      "line": "<Chart"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 38,
+      "line": "<Chart"
+    },
     {
       "example": "color-via-ordinal-scale",
       "component": "Ellipse",
@@ -4234,5 +4346,5 @@
       "line": "<Chart {data} x=\"x\" y=\"y\" height={400}>"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:23.412Z"
+  "updatedAt": "2026-05-01T03:17:47.509Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Circle.json b/docs/src/examples/catalog/Circle.json
index b1f149b96..c8223eea0 100644
--- a/docs/src/examples/catalog/Circle.json
+++ b/docs/src/examples/catalog/Circle.json
@@ -436,6 +436,48 @@
       "lineNumber": 37,
       "line": "<Circle"
     },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 73,
+      "line": "<Circle r={node.width / 2} class=\"fill-primary stroke-surface-100 stroke-2\" />"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 89,
+      "line": "<Circle r={node.width / 2} class=\"fill-secondary stroke-surface-100 stroke-2\" />"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 108,
+      "line": "<Circle r={8} class=\"fill-surface-content\" />"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 110,
+      "line": "<Circle r={9} class=\"fill-surface-100 stroke-2 stroke-surface-content\" />"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 111,
+      "line": "<Circle r={4} class=\"fill-surface-content\" />"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 73,
+      "line": "<Circle r={node.width / 2} class=\"fill-info stroke-surface-100 stroke-2\" />"
+    },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
@@ -1004,5 +1046,5 @@
       "line": "<Circle cx={point.x} cy={point.y} r={4} class=\"fill-primary\" />"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:23.837Z"
+  "updatedAt": "2026-05-01T03:14:13.633Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Elk.json b/docs/src/examples/catalog/Elk.json
new file mode 100644
index 000000000..d79fdbf56
--- /dev/null
+++ b/docs/src/examples/catalog/Elk.json
@@ -0,0 +1,802 @@
+{
+  "component": "Elk",
+  "examples": [
+    {
+      "name": "architecture",
+      "title": "architecture",
+      "path": "/docs/components/Elk/architecture",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 74,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 85,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 86,
+          "line": "<Elk data={data as any} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 90,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 104,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 105,
+          "line": "<Rect"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 117,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "basic",
+      "title": "basic",
+      "path": "/docs/components/Elk/basic",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 38,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 49,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 50,
+          "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 54,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 68,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 69,
+          "line": "<Rect"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 76,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "cluster",
+      "title": "cluster",
+      "path": "/docs/components/Elk/cluster",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 38,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 49,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 50,
+          "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 54,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 68,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 69,
+          "line": "<Rect"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 81,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "erd",
+      "title": "erd",
+      "path": "/docs/components/Elk/erd",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 81,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 92,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 93,
+          "line": "<Elk data={data as any} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 97,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 108,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 124,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 125,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "flowchart",
+      "title": "flowchart",
+      "path": "/docs/components/Elk/flowchart",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 66,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 77,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 78,
+          "line": "<Elk data={data as any} nodeWidth={150} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 82,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 93,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 113,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 114,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "force",
+      "title": "force",
+      "path": "/docs/components/Elk/force",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 37,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 48,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 49,
+          "line": "<Elk"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 59,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 72,
+          "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+        },
+        {
+          "component": "Circle",
+          "lineNumber": 73,
+          "line": "<Circle r={node.width / 2} class=\"fill-primary stroke-surface-100 stroke-2\" />"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 74,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "layered",
+      "title": "layered",
+      "path": "/docs/components/Elk/layered",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 38,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 50,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 51,
+          "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 55,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 66,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 81,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 82,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "mrtree",
+      "title": "mrtree",
+      "path": "/docs/components/Elk/mrtree",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 37,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 48,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 49,
+          "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 53,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 67,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 68,
+          "line": "<Rect"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 75,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "oauth-flow",
+      "title": "oauth flow",
+      "path": "/docs/components/Elk/oauth-flow",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 70,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 81,
+          "line": "<Layer center>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 82,
+          "line": "<Elk data={data as any} nodeWidth={140} nodeHeight={42} {...settings}>"
+        },
+        {
+          "component": "Line",
+          "lineNumber": 91,
+          "line": "<Line"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 108,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 124,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 138,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 139,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "playground",
+      "title": "playground",
+      "path": "/docs/components/Elk/playground",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 40,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 51,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 52,
+          "line": "<Elk"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 70,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 84,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 85,
+          "line": "<Rect"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 97,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "radial",
+      "title": "radial",
+      "path": "/docs/components/Elk/radial",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 53,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 64,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 65,
+          "line": "<Elk"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 75,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 88,
+          "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+        },
+        {
+          "component": "Circle",
+          "lineNumber": 89,
+          "line": "<Circle r={node.width / 2} class=\"fill-secondary stroke-surface-100 stroke-2\" />"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 90,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "sequence-diagram",
+      "title": "sequence diagram",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 59,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 70,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 71,
+          "line": "<Elk data={data as any} nodeWidth={140} nodeHeight={50} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 75,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 86,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 101,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 102,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "state-composite",
+      "title": "state composite",
+      "path": "/docs/components/Elk/state-composite",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 62,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 73,
+          "line": "<Layer center>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 74,
+          "line": "<Elk data={data as any} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 78,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 89,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 106,
+          "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+        },
+        {
+          "component": "Circle",
+          "lineNumber": 108,
+          "line": "<Circle r={8} class=\"fill-surface-content\" />"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 116,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "state-machine",
+      "title": "state machine",
+      "path": "/docs/components/Elk/state-machine",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 60,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 71,
+          "line": "<Layer center>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 72,
+          "line": "<Elk data={data as any} nodeWidth={140} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 76,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 87,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 103,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 104,
+          "line": "<Rect"
+        }
+      ]
+    },
+    {
+      "name": "stress",
+      "title": "stress",
+      "path": "/docs/components/Elk/stress",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 37,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 48,
+          "line": "<Layer>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 49,
+          "line": "<Elk"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 59,
+          "line": "<Spline"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 72,
+          "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+        },
+        {
+          "component": "Circle",
+          "lineNumber": 73,
+          "line": "<Circle r={node.width / 2} class=\"fill-info stroke-surface-100 stroke-2\" />"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 74,
+          "line": "<Text"
+        }
+      ]
+    },
+    {
+      "name": "tcp-state-diagram",
+      "title": "tcp state diagram",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "components": [
+        {
+          "component": "Chart",
+          "lineNumber": 38,
+          "line": "<Chart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 50,
+          "line": "<Layer center>"
+        },
+        {
+          "component": "Elk",
+          "lineNumber": 51,
+          "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+        },
+        {
+          "component": "Spline",
+          "lineNumber": 55,
+          "line": "<Spline"
+        },
+        {
+          "component": "Text",
+          "lineNumber": 66,
+          "line": "<Text"
+        },
+        {
+          "component": "Group",
+          "lineNumber": 81,
+          "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+        },
+        {
+          "component": "Rect",
+          "lineNumber": 82,
+          "line": "<Rect"
+        }
+      ]
+    }
+  ],
+  "usage": [
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 86,
+      "line": "<Elk data={data as any} {...settings}>"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 50,
+      "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 50,
+      "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 93,
+      "line": "<Elk data={data as any} {...settings}>"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 78,
+      "line": "<Elk data={data as any} nodeWidth={150} {...settings}>"
+    },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 49,
+      "line": "<Elk"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 51,
+      "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 49,
+      "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 82,
+      "line": "<Elk data={data as any} nodeWidth={140} nodeHeight={42} {...settings}>"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 52,
+      "line": "<Elk"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 65,
+      "line": "<Elk"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 71,
+      "line": "<Elk data={data as any} nodeWidth={140} nodeHeight={50} {...settings}>"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 74,
+      "line": "<Elk data={data as any} {...settings}>"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 72,
+      "line": "<Elk data={data as any} nodeWidth={140} {...settings}>"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 49,
+      "line": "<Elk"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 51,
+      "line": "<Elk data={data as any} edges={(d) => d.links} {...settings}>"
+    }
+  ],
+  "updatedAt": "2026-05-01T03:17:48.379Z"
+}
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Group.json b/docs/src/examples/catalog/Group.json
index 6e73fb46f..b5a4e440d 100644
--- a/docs/src/examples/catalog/Group.json
+++ b/docs/src/examples/catalog/Group.json
@@ -189,6 +189,125 @@
       "lineNumber": 79,
       "line": "<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion=\"tween\">"
     },
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 104,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 68,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 68,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 124,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 113,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 72,
+      "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 81,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 67,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 138,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 84,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 88,
+      "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 101,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 106,
+      "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 115,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 103,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 72,
+      "line": "<Group x={node.x} y={node.y} motion=\"tween\">"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 81,
+      "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
+    },
     {
       "example": "collision-detection",
       "component": "ForceSimulation",
@@ -393,5 +512,5 @@
       "line": "<Group"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:25.683Z"
+  "updatedAt": "2026-05-01T03:17:49.409Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Layer.json b/docs/src/examples/catalog/Layer.json
index 40ef0d69a..c56066cd4 100644
--- a/docs/src/examples/catalog/Layer.json
+++ b/docs/src/examples/catalog/Layer.json
@@ -1682,6 +1682,118 @@
       "lineNumber": 27,
       "line": "<Layer>"
     },
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 85,
+      "line": "<Layer>"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 49,
+      "line": "<Layer>"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 49,
+      "line": "<Layer>"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 92,
+      "line": "<Layer>"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 77,
+      "line": "<Layer>"
+    },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 48,
+      "line": "<Layer>"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 50,
+      "line": "<Layer>"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 48,
+      "line": "<Layer>"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 81,
+      "line": "<Layer center>"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 51,
+      "line": "<Layer>"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 64,
+      "line": "<Layer>"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 70,
+      "line": "<Layer>"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 73,
+      "line": "<Layer center>"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 71,
+      "line": "<Layer center>"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 48,
+      "line": "<Layer>"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 50,
+      "line": "<Layer center>"
+    },
     {
       "example": "color-via-ordinal-scale",
       "component": "Ellipse",
@@ -4217,5 +4329,5 @@
       "line": "<Layer onpointermove={onPointerMove}>"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:26.177Z"
+  "updatedAt": "2026-05-01T03:17:49.711Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Line.json b/docs/src/examples/catalog/Line.json
index 7b25a3a83..f7d1a1c15 100644
--- a/docs/src/examples/catalog/Line.json
+++ b/docs/src/examples/catalog/Line.json
@@ -283,6 +283,13 @@
       "lineNumber": 67,
       "line": "<line x2=\"6\" stroke=\"currentColor\" />"
     },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 91,
+      "line": "<Line"
+    },
     {
       "example": "color-via-ordinal-scale",
       "component": "Line",
@@ -445,5 +452,5 @@
       "line": "<line x1={0} y1={0} x2={0} y2={-len} class=\"stroke-success\" stroke-width={2} />"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:26.239Z"
+  "updatedAt": "2026-05-01T03:17:49.836Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Rect.json b/docs/src/examples/catalog/Rect.json
index 691aa1d3f..f92f4d43f 100644
--- a/docs/src/examples/catalog/Rect.json
+++ b/docs/src/examples/catalog/Rect.json
@@ -275,6 +275,104 @@
       "lineNumber": 80,
       "line": "<Rect"
     },
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 105,
+      "line": "<Rect"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 69,
+      "line": "<Rect"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 69,
+      "line": "<Rect"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 125,
+      "line": "<Rect"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 132,
+      "line": "<Rect"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 114,
+      "line": "<Rect"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 82,
+      "line": "<Rect"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 68,
+      "line": "<Rect"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 139,
+      "line": "<Rect"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 85,
+      "line": "<Rect"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 102,
+      "line": "<Rect"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 116,
+      "line": "<Rect"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 104,
+      "line": "<Rect"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 82,
+      "line": "<Rect"
+    },
     {
       "example": "paint-brush-selection",
       "component": "GeoPath",
@@ -920,5 +1018,5 @@
       "line": "<Rect"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:27.698Z"
+  "updatedAt": "2026-05-01T03:17:50.797Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Spline.json b/docs/src/examples/catalog/Spline.json
index d65fe6ba9..ee91f9ad3 100644
--- a/docs/src/examples/catalog/Spline.json
+++ b/docs/src/examples/catalog/Spline.json
@@ -1001,6 +1001,118 @@
       "lineNumber": 55,
       "line": "<Spline"
     },
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 90,
+      "line": "<Spline"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 54,
+      "line": "<Spline"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 54,
+      "line": "<Spline"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 97,
+      "line": "<Spline"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 82,
+      "line": "<Spline"
+    },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 59,
+      "line": "<Spline"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 55,
+      "line": "<Spline"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 53,
+      "line": "<Spline"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 108,
+      "line": "<Spline"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 70,
+      "line": "<Spline"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 75,
+      "line": "<Spline"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 75,
+      "line": "<Spline"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 78,
+      "line": "<Spline"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 76,
+      "line": "<Spline"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 59,
+      "line": "<Spline"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 55,
+      "line": "<Spline"
+    },
     {
       "example": "bump-state-population-ranks",
       "component": "LineChart",
@@ -1401,5 +1513,5 @@
       "line": "<Spline curve={config.curve} motion=\"tween\" />"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:28.237Z"
+  "updatedAt": "2026-05-01T03:17:51.151Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Text.json b/docs/src/examples/catalog/Text.json
index e16541d56..a01208c1e 100644
--- a/docs/src/examples/catalog/Text.json
+++ b/docs/src/examples/catalog/Text.json
@@ -577,6 +577,181 @@
       "lineNumber": 91,
       "line": "<Text"
     },
+    {
+      "example": "architecture",
+      "component": "Elk",
+      "path": "/docs/components/Elk/architecture",
+      "lineNumber": 117,
+      "line": "<Text"
+    },
+    {
+      "example": "basic",
+      "component": "Elk",
+      "path": "/docs/components/Elk/basic",
+      "lineNumber": 76,
+      "line": "<Text"
+    },
+    {
+      "example": "cluster",
+      "component": "Elk",
+      "path": "/docs/components/Elk/cluster",
+      "lineNumber": 81,
+      "line": "<Text"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 108,
+      "line": "<Text"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 139,
+      "line": "<Text"
+    },
+    {
+      "example": "erd",
+      "component": "Elk",
+      "path": "/docs/components/Elk/erd",
+      "lineNumber": 150,
+      "line": "<Text"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 93,
+      "line": "<Text"
+    },
+    {
+      "example": "flowchart",
+      "component": "Elk",
+      "path": "/docs/components/Elk/flowchart",
+      "lineNumber": 128,
+      "line": "<Text"
+    },
+    {
+      "example": "force",
+      "component": "Elk",
+      "path": "/docs/components/Elk/force",
+      "lineNumber": 74,
+      "line": "<Text"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 66,
+      "line": "<Text"
+    },
+    {
+      "example": "layered",
+      "component": "Elk",
+      "path": "/docs/components/Elk/layered",
+      "lineNumber": 89,
+      "line": "<Text"
+    },
+    {
+      "example": "mrtree",
+      "component": "Elk",
+      "path": "/docs/components/Elk/mrtree",
+      "lineNumber": 75,
+      "line": "<Text"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 124,
+      "line": "<Text"
+    },
+    {
+      "example": "oauth-flow",
+      "component": "Elk",
+      "path": "/docs/components/Elk/oauth-flow",
+      "lineNumber": 145,
+      "line": "<Text"
+    },
+    {
+      "example": "playground",
+      "component": "Elk",
+      "path": "/docs/components/Elk/playground",
+      "lineNumber": 97,
+      "line": "<Text"
+    },
+    {
+      "example": "radial",
+      "component": "Elk",
+      "path": "/docs/components/Elk/radial",
+      "lineNumber": 90,
+      "line": "<Text"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 86,
+      "line": "<Text"
+    },
+    {
+      "example": "sequence-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/sequence-diagram",
+      "lineNumber": 109,
+      "line": "<Text"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 89,
+      "line": "<Text"
+    },
+    {
+      "example": "state-composite",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-composite",
+      "lineNumber": 128,
+      "line": "<Text"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 87,
+      "line": "<Text"
+    },
+    {
+      "example": "state-machine",
+      "component": "Elk",
+      "path": "/docs/components/Elk/state-machine",
+      "lineNumber": 116,
+      "line": "<Text"
+    },
+    {
+      "example": "stress",
+      "component": "Elk",
+      "path": "/docs/components/Elk/stress",
+      "lineNumber": 74,
+      "line": "<Text"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 66,
+      "line": "<Text"
+    },
+    {
+      "example": "tcp-state-diagram",
+      "component": "Elk",
+      "path": "/docs/components/Elk/tcp-state-diagram",
+      "lineNumber": 93,
+      "line": "<Text"
+    },
     {
       "example": "us-country-map",
       "component": "GeoPath",
@@ -1033,5 +1208,5 @@
       "line": "<Text x={570} y={16} textAnchor=\"middle\" class=\"text-xs fill-surface-content/50\""
     }
   ],
-  "updatedAt": "2026-04-30T15:36:28.373Z"
+  "updatedAt": "2026-05-01T03:17:51.314Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/components/Elk/architecture.svelte b/docs/src/examples/components/Elk/architecture.svelte
new file mode 100644
index 000000000..dfa15cfc5
--- /dev/null
+++ b/docs/src/examples/components/Elk/architecture.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// System architecture grouped by tier (compound nodes)
+	const data = {
+		nodes: [
+			{ id: 'edge', label: 'Edge' },
+			{ id: 'cdn', parent: 'edge', label: 'CDN' },
+			{ id: 'waf', parent: 'edge', label: 'WAF' },
+
+			{ id: 'web', label: 'Web tier' },
+			{ id: 'spa', parent: 'web', label: 'SPA' },
+			{ id: 'ssr', parent: 'web', label: 'SSR' },
+
+			{ id: 'svc', label: 'Services' },
+			{ id: 'auth', parent: 'svc', label: 'Auth' },
+			{ id: 'orders', parent: 'svc', label: 'Orders' },
+			{ id: 'billing', parent: 'svc', label: 'Billing' },
+
+			{ id: 'data', label: 'Data' },
+			{ id: 'pg', parent: 'data', label: 'Postgres' },
+			{ id: 'redis', parent: 'data', label: 'Redis' },
+			{ id: 's3', parent: 'data', label: 'Object store' }
+		],
+		edges: [
+			{ source: 'cdn', target: 'spa' },
+			{ source: 'cdn', target: 'ssr' },
+			{ source: 'waf', target: 'spa' },
+			{ source: 'waf', target: 'ssr' },
+			{ source: 'spa', target: 'auth' },
+			{ source: 'spa', target: 'orders' },
+			{ source: 'ssr', target: 'auth' },
+			{ source: 'ssr', target: 'orders' },
+			{ source: 'orders', target: 'billing' },
+			{ source: 'auth', target: 'pg' },
+			{ source: 'auth', target: 'redis' },
+			{ source: 'orders', target: 'pg' },
+			{ source: 'billing', target: 'pg' },
+			{ source: 'billing', target: 's3' }
+		]
+	};
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 20,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 90,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'stroke-2',
+										node.isCompound
+											? 'fill-surface-100/30 stroke-primary/20'
+											: 'fill-surface-200 stroke-primary/50'
+									)}
+									rx={10}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.isCompound ? 4 : node.width / 2}
+									y={node.isCompound ? -6 : node.height / 2}
+									dy={node.isCompound ? 0 : -2}
+									textAnchor={node.isCompound ? 'start' : 'middle'}
+									verticalAnchor={node.isCompound ? 'end' : 'middle'}
+									class={cls(
+										'pointer-events-none',
+										node.isCompound
+											? 'text-[11px] fill-surface-content/70 font-medium'
+											: 'text-xs'
+									)}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/basic.svelte b/docs/src/examples/components/Elk/basic.svelte
new file mode 100644
index 000000000..57f8e23e7
--- /dev/null
+++ b/docs/src/examples/components/Elk/basic.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveBasis } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getSimpleGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getSimpleGraph();
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 40,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveBasis,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={500}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-surface-200 stroke-2 stroke-primary/50"
+									rx={10}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls('text-xs pointer-events-none')}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/cluster.svelte b/docs/src/examples/components/Elk/cluster.svelte
new file mode 100644
index 000000000..d5cd4b42c
--- /dev/null
+++ b/docs/src/examples/components/Elk/cluster.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getClusterGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getClusterGraph();
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'down',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 20,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 50,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'stroke-2',
+										node.isCompound
+											? 'fill-surface-100/30 stroke-primary/20'
+											: 'fill-surface-200 stroke-primary/50'
+									)}
+									rx={10}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.isCompound ? 4 : node.width / 2}
+									y={node.isCompound ? -6 : node.height / 2}
+									dy={node.isCompound ? 0 : -2}
+									textAnchor={node.isCompound ? 'start' : 'middle'}
+									verticalAnchor={node.isCompound ? 'end' : 'middle'}
+									class={cls(
+										'pointer-events-none',
+										node.isCompound
+											? 'text-[11px] fill-surface-content/70 font-medium'
+											: 'text-xs'
+									)}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/erd.svelte b/docs/src/examples/components/Elk/erd.svelte
new file mode 100644
index 000000000..b6df11054
--- /dev/null
+++ b/docs/src/examples/components/Elk/erd.svelte
@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// Entity-relationship diagram. Each entity has a list of fields rendered into the box.
+	const entities = [
+		{
+			id: 'users',
+			label: 'users',
+			fields: ['id PK', 'email', 'name', 'created_at']
+		},
+		{
+			id: 'orders',
+			label: 'orders',
+			fields: ['id PK', 'user_id FK', 'status', 'total', 'created_at']
+		},
+		{
+			id: 'order_items',
+			label: 'order_items',
+			fields: ['id PK', 'order_id FK', 'product_id FK', 'qty', 'price']
+		},
+		{
+			id: 'products',
+			label: 'products',
+			fields: ['id PK', 'sku', 'name', 'price']
+		},
+		{
+			id: 'addresses',
+			label: 'addresses',
+			fields: ['id PK', 'user_id FK', 'street', 'city', 'country']
+		}
+	];
+
+	const fieldHeight = 18;
+	const headerHeight = 26;
+
+	const data = {
+		nodes: entities.map((e) => ({
+			id: e.id,
+			label: e.label,
+			width: 180,
+			height: headerHeight + e.fields.length * fieldHeight + 8
+		})),
+		edges: [
+			{ source: 'users', target: 'orders', label: '1..N' },
+			{ source: 'users', target: 'addresses', label: '1..N' },
+			{ source: 'orders', target: 'order_items', label: '1..N' },
+			{ source: 'products', target: 'order_items', label: '1..N' }
+		]
+	};
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 50,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 120,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={650}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-primary/40"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="stroke-3 stroke-surface-100 text-[10px]"
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							{@const entity = entities.find((e) => e.id === node.id)!}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-surface-100 stroke-2 stroke-primary/50"
+									rx={6}
+								/>
+
+								<Rect
+									width={node.width}
+									height={headerHeight}
+									class="fill-primary/15 stroke-primary/40"
+									rx={6}
+								/>
+
+								<Text
+									value={entity.label}
+									x={node.width / 2}
+									y={headerHeight / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-xs font-semibold pointer-events-none"
+								/>
+
+								{#each entity.fields as field, i}
+									<Text
+										value={field}
+										x={10}
+										y={headerHeight + 4 + i * fieldHeight + fieldHeight / 2}
+										textAnchor="start"
+										verticalAnchor="middle"
+										class="text-[10px] fill-surface-content/80 pointer-events-none"
+									/>
+								{/each}
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/flowchart.svelte b/docs/src/examples/components/Elk/flowchart.svelte
new file mode 100644
index 000000000..eb7ba2d8a
--- /dev/null
+++ b/docs/src/examples/components/Elk/flowchart.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// Mermaid-style flowchart of a CI/CD pipeline
+	const data = {
+		nodes: [
+			{ id: 'commit', label: 'git commit', kind: 'start' },
+			{ id: 'lint', label: 'Lint' },
+			{ id: 'test', label: 'Run tests' },
+			{ id: 'pass', label: 'All tests pass?', kind: 'decision' },
+			{ id: 'build', label: 'Build artifact' },
+			{ id: 'staging', label: 'Deploy → staging' },
+			{ id: 'smoke', label: 'Smoke tests OK?', kind: 'decision' },
+			{ id: 'prod', label: 'Promote → production' },
+			{ id: 'notify', label: 'Notify team', kind: 'end' },
+			{ id: 'rollback', label: 'Rollback', kind: 'error' },
+			{ id: 'fail', label: 'Mark build failed', kind: 'error' }
+		],
+		edges: [
+			{ source: 'commit', target: 'lint' },
+			{ source: 'lint', target: 'test' },
+			{ source: 'test', target: 'pass' },
+			{ source: 'pass', target: 'build', label: 'yes' },
+			{ source: 'pass', target: 'fail', label: 'no' },
+			{ source: 'build', target: 'staging' },
+			{ source: 'staging', target: 'smoke' },
+			{ source: 'smoke', target: 'prod', label: 'yes' },
+			{ source: 'smoke', target: 'rollback', label: 'no' },
+			{ source: 'prod', target: 'notify' },
+			{ source: 'rollback', target: 'notify' },
+			{ source: 'fail', target: 'notify' }
+		]
+	};
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'down',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 30,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} nodeWidth={150} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-40"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls(
+										'stroke-3 stroke-surface-100 text-[10px] font-medium',
+										edge.label === 'yes' && 'fill-success-600',
+										edge.label === 'no' && 'fill-danger-600'
+									)}
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							{@const meta = data.nodes.find((n) => n.id === node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'stroke-2',
+										meta?.kind === 'start' && 'fill-success/15 stroke-success/60',
+										meta?.kind === 'decision' && 'fill-warning/15 stroke-warning/60',
+										meta?.kind === 'error' && 'fill-danger/15 stroke-danger/60',
+										meta?.kind === 'end' && 'fill-info/15 stroke-info/60',
+										!meta?.kind && 'fill-surface-200 stroke-primary/50'
+									)}
+									rx={meta?.kind === 'decision' ? node.height / 2 : 8}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-xs pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/force.svelte b/docs/src/examples/components/Elk/force.svelte
new file mode 100644
index 000000000..15c37e50c
--- /dev/null
+++ b/docs/src/examples/components/Elk/force.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Chart, Circle, Layer, Spline, Text, Group } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getMiserablesGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getMiserablesGraph();
+
+	let settings = $state({
+		algorithm: 'force',
+		direction: 'right',
+		edgeRouting: 'polyline',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 40,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk
+				data={data as any}
+				edges={(d) => d.links}
+				nodeWidth={20}
+				nodeHeight={20}
+				{...settings}
+			>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-20"
+								motion="tween"
+								curve={settings.curve}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x} y={node.y} motion="tween">
+								<Circle r={node.width / 2} class="fill-primary stroke-surface-100 stroke-2" />
+								<Text
+									value={node.label}
+									y={-node.width / 2 - 4}
+									textAnchor="middle"
+									verticalAnchor="end"
+									class="text-[10px] pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/layered.svelte b/docs/src/examples/components/Elk/layered.svelte
new file mode 100644
index 000000000..fe755c3fb
--- /dev/null
+++ b/docs/src/examples/components/Elk/layered.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getSoftwareUserFlowGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getSoftwareUserFlowGraph();
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'down',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 30,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 70,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			initialScale: 0.75,
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="stroke-2 stroke-surface-100 text-xs"
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls('fill-surface-200 stroke-2 stroke-primary/50')}
+									rx={8}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls('text-xs pointer-events-none')}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/mrtree.svelte b/docs/src/examples/components/Elk/mrtree.svelte
new file mode 100644
index 000000000..e2be9e0e5
--- /dev/null
+++ b/docs/src/examples/components/Elk/mrtree.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getSimpleGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getSimpleGraph();
+
+	let settings = $state({
+		algorithm: 'mrtree',
+		direction: 'down',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 20,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={500}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-success-100 stroke-2 stroke-success/60"
+									rx={node.height / 2}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-xs pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/oauth-flow.svelte b/docs/src/examples/components/Elk/oauth-flow.svelte
new file mode 100644
index 000000000..499dd0ae5
--- /dev/null
+++ b/docs/src/examples/components/Elk/oauth-flow.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Line, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// UML-style sequence diagram for OAuth 2.0 authorization-code flow.
+	// We use ELK only to spread the actors evenly across a horizontal row
+	// (chaining them with invisible edges), then draw lifelines and messages
+	// ourselves at fixed vertical offsets.
+	const actors = [
+		{ id: 'user', label: 'User' },
+		{ id: 'app', label: 'Client App' },
+		{ id: 'auth', label: 'Auth Server' },
+		{ id: 'api', label: 'Resource API' }
+	];
+
+	type Msg = { from: string; to: string; label: string; kind: 'request' | 'response' };
+	const messages: Msg[] = [
+		{ from: 'user', to: 'app', label: 'Click Login', kind: 'request' },
+		{ from: 'app', to: 'auth', label: 'Authorization request', kind: 'request' },
+		{ from: 'auth', to: 'user', label: 'Login page', kind: 'response' },
+		{ from: 'user', to: 'auth', label: 'Credentials', kind: 'request' },
+		{ from: 'auth', to: 'app', label: 'Authorization code', kind: 'response' },
+		{ from: 'app', to: 'auth', label: 'Exchange code for token', kind: 'request' },
+		{ from: 'auth', to: 'app', label: 'Access token', kind: 'response' },
+		{ from: 'app', to: 'api', label: 'Request + token', kind: 'request' },
+		{ from: 'api', to: 'app', label: 'Protected resource', kind: 'response' },
+		{ from: 'app', to: 'user', label: 'Display data', kind: 'response' }
+	];
+
+	// Chain actors with invisible edges so ELK lays them out left-to-right.
+	const data = {
+		nodes: actors,
+		edges: actors.slice(0, -1).map((a, i) => ({ source: a.id, target: actors[i + 1].id }))
+	};
+
+	const messageGap = 44;
+	const lifelineTopGap = 32;
+	const lifelineBottomGap = 24;
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 60,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 140,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer center>
+			<Elk data={data as any} nodeWidth={140} nodeHeight={42} {...settings}>
+				{#snippet children({ nodes })}
+					{@const byId = new Map(nodes.map((n) => [n.id, n]))}
+					{@const headerBottom = nodes.length ? nodes[0].y0 + nodes[0].height : 0}
+					{@const firstMessageY = headerBottom + lifelineTopGap}
+					{@const lifelineEndY = firstMessageY + messages.length * messageGap + lifelineBottomGap}
+
+					<g class="lifelines">
+						{#each nodes as node (node.id)}
+							<Line
+								x1={node.x}
+								x2={node.x}
+								y1={headerBottom}
+								y2={lifelineEndY}
+								class="stroke-surface-content/30 [stroke-dasharray:4_4]"
+							/>
+						{/each}
+					</g>
+
+					<g class="messages">
+						{#each messages as msg, i (i)}
+							{@const from = byId.get(msg.from)}
+							{@const to = byId.get(msg.to)}
+							{#if from && to}
+								{@const y = firstMessageY + i * messageGap}
+								{@const isResponse = msg.kind === 'response'}
+								<Spline
+									data={[
+										{ x: from.x, y },
+										{ x: to.x, y }
+									]}
+									x="x"
+									y="y"
+									class={cls(
+										'stroke-2',
+										isResponse
+											? 'stroke-surface-content/60 [stroke-dasharray:5_4]'
+											: 'stroke-surface-content/80'
+									)}
+									motion="tween"
+									markerEnd="triangle"
+								/>
+								<Text
+									value={msg.label}
+									x={(from.x + to.x) / 2}
+									y={y - 6}
+									textAnchor="middle"
+									verticalAnchor="end"
+									class="text-[10px] fill-surface-content/80 stroke-3 stroke-surface-100 pointer-events-none"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="actors">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-surface-200 stroke-2 stroke-primary/50"
+									rx={6}
+								/>
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-xs font-medium pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/playground.svelte b/docs/src/examples/components/Elk/playground.svelte
new file mode 100644
index 000000000..120989ac3
--- /dev/null
+++ b/docs/src/examples/components/Elk/playground.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveBasis } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkPlaygroundControls from '$lib/components/controls/ElkPlaygroundControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	import { getGraph } from '$lib/graph.remote';
+
+	let selectedGraphValue = $state('simple');
+	let data = $derived<any>(await getGraph(selectedGraphValue));
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 40,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveBasis,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkPlaygroundControls bind:selectedGraphValue bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk
+				{data}
+				edges={(d) => d.links}
+				algorithm={settings.algorithm}
+				direction={settings.direction}
+				edgeRouting={settings.edgeRouting}
+				nodePlacementStrategy={settings.nodePlacementStrategy}
+				hierarchyHandling={settings.hierarchyHandling}
+				nodeNodeSpacing={settings.nodeNodeSpacing}
+				edgeEdgeSpacing={settings.edgeEdgeSpacing}
+				edgeNodeSpacing={settings.edgeNodeSpacing}
+				layerSpacing={settings.layerSpacing}
+				componentSpacing={settings.componentSpacing}
+				separateConnectedComponents={settings.separateConnectedComponents}
+			>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'stroke-2',
+										node.parent
+											? 'fill-surface-100/40 stroke-primary/20 stroke-dashed'
+											: 'fill-surface-200 stroke-primary/50'
+									)}
+									rx={10}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls('text-xs pointer-events-none')}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/radial.svelte b/docs/src/examples/components/Elk/radial.svelte
new file mode 100644
index 000000000..da3abc190
--- /dev/null
+++ b/docs/src/examples/components/Elk/radial.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveBasis } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Chart, Circle, Layer, Spline, Text, Group } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getSimpleTree } from '$lib/data.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// ELK's Radial algorithm expects a tree, so we flatten the simple-tree hierarchy
+	// (parent / children) into the {nodes, edges} shape the Elk component accepts.
+	type TreeNode = { name: string; children?: TreeNode[] };
+	function flattenTree(tree: TreeNode) {
+		const nodes: { id: string; label: string }[] = [];
+		const links: { source: string; target: string }[] = [];
+		function walk(node: TreeNode) {
+			nodes.push({ id: node.name, label: node.name });
+			for (const child of node.children ?? []) {
+				links.push({ source: node.name, target: child.name });
+				walk(child);
+			}
+		}
+		walk(tree);
+		return { nodes, links };
+	}
+	const data = flattenTree((await getSimpleTree()) as TreeNode);
+
+	let settings = $state({
+		algorithm: 'radial',
+		direction: 'right',
+		edgeRouting: 'polyline',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 40,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveBasis,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={600}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk
+				data={data as any}
+				edges={(d) => d.links}
+				nodeWidth={30}
+				nodeHeight={30}
+				{...settings}
+			>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x} y={node.y} motion="tween">
+								<Circle r={node.width / 2} class="fill-secondary stroke-surface-100 stroke-2" />
+								<Text
+									value={node.label}
+									y={node.width / 2 + 10}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-[10px] pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/sequence-diagram.svelte b/docs/src/examples/components/Elk/sequence-diagram.svelte
new file mode 100644
index 000000000..6d19d7dc9
--- /dev/null
+++ b/docs/src/examples/components/Elk/sequence-diagram.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// Sequence-style diagram of an OAuth login flow rendered left-to-right
+	const data = {
+		nodes: [
+			{ id: 'user', label: 'User' },
+			{ id: 'app', label: 'App' },
+			{ id: 'idp', label: 'Identity Provider' },
+			{ id: 'api', label: 'API' },
+			{ id: 'db', label: 'Database' }
+		],
+		edges: [
+			{ source: 'user', target: 'app', label: 'click "Sign in"' },
+			{ source: 'app', target: 'idp', label: 'redirect /authorize' },
+			{ source: 'idp', target: 'user', label: 'consent prompt' },
+			{ source: 'user', target: 'idp', label: 'approve' },
+			{ source: 'idp', target: 'app', label: 'auth code' },
+			{ source: 'app', target: 'idp', label: 'POST /token' },
+			{ source: 'idp', target: 'app', label: 'access_token' },
+			{ source: 'app', target: 'api', label: 'GET /me (Bearer)' },
+			{ source: 'api', target: 'db', label: 'SELECT user' },
+			{ source: 'db', target: 'api', label: 'row' },
+			{ source: 'api', target: 'app', label: 'profile json' },
+			{ source: 'app', target: 'user', label: 'render dashboard' }
+		]
+	};
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'splines',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 60,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 120,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk data={data as any} nodeWidth={140} nodeHeight={50} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-primary/50"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="stroke-3 stroke-surface-100 text-[10px]"
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class="fill-surface-200 stroke-2 stroke-primary/50"
+									rx={6}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-xs pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/state-composite.svelte b/docs/src/examples/components/Elk/state-composite.svelte
new file mode 100644
index 000000000..db42d16ea
--- /dev/null
+++ b/docs/src/examples/components/Elk/state-composite.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Circle, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// Composite state diagram (UML-style) — `processing` is a compound state with
+	// inner transitions parse → validate → execute, plus outer transitions
+	// from the compound itself to Complete/Error.
+	const data = {
+		nodes: [
+			{ id: 'start', kind: 'marker', width: 18, height: 18 },
+			{ id: 'end', kind: 'marker', width: 18, height: 18 },
+			{ id: 'idle', label: 'Idle' },
+			{ id: 'processing', label: 'Processing' },
+			{ id: 'parse', parent: 'processing', label: 'parse' },
+			{ id: 'validate', parent: 'processing', label: 'validate' },
+			{ id: 'execute', parent: 'processing', label: 'execute' },
+			{ id: 'complete', label: 'Complete' },
+			{ id: 'error', label: 'Error' }
+		],
+		edges: [
+			{ source: 'start', target: 'idle' },
+			{ source: 'idle', target: 'processing', label: 'submit' },
+			{ source: 'parse', target: 'validate' },
+			{ source: 'validate', target: 'execute' },
+			{ source: 'processing', target: 'complete', label: 'done' },
+			{ source: 'processing', target: 'error', label: 'fail' },
+			{ source: 'error', target: 'idle', label: 'retry' },
+			{ source: 'complete', target: 'end' }
+		]
+	};
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'down',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 30,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 50,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer center>
+			<Elk data={data as any} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-40"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="stroke-3 stroke-surface-100 text-[10px]"
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							{@const meta = data.nodes.find((n) => n.id === node.id) as any}
+							{#if meta?.kind === 'marker'}
+								<Group x={node.x} y={node.y} motion="tween">
+									{#if node.id === 'start'}
+										<Circle r={8} class="fill-surface-content" />
+									{:else}
+										<Circle r={9} class="fill-surface-100 stroke-2 stroke-surface-content" />
+										<Circle r={4} class="fill-surface-content" />
+									{/if}
+								</Group>
+							{:else}
+								<Group x={node.x0} y={node.y0} motion="tween">
+									<Rect
+										width={node.width}
+										height={node.height}
+										class={cls(
+											'stroke-2',
+											node.isCompound
+												? 'fill-surface-100/30 stroke-primary/20'
+												: 'fill-surface-200 stroke-primary/50'
+										)}
+										rx={node.isCompound ? 8 : 12}
+									/>
+
+									<Text
+										value={node.label}
+										x={node.isCompound ? 4 : node.width / 2}
+										y={node.isCompound ? -6 : node.height / 2}
+										dy={node.isCompound ? 0 : -2}
+										textAnchor={node.isCompound ? 'start' : 'middle'}
+										verticalAnchor={node.isCompound ? 'end' : 'middle'}
+										class={cls(
+											'pointer-events-none',
+											node.isCompound
+												? 'text-[11px] fill-surface-content/70 font-medium'
+												: 'text-xs'
+										)}
+									/>
+								</Group>
+							{/if}
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/state-machine.svelte b/docs/src/examples/components/Elk/state-machine.svelte
new file mode 100644
index 000000000..75c66172a
--- /dev/null
+++ b/docs/src/examples/components/Elk/state-machine.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	// Order lifecycle state machine with self-loops & cycles
+	const data = {
+		nodes: [
+			{ id: 'cart', label: 'Cart' },
+			{ id: 'pending', label: 'Pending Payment' },
+			{ id: 'paid', label: 'Paid' },
+			{ id: 'fulfilled', label: 'Fulfilled' },
+			{ id: 'shipped', label: 'Shipped' },
+			{ id: 'delivered', label: 'Delivered' },
+			{ id: 'cancelled', label: 'Cancelled', kind: 'terminal' },
+			{ id: 'refunded', label: 'Refunded', kind: 'terminal' }
+		],
+		edges: [
+			{ source: 'cart', target: 'pending', label: 'checkout' },
+			{ source: 'pending', target: 'paid', label: 'capture' },
+			{ source: 'pending', target: 'cancelled', label: 'timeout' },
+			{ source: 'paid', target: 'fulfilled', label: 'pick & pack' },
+			{ source: 'paid', target: 'refunded', label: 'refund' },
+			{ source: 'fulfilled', target: 'shipped', label: 'handoff carrier' },
+			{ source: 'shipped', target: 'delivered', label: 'scan: delivered' },
+			{ source: 'delivered', target: 'refunded', label: 'return' },
+			{ source: 'cart', target: 'cancelled', label: 'abandon' }
+		]
+	};
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'right',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 30,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 90,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={600}
+	>
+		<TransformContextControls />
+
+		<Layer center>
+			<Elk data={data as any} nodeWidth={140} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="stroke-3 stroke-surface-100 text-[10px]"
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							{@const meta = data.nodes.find((n) => n.id === node.id) as any}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'stroke-2',
+										meta?.kind === 'terminal'
+											? 'fill-danger/10 stroke-danger/60'
+											: 'fill-surface-200 stroke-primary/50'
+									)}
+									rx={node.height / 2}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-xs pointer-events-none font-medium"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/stress.svelte b/docs/src/examples/components/Elk/stress.svelte
new file mode 100644
index 000000000..ae8276be5
--- /dev/null
+++ b/docs/src/examples/components/Elk/stress.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { Chart, Circle, Layer, Spline, Text, Group } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getMiserablesGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getMiserablesGraph();
+
+	let settings = $state({
+		algorithm: 'stress',
+		direction: 'right',
+		edgeRouting: 'polyline',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 40,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 60,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'arrow'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer>
+			<Elk
+				data={data as any}
+				edges={(d) => d.links}
+				nodeWidth={24}
+				nodeHeight={24}
+				{...settings}
+			>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-20"
+								motion="tween"
+								curve={settings.curve}
+							/>
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x} y={node.y} motion="tween">
+								<Circle r={node.width / 2} class="fill-info stroke-surface-100 stroke-2" />
+								<Text
+									value={node.label}
+									y={-node.width / 2 - 4}
+									textAnchor="middle"
+									verticalAnchor="end"
+									class="text-[10px] pointer-events-none"
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/examples/components/Elk/tcp-state-diagram.svelte b/docs/src/examples/components/Elk/tcp-state-diagram.svelte
new file mode 100644
index 000000000..a24187d14
--- /dev/null
+++ b/docs/src/examples/components/Elk/tcp-state-diagram.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { curveLinear } from 'd3-shape';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { cls } from '@layerstack/tailwind';
+	import { Chart, Group, Layer, Rect, Spline, Text } from 'layerchart';
+	import { Elk } from 'layerchart/graph';
+	import { getTcpStateGraph } from '$lib/graph.remote';
+	import ElkControls from '$lib/components/controls/ElkControls.svelte';
+	import ElkSettingsControls from '$lib/components/controls/ElkSettingsControls.svelte';
+	import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+
+	const data = await getTcpStateGraph();
+
+	let settings = $state({
+		algorithm: 'layered',
+		direction: 'down',
+		edgeRouting: 'orthogonal',
+		nodePlacementStrategy: 'network-simplex',
+		hierarchyHandling: 'include-children',
+		nodeNodeSpacing: 40,
+		edgeEdgeSpacing: 10,
+		edgeNodeSpacing: 20,
+		layerSpacing: 70,
+		componentSpacing: 40,
+		separateConnectedComponents: true,
+		curve: curveLinear,
+		arrow: 'triangle'
+	}) satisfies ComponentProps<typeof ElkControls>['settings'];
+
+	let showSettings = $state(false);
+</script>
+
+<ElkSettingsControls bind:showSettings />
+
+<div class="flex gap-2">
+	<Chart
+		transform={{
+			mode: 'canvas',
+			initialScale: 0.85,
+			scrollMode: 'scale',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		clip
+		height={700}
+	>
+		<TransformContextControls />
+
+		<Layer center>
+			<Elk data={data as any} edges={(d) => d.links} {...settings}>
+				{#snippet children({ nodes, edges })}
+					<g class="edges">
+						{#each edges as edge (edge.id)}
+							<Spline
+								data={edge.points}
+								x="x"
+								y="y"
+								class="stroke-surface-content opacity-30"
+								motion="tween"
+								curve={settings.curve}
+								markerEnd={settings.arrow}
+							/>
+
+							{#if edge.label}
+								<Text
+									value={edge.label}
+									x={edge.x}
+									y={edge.y}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="stroke-2 stroke-surface-100 text-[10px]"
+									motion="tween"
+								/>
+							{/if}
+						{/each}
+					</g>
+
+					<g class="nodes">
+						{#each nodes as node (node.id)}
+							<Group x={node.x0} y={node.y0} motion="tween">
+								<Rect
+									width={node.width}
+									height={node.height}
+									class={cls(
+										'fill-surface-200 stroke-2 stroke-primary/50',
+										node.label === 'CLOSED' && 'fill-danger/10 stroke-danger/50',
+										node.label === 'ESTAB' && 'fill-success/10 stroke-success/50'
+									)}
+									rx={10}
+								/>
+
+								<Text
+									value={node.label}
+									x={node.width / 2}
+									y={node.height / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls('text-xs pointer-events-none')}
+								/>
+							</Group>
+						{/each}
+					</g>
+				{/snippet}
+			</Elk>
+		</Layer>
+	</Chart>
+
+	{#if showSettings}
+		<div transition:slide={{ axis: 'x' }}>
+			<ElkControls bind:settings />
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/lib/components/controls/ElkControls.svelte b/docs/src/lib/components/controls/ElkControls.svelte
new file mode 100644
index 000000000..3a465367f
--- /dev/null
+++ b/docs/src/lib/components/controls/ElkControls.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { MenuField, RangeField } from 'svelte-ux';
+	import { curveLinear } from 'd3-shape';
+	import { cls } from '@layerstack/tailwind';
+
+	import type { SplineProps } from 'layerchart';
+	import type { ElkProps } from 'layerchart/graph';
+	import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+
+	let {
+		settings = $bindable({
+			algorithm: 'layered',
+			direction: 'right',
+			edgeRouting: 'orthogonal',
+			nodePlacementStrategy: 'network-simplex',
+			hierarchyHandling: 'include-children',
+			nodeNodeSpacing: 40,
+			edgeEdgeSpacing: 10,
+			edgeNodeSpacing: 20,
+			layerSpacing: 60,
+			componentSpacing: 40,
+			separateConnectedComponents: true,
+			curve: curveLinear,
+			arrow: 'arrow'
+		}),
+		class: className
+	}: {
+		settings: {
+			algorithm: ElkProps['algorithm'];
+			direction: ElkProps['direction'];
+			edgeRouting: ElkProps['edgeRouting'];
+			nodePlacementStrategy: ElkProps['nodePlacementStrategy'];
+			hierarchyHandling: ElkProps['hierarchyHandling'];
+			nodeNodeSpacing: number;
+			edgeEdgeSpacing: number;
+			edgeNodeSpacing: number;
+			layerSpacing: number;
+			componentSpacing: number;
+			separateConnectedComponents: boolean;
+			curve: ComponentProps<typeof CurveMenuField>['value'];
+			arrow: SplineProps['marker'];
+		};
+		class?: string;
+	} = $props();
+</script>
+
+<div class={cls('grid gap-2 screenshot-hidden', className)}>
+	<MenuField
+		label="Algorithm"
+		options={[
+			{ label: 'Layered', value: 'layered' },
+			{ label: 'Mr. Tree', value: 'mrtree' },
+			{ label: 'Force', value: 'force' },
+			{ label: 'Stress', value: 'stress' },
+			{ label: 'Radial', value: 'radial' },
+			{ label: 'DisCo', value: 'disco' },
+			{ label: 'Rectangle Packing', value: 'rectpacking' },
+			{ label: 'Box', value: 'box' },
+			{ label: 'Random', value: 'random' }
+		]}
+		bind:value={settings.algorithm}
+		menuIcon=""
+		stepper
+		dense
+	/>
+
+	<MenuField
+		label="Direction"
+		options={[
+			{ label: 'Down (top → bottom)', value: 'down' },
+			{ label: 'Up (bottom → top)', value: 'up' },
+			{ label: 'Right (left → right)', value: 'right' },
+			{ label: 'Left (right → left)', value: 'left' }
+		]}
+		bind:value={settings.direction}
+		menuIcon=""
+		stepper
+		dense
+	/>
+
+	<MenuField
+		label="Edge routing"
+		options={[
+			{ label: 'Polyline', value: 'polyline' },
+			{ label: 'Orthogonal', value: 'orthogonal' },
+			{ label: 'Splines', value: 'splines' }
+		]}
+		bind:value={settings.edgeRouting}
+		menuIcon=""
+		stepper
+		dense
+	/>
+
+	<MenuField
+		label="Node placement (layered)"
+		options={[
+			{ label: 'Network simplex', value: 'network-simplex' },
+			{ label: 'Brandes-Köpf', value: 'brandes-koepf' },
+			{ label: 'Linear segments', value: 'linear-segments' },
+			{ label: 'Simple', value: 'simple' },
+			{ label: 'Interactive', value: 'interactive' }
+		]}
+		bind:value={settings.nodePlacementStrategy}
+		menuIcon=""
+		stepper
+		dense
+	/>
+
+	<MenuField
+		label="Hierarchy handling"
+		options={[
+			{ label: 'Include children', value: 'include-children' },
+			{ label: 'Separate children', value: 'separate-children' },
+			{ label: 'Inherit', value: 'inherit' }
+		]}
+		bind:value={settings.hierarchyHandling}
+		menuIcon=""
+		stepper
+		dense
+	/>
+
+	<RangeField label="Node spacing" min={0} max={200} step={5} bind:value={settings.nodeNodeSpacing} dense />
+	<RangeField label="Edge spacing" min={0} max={50} step={1} bind:value={settings.edgeEdgeSpacing} dense />
+	<RangeField label="Edge / node spacing" min={0} max={100} step={1} bind:value={settings.edgeNodeSpacing} dense />
+	<RangeField label="Layer spacing" min={0} max={300} step={5} bind:value={settings.layerSpacing} dense />
+	<RangeField label="Component spacing" min={0} max={200} step={5} bind:value={settings.componentSpacing} dense />
+
+	<CurveMenuField label="Curve style" bind:value={settings.curve} dense />
+	<MenuField
+		label="Arrow / Marker"
+		options={[
+			{ label: 'arrow', value: 'arrow' },
+			{ label: 'triangle', value: 'triangle' },
+			{ label: 'circle', value: 'circle' },
+			{ label: 'circle-stroke', value: 'circle-stroke' },
+			{ label: 'dot', value: 'dot' },
+			{ label: 'line', value: 'line' }
+		]}
+		bind:value={settings.arrow}
+		menuIcon=""
+		stepper
+		dense
+	/>
+</div>
diff --git a/docs/src/lib/components/controls/ElkPlaygroundControls.svelte b/docs/src/lib/components/controls/ElkPlaygroundControls.svelte
new file mode 100644
index 000000000..78d2401b6
--- /dev/null
+++ b/docs/src/lib/components/controls/ElkPlaygroundControls.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Field, MenuField, Switch } from 'svelte-ux';
+
+	interface Props {
+		selectedGraphValue: string;
+		showSettings: boolean;
+	}
+
+	let { selectedGraphValue = $bindable(), showSettings = $bindable() }: Props = $props();
+</script>
+
+<div class="flex justify-end gap-2 items-end mb-2">
+	<MenuField
+		label="Graph"
+		options={[
+			{ label: 'Simple', value: 'simple' },
+			{ label: 'Medium', value: 'medium' },
+			{ label: 'Large', value: 'large' },
+			{ label: 'Les Misérables', value: 'miserables' },
+			{ label: 'Cluster (compound)', value: 'cluster' },
+			{ label: 'Disjoint', value: 'disjoint-graph' },
+			{ label: 'TCP State', value: 'tcp-state' },
+			{ label: 'Software User Flow', value: 'software-user-flow' },
+			{ label: 'Generated (simple)', value: 'simple-generated' },
+			{ label: 'Generated (complex)', value: 'complex-generated' }
+		]}
+		bind:value={selectedGraphValue}
+		menuIcon=""
+		dense
+		stepper
+		class="w-64"
+	/>
+
+	<Field label="Settings" labelPlacement="inset" let:id dense>
+		<Switch
+			checked={showSettings}
+			on:change={() => (showSettings = !showSettings)}
+			{id}
+			size="md"
+		/>
+	</Field>
+</div>
diff --git a/docs/src/lib/components/controls/ElkSettingsControls.svelte b/docs/src/lib/components/controls/ElkSettingsControls.svelte
new file mode 100644
index 000000000..5b95779d6
--- /dev/null
+++ b/docs/src/lib/components/controls/ElkSettingsControls.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Field, Switch } from 'svelte-ux';
+
+	interface Props {
+		showSettings: boolean;
+	}
+
+	let { showSettings = $bindable() }: Props = $props();
+</script>
+
+<div class="flex justify-end gap-2 items-end mb-2 screenshot-hidden">
+	<Field label="Settings" labelPlacement="inset" let:id dense>
+		<Switch
+			checked={showSettings}
+			on:change={() => (showSettings = !showSettings)}
+			{id}
+			size="md"
+		/>
+	</Field>
+</div>
diff --git a/packages/layerchart/package.json b/packages/layerchart/package.json
index 984e25522..5ea3d6a4f 100644
--- a/packages/layerchart/package.json
+++ b/packages/layerchart/package.json
@@ -101,6 +101,7 @@
     "d3-shape": "^3.2.0",
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
+    "elkjs": "^0.11.1",
     "memoize": "^10.2.0",
     "runed": "^0.37.1"
   },
diff --git a/packages/layerchart/src/lib/components/graph/Elk.svelte b/packages/layerchart/src/lib/components/graph/Elk.svelte
new file mode 100644
index 000000000..1d21028b5
--- /dev/null
+++ b/packages/layerchart/src/lib/components/graph/Elk.svelte
@@ -0,0 +1,272 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+  import type { LayoutOptions, ElkNode } from 'elkjs/lib/elk.bundled.js';
+
+  import type {
+    ElkInputData,
+    ElkLayoutNode,
+    ElkLayoutEdge,
+    ElkLayoutResult,
+  } from '$lib/utils/graph/elk.js';
+
+  /**
+   * ELK layout algorithm identifiers.
+   * @see https://eclipse.dev/elk/reference/algorithms.html
+   */
+  export const Algorithm = {
+    layered: 'org.eclipse.elk.layered',
+    mrtree: 'org.eclipse.elk.mrtree',
+    force: 'org.eclipse.elk.force',
+    stress: 'org.eclipse.elk.stress',
+    radial: 'org.eclipse.elk.radial',
+    disco: 'org.eclipse.elk.disco',
+    rectpacking: 'org.eclipse.elk.rectpacking',
+    box: 'org.eclipse.elk.box',
+    fixed: 'org.eclipse.elk.fixed',
+    random: 'org.eclipse.elk.random',
+    sporeOverlap: 'org.eclipse.elk.sporeOverlap',
+    sporeCompaction: 'org.eclipse.elk.sporeCompaction',
+  } as const;
+
+  export const Direction = {
+    'top-bottom': 'DOWN',
+    'bottom-top': 'UP',
+    'left-right': 'RIGHT',
+    'right-left': 'LEFT',
+    down: 'DOWN',
+    up: 'UP',
+    right: 'RIGHT',
+    left: 'LEFT',
+    undefined: 'UNDEFINED',
+  } as const;
+
+  export const EdgeRouting = {
+    polyline: 'POLYLINE',
+    orthogonal: 'ORTHOGONAL',
+    splines: 'SPLINES',
+    undefined: 'UNDEFINED',
+  } as const;
+
+  export const HierarchyHandling = {
+    'include-children': 'INCLUDE_CHILDREN',
+    'separate-children': 'SEPARATE_CHILDREN',
+    inherit: 'INHERIT',
+  } as const;
+
+  /**
+   * Strategies controlling node placement within layers (layered algorithm only).
+   * @see https://eclipse.dev/elk/reference/options/org-eclipse-elk-layered-nodePlacement-strategy.html
+   */
+  export const NodePlacementStrategy = {
+    simple: 'SIMPLE',
+    'interactive': 'INTERACTIVE',
+    'linear-segments': 'LINEAR_SEGMENTS',
+    'brandes-koepf': 'BRANDES_KOEPF',
+    'network-simplex': 'NETWORK_SIMPLEX',
+  } as const;
+
+  export type ElkProps = {
+    /** Data of nodes and edges to build graph */
+    data: ElkInputData;
+
+    /**
+     * Function to extract nodes from data
+     * @default (d: any) => d.nodes
+     */
+    nodes?: (d: any) => any;
+
+    /**
+     * Function to extract node ID from node data
+     * @default (d: any) => d.id
+     */
+    nodeId?: (d: any) => any;
+
+    /**
+     * Function to extract edges from data
+     * @default (d: any) => d.edges
+     */
+    edges?: (d: any) => any;
+
+    /**
+     * Layout algorithm
+     * @default 'layered'
+     */
+    algorithm?: keyof typeof Algorithm;
+
+    /**
+     * Layout direction (mainly relevant for layered/mrtree)
+     * @default 'right'
+     */
+    direction?: keyof typeof Direction;
+
+    /**
+     * Edge routing style
+     * @default undefined (algorithm default)
+     */
+    edgeRouting?: keyof typeof EdgeRouting;
+
+    /**
+     * Hierarchy handling for compound graphs
+     * @default undefined
+     */
+    hierarchyHandling?: keyof typeof HierarchyHandling;
+
+    /**
+     * Node placement strategy (layered algorithm)
+     * @default undefined
+     */
+    nodePlacementStrategy?: keyof typeof NodePlacementStrategy;
+
+    /** Spacing between two adjacent nodes (default 20) */
+    nodeNodeSpacing?: number;
+
+    /** Spacing between two adjacent edges */
+    edgeEdgeSpacing?: number;
+
+    /** Spacing between a node and an adjacent edge */
+    edgeNodeSpacing?: number;
+
+    /** Spacing between adjacent layers (layered algorithm) */
+    layerSpacing?: number;
+
+    /** Spacing between disconnected components */
+    componentSpacing?: number;
+
+    /** Aspect ratio for layouts that support it */
+    aspectRatio?: number;
+
+    /** Whether to layout disconnected components separately */
+    separateConnectedComponents?: boolean;
+
+    /** Padding around the graph (number applied to all sides, or ELK string format) */
+    padding?: number | string;
+
+    /** Default node width if not defined on node @default 100 */
+    nodeWidth?: number;
+
+    /** Default node height if not defined on node @default 50 */
+    nodeHeight?: number;
+
+    /**
+     * Additional raw ELK layout options. Merged on top of the typed props above so
+     * any option not surfaced here can still be configured.
+     * @see https://eclipse.dev/elk/reference/options.html
+     */
+    layoutOptions?: LayoutOptions;
+
+    /** Exposed to access the raw ELK graph result via `bind:graph` */
+    graph?: ElkNode | null;
+
+    /** Exposed to indicate layout is in-flight via `bind:loading` */
+    loading?: boolean;
+
+    children?: Snippet<
+      [
+        {
+          nodes: ElkLayoutNode[];
+          edges: ElkLayoutEdge[];
+          graph: ElkNode | null;
+          loading: boolean;
+        },
+      ]
+    >;
+  };
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { getChartContext } from '$lib/contexts/chart.js';
+  import { elkLayout } from '$lib/utils/graph/elk.js';
+
+  const ctx = getChartContext();
+  ctx.registerComponent({ name: 'Elk', kind: 'composite-mark' });
+
+  let {
+    data,
+    nodes = (d: any) => d.nodes,
+    nodeId = (d: any) => d.id,
+    edges = (d: any) => d.edges,
+    algorithm = 'layered',
+    direction = 'right',
+    edgeRouting,
+    hierarchyHandling,
+    nodePlacementStrategy,
+    nodeNodeSpacing,
+    edgeEdgeSpacing,
+    edgeNodeSpacing,
+    layerSpacing,
+    componentSpacing,
+    aspectRatio,
+    separateConnectedComponents,
+    padding,
+    nodeWidth = 100,
+    nodeHeight = 50,
+    layoutOptions,
+    graph: graphProp = $bindable(null),
+    loading: loadingProp = $bindable(false),
+    children,
+  }: ElkProps = $props();
+
+  let result = $state<ElkLayoutResult | null>(null);
+  let loading = $state(false);
+
+  // Re-run layout whenever any input changes
+  $effect(() => {
+    // Track all inputs (`data`, knobs, etc.)
+    const inputs = {
+      data,
+      nodes,
+      nodeId,
+      edges,
+      algorithm,
+      direction,
+      edgeRouting,
+      hierarchyHandling,
+      nodePlacementStrategy,
+      nodeNodeSpacing,
+      edgeEdgeSpacing,
+      edgeNodeSpacing,
+      layerSpacing,
+      componentSpacing,
+      aspectRatio,
+      separateConnectedComponents,
+      padding,
+      nodeWidth,
+      nodeHeight,
+      layoutOptions,
+    };
+
+    if (typeof document === 'undefined' || !data) return;
+
+    let cancelled = false;
+    untrack(() => {
+      loading = true;
+      loadingProp = true;
+    });
+
+    elkLayout(data, inputs)
+      .then((r) => {
+        if (cancelled) return;
+        result = r;
+        graphProp = r.graph;
+        loading = false;
+        loadingProp = false;
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        console.error('[Elk] layout failed:', err);
+        loading = false;
+        loadingProp = false;
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const graphNodes = $derived(result?.nodes ?? []);
+  const graphEdges = $derived(result?.edges ?? []);
+  const graph = $derived(result?.graph ?? null);
+</script>
+
+{@render children?.({ nodes: graphNodes, edges: graphEdges, graph, loading })}
diff --git a/packages/layerchart/src/lib/components/graph/index.ts b/packages/layerchart/src/lib/components/graph/index.ts
index fc97fbd22..ae6d8d449 100644
--- a/packages/layerchart/src/lib/components/graph/index.ts
+++ b/packages/layerchart/src/lib/components/graph/index.ts
@@ -2,6 +2,8 @@ export { default as Chord } from './Chord.svelte';
 export * from './Chord.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Elk } from './Elk.svelte';
+export * from './Elk.svelte';
 export { default as Ribbon } from './Ribbon/Ribbon.svelte';
 export * from './Ribbon/Ribbon.svelte';
 export { default as Sankey } from './Sankey.svelte';
diff --git a/packages/layerchart/src/lib/utils/graph/elk.ts b/packages/layerchart/src/lib/utils/graph/elk.ts
new file mode 100644
index 000000000..fddf45210
--- /dev/null
+++ b/packages/layerchart/src/lib/utils/graph/elk.ts
@@ -0,0 +1,463 @@
+import * as ElkLib from 'elkjs/lib/elk.bundled.js';
+import type {
+  ELK as ElkInstance,
+  ElkNode,
+  ElkExtendedEdge,
+  ElkPoint,
+  LayoutOptions,
+  ELKConstructorArguments,
+} from 'elkjs/lib/elk.bundled.js';
+
+// elkjs exposes its constructor as a CJS default; with NodeNext typings
+// the default may live under `.default` or be the module itself.
+const ElkConstructor = (ElkLib as unknown as {
+  default?: { new (args?: ELKConstructorArguments): ElkInstance };
+}).default ?? (ElkLib as unknown as { new (args?: ELKConstructorArguments): ElkInstance });
+
+import {
+  Algorithm,
+  Direction,
+  EdgeRouting,
+  HierarchyHandling,
+  NodePlacementStrategy,
+  type ElkProps,
+} from '$lib/components/graph/Elk.svelte';
+
+/** Lazy ELK instance (created on first use, must run client-side) */
+let _elk: ElkInstance | undefined;
+function getElk(): ElkInstance {
+  if (!_elk) {
+    _elk = new ElkConstructor();
+  }
+  return _elk;
+}
+
+export type ElkInputNode = {
+  id: string;
+  parent?: string;
+  label?: string;
+  width?: number;
+  height?: number;
+  layoutOptions?: LayoutOptions;
+};
+
+export type ElkInputEdge = {
+  id?: string;
+  source: string;
+  target: string;
+  label?: string;
+};
+
+export type ElkInputData = {
+  nodes: ElkInputNode[];
+  edges: ElkInputEdge[];
+};
+
+/** Flat node returned from layout (absolute coordinates, x/y are center) */
+export type ElkLayoutNode = {
+  id: string;
+  label: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  parent?: string;
+  /** True when this node has children (i.e. is a compound/cluster container) */
+  isCompound: boolean;
+  /** absolute top-left x */
+  x0: number;
+  /** absolute top-left y */
+  y0: number;
+  /** raw ELK node */
+  raw: ElkNode;
+};
+
+/** Flat edge returned from layout */
+export type ElkLayoutEdge = {
+  id: string;
+  /** source node id (matches `v` from Dagre for compatibility) */
+  v: string;
+  /** target node id (matches `w` from Dagre for compatibility) */
+  w: string;
+  source: string;
+  target: string;
+  label?: string;
+  /** Polyline points (absolute) — start, bend points, end. Empty if elk did not produce sections. */
+  points: Array<ElkPoint>;
+  /** Optional label center (absolute) */
+  x?: number;
+  y?: number;
+  /** raw ELK edge */
+  raw: ElkExtendedEdge;
+};
+
+export type ElkLayoutResult = {
+  nodes: ElkLayoutNode[];
+  edges: ElkLayoutEdge[];
+  /** Raw root ELK graph after layout */
+  graph: ElkNode;
+};
+
+/**
+ * Build the ELK input graph from a flat `{ nodes, edges }` representation.
+ * Nodes with a `parent` reference are nested under their parent (compound layout).
+ */
+export function buildElkInput(
+  data: ElkInputData,
+  {
+    nodes = (d: any) => d.nodes,
+    nodeId = (d: any) => d.id,
+    edges = (d: any) => d.edges,
+    nodeWidth = 100,
+    nodeHeight = 50,
+    layoutOptions = {},
+  }: {
+    nodes?: ElkProps['nodes'];
+    nodeId?: ElkProps['nodeId'];
+    edges?: ElkProps['edges'];
+    nodeWidth?: number;
+    nodeHeight?: number;
+    layoutOptions?: LayoutOptions;
+  }
+): ElkNode {
+  const dataNodes: ElkInputNode[] = nodes(data) ?? [];
+  const dataEdges: ElkInputEdge[] = edges(data) ?? [];
+
+  const elkNodes = new Map<string, ElkNode>();
+  for (const n of dataNodes) {
+    const id = nodeId(n);
+    const label = typeof n.label === 'string' ? n.label : id;
+    elkNodes.set(id, {
+      id,
+      width: n.width ?? nodeWidth,
+      height: n.height ?? nodeHeight,
+      labels: [{ text: label }],
+      layoutOptions: n.layoutOptions,
+      children: [],
+      edges: [],
+    });
+  }
+
+  const root: ElkNode = {
+    id: 'root',
+    layoutOptions,
+    children: [],
+    edges: [],
+  };
+
+  // Nest nodes under their parent (or root)
+  for (const n of dataNodes) {
+    const id = nodeId(n);
+    const elkNode = elkNodes.get(id)!;
+    const parent = n.parent && elkNodes.has(n.parent) ? elkNodes.get(n.parent)! : root;
+    parent.children!.push(elkNode);
+  }
+
+  // We deliberately do NOT auto-add padding or label-placement options on compound
+  // nodes — those interfere with ELK's edge routing for sibling/internal edges.
+  // Users render compound labels in their own snippet (typically above the box,
+  // using the `isCompound` flag we expose on each node).
+
+  // Build a parent-id lookup so we can find the lowest common ancestor of an edge's
+  // source and target nodes. ELK requires each edge to live on its LCA when using
+  // `hierarchyHandling=INCLUDE_CHILDREN`; placing them all at the root produces
+  // garbage coordinates for sibling edges inside a compound.
+  const parentOf = new Map<string, string | undefined>();
+  for (const n of dataNodes) {
+    parentOf.set(nodeId(n), n.parent);
+  }
+  function ancestors(id: string): string[] {
+    const chain: string[] = [];
+    let cur: string | undefined = id;
+    while (cur) {
+      chain.push(cur);
+      cur = parentOf.get(cur);
+    }
+    return chain;
+  }
+  function lcaContainer(source: string, target: string): ElkNode {
+    const aChain = ancestors(source);
+    const bSet = new Set(ancestors(target));
+    // Skip the source itself; its enclosing parent is the first candidate.
+    for (let i = 1; i < aChain.length; i++) {
+      if (bSet.has(aChain[i])) {
+        const node = elkNodes.get(aChain[i]);
+        if (node) return node;
+      }
+    }
+    return root;
+  }
+
+  let edgeIdx = 0;
+  for (const e of dataEdges) {
+    const id = e.id ?? `e${edgeIdx++}`;
+    const edge: ElkExtendedEdge = {
+      id,
+      sources: [e.source],
+      targets: [e.target],
+    };
+    if (e.label) {
+      edge.labels = [{ text: e.label, width: 60, height: 16 }];
+    }
+    const container = lcaContainer(e.source, e.target);
+    container.edges!.push(edge);
+  }
+
+  return root;
+}
+
+/**
+ * Algorithms that only place nodes — they either return no edge `sections` or
+ * return sections whose endpoints don't actually connect source to target.
+ * For these we synthesize straight center-to-center polylines instead of
+ * trusting ELK's edge output.
+ */
+const NODE_ONLY_ALGORITHMS = new Set([
+  'org.eclipse.elk.random',
+  'org.eclipse.elk.box',
+  'org.eclipse.elk.rectpacking',
+  'org.eclipse.elk.fixed',
+  'org.eclipse.elk.sporeOverlap',
+  'org.eclipse.elk.sporeCompaction',
+]);
+
+/**
+ * Flatten ELK's hierarchical output into absolute-coordinate nodes/edges.
+ */
+export function processElkLayout(graph: ElkNode): ElkLayoutResult {
+  const nodes: ElkLayoutNode[] = [];
+  const edges: ElkLayoutEdge[] = [];
+
+  const algorithm = graph.layoutOptions?.['elk.algorithm'];
+  const skipSections = algorithm ? NODE_ONLY_ALGORITHMS.has(algorithm) : false;
+
+  function walkNodes(node: ElkNode, parentX: number, parentY: number, parentId?: string) {
+    for (const child of node.children ?? []) {
+      const x0 = parentX + (child.x ?? 0);
+      const y0 = parentY + (child.y ?? 0);
+      const width = child.width ?? 0;
+      const height = child.height ?? 0;
+      const label = child.labels?.[0]?.text ?? child.id;
+
+      nodes.push({
+        id: child.id,
+        label,
+        x: x0 + width / 2,
+        y: y0 + height / 2,
+        width,
+        height,
+        x0,
+        y0,
+        parent: parentId,
+        isCompound: (child.children?.length ?? 0) > 0,
+        raw: child,
+      });
+
+      walkNodes(child, x0, y0, child.id);
+    }
+  }
+
+  function walkEdges(node: ElkNode, parentX: number, parentY: number) {
+    for (const edge of (node.edges ?? []) as ElkExtendedEdge[]) {
+      const points: ElkPoint[] = [];
+      const sections = skipSections ? [] : edge.sections ?? [];
+      for (const section of sections) {
+        if (points.length === 0) {
+          points.push({
+            x: parentX + section.startPoint.x,
+            y: parentY + section.startPoint.y,
+          });
+        }
+        for (const p of section.bendPoints ?? []) {
+          points.push({ x: parentX + p.x, y: parentY + p.y });
+        }
+        points.push({
+          x: parentX + section.endPoint.x,
+          y: parentY + section.endPoint.y,
+        });
+      }
+
+      const labelShape = edge.labels?.[0];
+      const labelX =
+        labelShape?.x != null
+          ? parentX + labelShape.x + (labelShape.width ?? 0) / 2
+          : undefined;
+      const labelY =
+        labelShape?.y != null
+          ? parentY + labelShape.y + (labelShape.height ?? 0) / 2
+          : undefined;
+
+      edges.push({
+        id: edge.id,
+        v: edge.sources[0],
+        w: edge.targets[0],
+        source: edge.sources[0],
+        target: edge.targets[0],
+        label: labelShape?.text,
+        points,
+        x: labelX,
+        y: labelY,
+        raw: edge,
+      });
+    }
+    for (const child of node.children ?? []) {
+      walkEdges(child, parentX + (child.x ?? 0), parentY + (child.y ?? 0));
+    }
+  }
+
+  walkNodes(graph, 0, 0, undefined);
+  walkEdges(graph, 0, 0);
+
+  // For node-only algorithms (and any other case where ELK didn't return
+  // section data) synthesize a straight line between source and target centers.
+  let nodesById: Map<string, ElkLayoutNode> | undefined;
+  for (const edge of edges) {
+    if (edge.points.length > 0) continue;
+    nodesById ??= new Map(nodes.map((n) => [n.id, n]));
+    const source = nodesById.get(edge.source);
+    const target = nodesById.get(edge.target);
+    if (source && target) {
+      edge.points = [
+        { x: source.x, y: source.y },
+        { x: target.x, y: target.y },
+      ];
+    }
+  }
+
+  return { nodes, edges, graph };
+}
+
+/**
+ * Resolve all `ElkProps` knobs into an ELK `layoutOptions` object.
+ */
+export function elkLayoutOptions({
+  algorithm = 'layered',
+  direction = 'right',
+  edgeRouting,
+  hierarchyHandling,
+  nodePlacementStrategy,
+  nodeNodeSpacing,
+  edgeEdgeSpacing,
+  edgeNodeSpacing,
+  layerSpacing,
+  componentSpacing,
+  aspectRatio,
+  separateConnectedComponents,
+  padding,
+  layoutOptions = {},
+}: {
+  algorithm?: ElkProps['algorithm'];
+  direction?: ElkProps['direction'];
+  edgeRouting?: ElkProps['edgeRouting'];
+  hierarchyHandling?: ElkProps['hierarchyHandling'];
+  nodePlacementStrategy?: ElkProps['nodePlacementStrategy'];
+  nodeNodeSpacing?: number;
+  edgeEdgeSpacing?: number;
+  edgeNodeSpacing?: number;
+  layerSpacing?: number;
+  componentSpacing?: number;
+  aspectRatio?: number;
+  separateConnectedComponents?: boolean;
+  padding?: number | string;
+  layoutOptions?: LayoutOptions;
+} = {}): LayoutOptions {
+  const opts: LayoutOptions = {
+    'elk.algorithm': Algorithm[algorithm ?? 'layered'] ?? Algorithm.layered,
+    'elk.direction': Direction[direction ?? 'right'] ?? Direction.right,
+  };
+
+  if (edgeRouting) {
+    opts['elk.edgeRouting'] = EdgeRouting[edgeRouting];
+  }
+  if (hierarchyHandling) {
+    opts['elk.hierarchyHandling'] = HierarchyHandling[hierarchyHandling];
+  }
+  if (nodePlacementStrategy) {
+    opts['elk.layered.nodePlacement.strategy'] = NodePlacementStrategy[nodePlacementStrategy];
+  }
+  if (nodeNodeSpacing != null) {
+    opts['elk.spacing.nodeNode'] = String(nodeNodeSpacing);
+  }
+  if (edgeEdgeSpacing != null) {
+    opts['elk.spacing.edgeEdge'] = String(edgeEdgeSpacing);
+  }
+  if (edgeNodeSpacing != null) {
+    opts['elk.spacing.edgeNode'] = String(edgeNodeSpacing);
+  }
+  if (layerSpacing != null) {
+    opts['elk.layered.spacing.nodeNodeBetweenLayers'] = String(layerSpacing);
+  }
+  if (componentSpacing != null) {
+    opts['elk.spacing.componentComponent'] = String(componentSpacing);
+  }
+  if (aspectRatio != null) {
+    opts['elk.aspectRatio'] = String(aspectRatio);
+  }
+  if (separateConnectedComponents != null) {
+    opts['elk.separateConnectedComponents'] = String(separateConnectedComponents);
+  }
+  if (padding != null) {
+    opts['elk.padding'] =
+      typeof padding === 'number' ? `[top=${padding},left=${padding},bottom=${padding},right=${padding}]` : padding;
+  }
+
+  return { ...opts, ...layoutOptions };
+}
+
+/**
+ * Run ELK layout on the given data and return flattened nodes/edges.
+ */
+export async function elkLayout(
+  data: ElkInputData,
+  props: {
+    nodes?: ElkProps['nodes'];
+    nodeId?: ElkProps['nodeId'];
+    edges?: ElkProps['edges'];
+    nodeWidth?: number;
+    nodeHeight?: number;
+  } & Parameters<typeof elkLayoutOptions>[0] = {}
+): Promise<ElkLayoutResult> {
+  const { nodes, nodeId, edges, nodeWidth, nodeHeight, ...optsArgs } = props;
+  const layoutOptions = elkLayoutOptions(optsArgs);
+  const input = buildElkInput(data, {
+    nodes,
+    nodeId,
+    edges,
+    nodeWidth,
+    nodeHeight,
+    layoutOptions,
+  });
+  const elk = getElk();
+  const result = await elk.layout(input);
+  return processElkLayout(result);
+}
+
+/** Get all upstream predecessor ids for a node */
+export function elkAncestors(
+  edges: ElkLayoutEdge[],
+  nodeId: string,
+  maxDepth = Infinity,
+  currentDepth = 0
+): string[] {
+  if (currentDepth === maxDepth) return [];
+  const predecessors = edges.filter((e) => e.w === nodeId).map((e) => e.v);
+  return [
+    ...predecessors,
+    ...predecessors.flatMap((id) => elkAncestors(edges, id, maxDepth, currentDepth + 1)),
+  ];
+}
+
+/** Get all downstream descendant ids for a node */
+export function elkDescendants(
+  edges: ElkLayoutEdge[],
+  nodeId: string,
+  maxDepth = Infinity,
+  currentDepth = 0
+): string[] {
+  if (currentDepth === maxDepth) return [];
+  const successors = edges.filter((e) => e.v === nodeId).map((e) => e.w);
+  return [
+    ...successors,
+    ...successors.flatMap((id) => elkDescendants(edges, id, maxDepth, currentDepth + 1)),
+  ];
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbcf99253..02dde2945 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -831,6 +831,9 @@ importers:
       d3-time:
         specifier: ^3.1.0
         version: 3.1.0
+      elkjs:
+        specifier: ^0.11.1
+        version: 0.11.1
       memoize:
         specifier: ^10.2.0
         version: 10.2.0
@@ -3781,6 +3784,9 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
+  elkjs@0.11.1:
+    resolution: {integrity: sha512-zxxR9k+rx5ktMwT/FwyLdPCrq7xN6e4VGGHH8hA01vVYKjTFik7nHOxBnAYtrgYUB1RpAiLvA1/U2YraWxyKKg==}
+
   emoji-regex-xs@2.0.1:
     resolution: {integrity: sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==}
     engines: {node: '>=10.0.0'}
@@ -8904,6 +8910,8 @@ snapshots:
 
   duplexer@0.1.2: {}
 
+  elkjs@0.11.1: {}
+
   emoji-regex-xs@2.0.1: {}
 
   emoji-regex@8.0.0: {}

From 654d606c77329f12417be8aaf16746961bb5a2dc Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Fri, 1 May 2026 07:44:00 -0400
Subject: [PATCH 2/2] Add Elk bundle scenario

---
 bundle-analyzer/bundle-scenarios.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/bundle-analyzer/bundle-scenarios.ts b/bundle-analyzer/bundle-scenarios.ts
index da93cfcd8..c99c90747 100644
--- a/bundle-analyzer/bundle-scenarios.ts
+++ b/bundle-analyzer/bundle-scenarios.ts
@@ -409,6 +409,12 @@ export const scenarios: Scenario[] = [
     description: 'Dagre directed graph layout',
     imports: ['Chart', 'Svg', 'Dagre', 'Link', 'Circle', 'Text'],
   },
+  {
+    name: 'elk',
+    group: 'Graph / network',
+    description: 'Elk directed graph layout',
+    imports: ['Chart', 'Svg', 'Elk', 'Spline', 'Rect', 'Group', 'Text'],
+  },
   {
     name: 'sankey',
     group: 'Graph / network',
@@ -1776,6 +1782,7 @@ const INDIVIDUAL_COMPONENTS: string[] = [
   'Contour',
   'Dagre',
   'Density',
+  'Elk',
   'Ellipse',
   'ForceSimulation',
   'Frame',