$ show bpmn-io/diagram-js
diagram-js is a modular, extensible JavaScript library for building interactive web-based diagram editors. It provides the foundational infrastructure—an event-driven architecture via EventBus, a command pattern with full undo/redo support via CommandStack, and a DI container (didi) for composing features as independent modules. The codebase includes core services (Canvas, ElementRegistry, GraphicsFactory) for managing SVG rendering, hit testing, and element lifecycle, along with a rich set of interaction features: drag-and-drop creation/move/resize/connect, snapping, grid snapping, auto-resize, auto-place, bendpoint editing, lasso selection, space tool, popup menus, context pads, palettes, search, overlays, copy/paste, and keyboard bindings. It is designed for downstream domain-specific editors (e.g., bpmn-js, dmn-js) which extend it via provider interfaces and rule systems. The library is well-tested with an extensive suite using Mocha/Chai/Sinon and runs on modern browsers. Its architecture emphasizes decoupling, extensibility, and reusable patterns.
The LLM identified 3 files worth highlighting for reuse:
A generic, priority-based pub/sub event system. Supports listener registration with priority, 'once' listeners, event propagation stopping, and default prevention. Includes error handling with hooks for rethrowing or logging. The implementation is clean, self-contained (no internal imports beyond min-dash utilities), and can be extracted as a standalone event bus for any JavaScript application requiring decoupled communication.
Implements the command pattern for reversible operations. Manages a stack of executed commands, supports undo/redo with lifecycle events (preExecute, postExecute, revert, etc.), command grouping, and atomic execution protection (no nested commands). It is self-contained, depending only on the EventBus for event dispatching and min-dash utilities. Could be reused as a standalone undo/redo engine in any application.
An orthogonal (Manhattan) connection router that computes paths between two points with rectangular obstacles. Handles start/end points that may lie on shapes, computes minimal bends, and provides a repair strategy when endpoints move. The algorithm is non-trivial and well-structured, with clear separation of concerns (route computation, path repair, obstacle avoidance). Though it uses diagram-js internal types, the core logic is self-contained and could be extracted with minimal adaptation for other graph layout needs.