Custom Node
Learn how to create a custom node with your own template and form controls.
Examples
Explore these examples to learn how to implement various features in ngDiagram. Each example includes a live demo and full source code to help you get started quickly.
Custom Edge
Create custom edges with unique visual styles and interactive elements, including labeled edges and wave-shaped connections.
Custom Model
Implement a custom model that persists data directly to localStorage with automatic synchronization.
Custom Ports
Customize port appearance and behavior with styling, positioning, and connection type configuration.
Context Menu
Implement a context menu that adapts its options based on whether a node or the diagram background is clicked.
Properties Sidebar
Build an interactive properties panel that updates when nodes are selected and allows real-time editing of attributes.
Download Image
Export the current flow as a PNG image using the html-to-image library with proper bounding box calculation.
Save Persistence
Implement save and restore functionality to persist diagram state to local storage.
Layout Integration
Integrate external layout libraries like ELK.js for advanced automatic diagram layouts with edge routing.
Custom Middleware
Create a custom middleware that implements read-only functionality by intercepting state changes.
Angular Material Node
Learn how to integrate Angular Material components within your custom nodes.
Performance Test
Explore the performance capabilities with 500 nodes arranged in a grid with almost 500 connections.
Landing Page Diagram
Demonstrates the library's capabilities and integration with external libraries like charts in real-case scenario.