feat: Add Elk layout component

.changeset/silent-lines-hide.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Add Elk layout component

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',

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"}

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"
 }

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"
 }