Skip to content

feat: Integrate ELKjs for automatic diagram layout #54

@lornakelly

Description

@lornakelly

Description

Integrate ELKjs as the auto-layout engine for the diagram.

Motivation

ELKjs will calculate meaningful positions for nodes and edges automatically, making the diagram readable for any workflow.

Proposed Implementation

  • The implementation should be framework-agnostic and sit outside the React Flow layer.
  • It needs nodes, edges, node dimensions, and parent/child relationships as input
  • For this first iteration, out of the box ELK behavior is sufficient - no custom layout configuration is required.
  • Replace previous hardcoded positions in array with ELK calculated positions

Definition of Done

  • Implementation: Fully implemented according to the Serverless Workflow spec.
  • Unit Tests: Comprehensive unit tests are included and passing.
  • Integration Tests: Verified within the monorepo and target environments (Web/VS Code).
  • Documentation: Updated README.md, ADRs, or official docs.
  • Performance: No significant regression in editor responsiveness.
  • Accessibility: UI changes comply with accessibility standards.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions