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 Node

Learn how to create a custom node with your own template and form controls.

View Example →

Custom Edge

Create custom edges with unique visual styles and interactive elements, including labeled edges and wave-shaped connections.

View Example →

Custom Model

Implement a custom model that persists data directly to localStorage with automatic synchronization.

View Example →

Custom Ports

Customize port appearance and behavior with styling, positioning, and connection type configuration.

View Example →

Context Menu

Implement a context menu that adapts its options based on whether a node or the diagram background is clicked.

View Example →

Properties Sidebar

Build an interactive properties panel that updates when nodes are selected and allows real-time editing of attributes.

View Example →

Download Image

Export the current flow as a PNG image using the html-to-image library with proper bounding box calculation.

View Example →

Save Persistence

Implement save and restore functionality to persist diagram state to local storage.

View Example →

Layout Integration

Integrate external layout libraries like ELK.js for advanced automatic diagram layouts with edge routing.

View Example →

Custom Middleware

Create a custom middleware that implements read-only functionality by intercepting state changes.

View Example →

Angular Material Node

Learn how to integrate Angular Material components within your custom nodes.

View Example →

Performance Test

Explore the performance capabilities with 500 nodes arranged in a grid with almost 500 connections.

View Example →