Quick Start

Get up and running with ngDiagram in minutes. This guide will help you create your first interactive diagram.

Installation

npm install ng-diagram

Note: You can use yarn or pnpm too

Import Styles

Caution

You must import the required styles for the diagram to display correctly. Because the library uses CSS variables, import the stylesheet in your global file (e.g. src/styles.scss), not inside a component.

src/styles.scss

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

Without these styles, the diagram components will not render properly.

Create Your First Diagram

import { Component } from '@angular/core';
import { NgDiagramComponent, initializeModel, provideNgDiagram } from 'ng-diagram';

@Component({
  imports: [NgDiagramComponent],
  providers: [provideNgDiagram()],
  template: ` <ng-diagram [model]="model" /> `,
  styles: `
    :host {
      display: flex;
      height: 300px;
    }
  `,
})
export class AppComponent {
  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: {},
      },
    ],
  });
}

Note

The <ng-diagram> component must be placed inside a container element with an explicitly defined size (e.g. 300px, 100vh, etc.). The diagram will automatically scale to fit the dimensions of its parent container. This approach ensures that the diagram renders correctly and responds to layout changes as expected.

Caution

The <ng-diagram> component must be used within a component or module that registers provideNgDiagram(), which provides the diagram-specific services and state management.

That’s it! You now have a working diagram with default node and edge templates.

What’s Next?

Now that you have a basic diagram working, you can customize it to fit your specific needs. Here are the main areas you can explore:

Customize Your Nodes

Create custom node templates with your own styling, content, and interactive elements:

Learn about Custom Nodes → | See Example →

Create Custom Edges

Design custom edge types with unique visual styles and routing:

Learn about Custom Edges → | See Example →

Add a Palette

Create a drag-and-drop interface for users to add nodes to your diagram:

Learn about Palette → | See Example →

Persistence & State Management

Save and restore your diagram state:

Learn about State Management → | See Example →

---

Ready to dive deeper? Start with Custom Nodes or explore our Examples to see ngDiagram in action!