$ show swimlane/ngx-graph
ngx-graph is an Angular library for rendering directed acyclic graphs (DAG) and other graph structures using SVG. It provides a standalone GraphComponent with signal-based inputs and outputs, supporting multiple built-in layout engines (Dagre, DagreCluster, DagreNodesOnly, D3 force-directed, Cola force-directed) and custom layouts via a Layout interface. The component handles viewport transformations (pan, zoom), node dragging, minimap, and rich layout morph animations between graph updates. The architecture centers on a flexible layout service pattern where each layout is a class implementing run/updateEdge/hooks, and the GraphComponent orchestrates layout calculations, SVG rendering, and interaction. The codebase demonstrates modern Angular practices (signals, standalone components, OnPush change detection) and includes comprehensive test coverage. It is maintained by Swimlane with regular releases and extensive documentation via Storybook.
The LLM identified 2 files worth highlighting for reuse:
Provides a set of pure functions for computing edge polylines (orthogonal Manhattan, spline-style smooth, straight) for drag-time updates across multiple layout engines (Dagre, ELK). Includes rank/order axis mapping, port point calculation, and style inference from existing polylines. Self-contained with no internal library dependencies, making it extractable as a standalone geometry utility.
Defines typed configuration interfaces (GraphLayoutTransition, ViewportTranslationTransition, LayoutTransitionEffect) with deep-merge functions (mergeGraphLayoutTransition, mergeViewportTransition, mergeLayoutEffect) that combine partial user input with defaults. Demonstrates a clean, type-safe pattern for configuring complex animated transitions that could be reused in any Angular library requiring gradual feature enablement.