An Angular library for building interactive diagrams, node-based editors, and visual programming interfaces with a reactive, plugin-based architecture.
ng-diagram is an open-source Angular library for creating rich, interactive diagramming experiences. It provides a complete toolkit to build everything from simple flow diagrams to advanced node-based editors and visual programming interfaces. The library is designed with Angular and TypeScript, offering a flexible, high-performance solution for diagramming applications.
Angular developers building applications that require interactive diagrams, visual editors, or node-based interfaces, such as workflow tools, system architecture visualizers, or data flow editors.
Developers choose ng-diagram because it is Angular-first, built on modern Angular features like signals for reactive state management, and offers deep integration with Angular's template system for easy customization. Unlike generic diagramming libraries, it provides a plugin-based architecture and comprehensive tooling specifically designed for the Angular ecosystem.
ngDiagram – An open-source Angular library for creating rich, interactive diagramming experiences. Designed for flexibility and performance, it lets you build everything from simple flows to advanced visual editors with ease
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Built specifically for Angular with modern features like signals and templates, ensuring seamless development and optimal performance within Angular applications, as highlighted in the philosophy section.
Allows developers to define custom Angular components for nodes and edges, enabling highly tailored visualizations without leaving the Angular ecosystem, as demonstrated in the customization examples.
Leverages Angular signals for efficient, reactive updates, reducing unnecessary re-renders and improving performance in interactive diagrams, a key feature emphasized in the README.
Includes drag-and-drop palette, group nodes, and a plugin system, providing a complete toolkit out of the box for diagramming applications, as listed in the core components and features.
Requires Angular 18 or higher, locking out projects on older versions and forcing upgrades that might not be feasible for all teams, as stated in the requirements section.
CSS styles must be imported globally, which can lead to conflicts in complex applications and limits component-scoped styling flexibility, as noted in the quick start with a warning.
As an Angular-first library, it cannot be easily used in other frameworks, creating vendor lock-in for teams considering future technology shifts, given its tight integration with Angular.