Integrate ELKjs for automatic diagram layout

[handreyrc]

Closes #54

Summary

This PR replaces the dummy auto-layout placeholder for an actual layout engine capable of layout nodes and edges.

Changes

• Added latest ELKjs library as a dependency.
• Added core function to consume ELK layout workers as an asynchronous operation.
• Replaced dummy layout implemention in autoLayout.ts for an actual implementation that takes react flow nodes and edges, transforms it to elkGraph, calculate the layout then applies it back to react flow nodes and edges.
• Integrated diagramBuilder and auto-layout in the Diagram component in order to render layouted workflows.
• Tests for graph manipulation and auto-layout integration.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Integrates ELK-based auto-layout into the diagram editor and expands test coverage around layout graph conversion, application, and error handling.

Changes:

• Add elkjs dependency and introduce processElkLayout core helper.
• Replace the previous placeholder auto-layout with ELK graph building + layout application (including edge bendpoints).
• Update Diagram rendering/tests to use ReactFlowProvider and add extensive layout-focused tests.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds elkjs to the workspace catalog for consistent versioning.
packages/serverless-workflow-diagram-editor/package.json	Consumes elkjs from the workspace catalog.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Re-exports new ELK layout helper from core.
packages/serverless-workflow-diagram-editor/src/core/elkjs.ts	Adds processElkLayout wrapper around ELK with error handling.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/autoLayout.ts	Implements ELK graph conversion, layout application, and bendpoint mapping.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts	Stops applying auto-layout inside the builder; returns raw nodes/edges.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Applies auto-layout asynchronously on model changes and fits view.
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Adds ReactFlowProvider to support useReactFlow() usage.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx	Wraps Diagram with ReactFlowProvider in tests.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts	Replaces old placeholder assertions with detailed auto-layout unit/integration coverage.
packages/serverless-workflow-diagram-editor/tests/core/elkjs.test.ts	Adds unit tests for processElkLayout success and error scenarios.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[fantonangeli]

@handreyrc I left some comment. Please let me know what you think

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[handreyrc]

@fantonangeli @kumaradityaraj,

This PR is ready for reviews again.

Thanks!

[Copilot]

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 7 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[kumaradityaraj]

LGTM

[handreyrc]

@ricardozanini,

If do not have any consideration, this PR is good enouth to be merged!

Thanks