Build Interactive Node Diagrams in Angular 21 Using ng-diagram

Build Interactive Node Diagrams in Angular 21 Using ng-diagram

H ey devs 👋

While exploring the different libraries for Angular. I saw this awesome library that handles the visual workflows, node graphs, flowcharts, and architecture diagrams. Instead of building everything from scratch, libraries like ng-diagram make it easy to create interactive diagrams inside Angular apps.

In this article, we will build a simple interactive diagram demo using Angular 21 and ng-diagram, where users can drag nodes and connect them visually.

Explore more about ng-Diagram by clicking here 🔗

Not a Medium member? You can read the full article for free by clicking here 🔗

Step 1: Install the ng-diagram library

npm install ng-diagram

Step 2:

In the global styles.

@import 'ng-diagram/styles.css';

Note: Make sure the style will be imported in the global style file. Without these styles, the diagram components will not render properly. Because the library uses CSS variables

Step 3:

Define the <ng-diagram> selector in your component. In our example i’m using in the app.html

<ng-diagram [model]="model" />

Step 4:

In the component.ts file, you need to define the model and provide the provideNgDiagram() in the providers and NgDiagramComponent in the imports.

import { Component, ElementRef, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { initializeModel, ModelAdapter, NgDiagramComponent, provideNgDiagram } from 'ng-diagram';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, NgDiagramComponent],
  providers : [ provideNgDiagram()],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  protected readonly title = signal('remoteApp');

  protected readonly model = initializeModel({
    nodes: [
      { id: '1', position: { x: 100, y: 150 }, data: { label: 'Node 1' } },
      { id: '2', position: { x: 400, y: 150 }, data: { label: 'Node 2' } },
    ],
    edges: [
      {
        id: '1',
        source: '1',
        sourcePort: 'port-right',
        targetPort: 'port-left',
        target: '2',
        data: {},
      },
    ],
  });
}

• initializeModel — creates a model adapter with initial nodes, edges, and metadata.
• nodes — Array of nodes in the diagram
• edges—Interface representing an edge (connection) between nodes in the flow diagram
• metadata — Metadata associated with the diagram

source will define which nodes need to connect with which node. In the above example, node 1 connected with the node 2 from the port right to the port left as shown in the below screenshot.

Let me know in the comments. We can explore more on how to create a custom component and attach and use it in the flow diagrams.

Want to explore the code in detail or try it out locally? Check out the full working example on GitHub: 👉 Source Code: ng-diagram

Thanks for reading! If this was helpful, consider clapping 👏 and following for more full-stack tips. Got questions or suggestions? Drop them in the comments below!

✍️ Author: **Vetriselvan Panneerselvam**

👨‍💻 Full Stack Developer | 💡 Code Enthusiast | 📚 Lifelong Learner | ✍️ Tech Blogger | 🌍 Freelance Developer