ngDiagram

ngDiagram is the diagramming layer for your Angular application. It gives Angular teams composable building blocks — nodes with ports, edges, nested groups — instead of a black-box canvas you configure from the outside and hope it bends the way you need.

Diagram elements are ordinary Angular components: you write them in HTML, style them with CSS, wire them with dependency injection, and override any built-in behavior through the middleware pipeline without forking the library. Drag & drop, multi-select, resize, pan & zoom, copy-paste and a minimap ship out of the box, with signal-based change detection and viewport virtualization to keep large diagrams responsive.

Apache 2.0, zero external dependencies, and an MCP server so the AI tools your team already uses know the API.