Architecture
ngDiagram follows a layered architecture that separates concerns and enables extensibility. This design makes it easy to understand, customize, and extend for your specific needs.
1. Components Layer
Section titled “1. Components Layer”The user-facing components that render the diagram and handle user interactions:
- ng-diagram: Main component that renders the entire diagram, handles user interactions, and orchestrates all functionality
- ng-diagram-background: Background component that renders the diagram’s background grid
- ng-diagram-resize-adornment and ng-diagram-rotate-adornment: Utility components that can be embedded in custom node templates to provide resize and rotation functionality
- ng-diagram-palette-item: Drag and drop component that can be placed anywhere in your application to create palette functionality
- ng-diagram-palette-item-preview: Preview component that shows a visual representation of palette items during drag operations
- ng-diagram-base-edge: Foundation component for building custom edge templates with advanced styling and behavior
- base-edge-label: Base component for creating custom edge labels with consistent styling and positioning
- ng-diagram-port: Port component that defines connection points on nodes for edge connections
2. Service Layer
Section titled “2. Service Layer”Specialized services provide different levels of control and functionality:
- NgDiagramService: Core service providing middleware management, routing management, and transaction handling
- NgDiagramModelService: Handles model operations including node/edge updates, spatial queries, and data access
- NgDiagramViewportService: Manages viewport state with reactive signals for position, scale, and coordinate transformations
- NgDiagramSelectionService: Manages selection state with methods for selecting/deselecting nodes and edges
- NgDiagramNodeService: Provides node-specific operations
- NgDiagramGroupsService: Manages group node operations such as member management
- NgDiagramClipboardService: Manages copy/paste operations for diagram elements
All services are provided through provideNgDiagram(), allowing multiple diagrams on the same page to maintain their own isolated state and behavior.
3. Command System
Section titled “3. Command System”Commands provide precise instructions for what needs to be done in the diagram. This system ensures data consistency and enables powerful features:
- Atomic Operations: Each command represents a single, well-defined action that can be executed, undone, or redone
- Transaction Support: Commands can be grouped into transactions for atomic execution, ensuring data consistency
- Extensible: Custom commands can be added for specific use cases, enabling domain-specific operations
4. Middleware System
Section titled “4. Middleware System”Middleware intercepts between the engine and state, enabling behavior extension without modifying core code:
- Plugin Architecture: Add, remove, or modify behaviors without changing core code, making the system highly extensible
- Processing Pipeline: Middleware processes data transformations in sequence, allowing for complex business logic
- Configurable: Each middleware can be enabled/disabled and configured at runtime, providing flexibility
5. Data Model
Section titled “5. Data Model”The foundation that stores diagram state and provides the data layer:
- Nodes: Visual elements with position, data, and behavior that represent entities in your diagram
- Edges: Connections between nodes with routing and styling that represent relationships
- Metadata: Viewport state, middleware configurations, and other settings that control diagram behavior
The default Signal Model uses Angular signals for reactive state management, providing excellent performance and real-time updates. For advanced use cases, custom model adapters can integrate with external data sources like databases or APIs.