Skip to content
NgDiagram

Edges

Edges are the connections between nodes in ngDiagram. They represent relationships, data flow, or dependencies between different components in your diagram.

Edge Properties

Section titled “Edge Properties”

Edges have numerous parameters affecting their appearance and behavior. Here are the required properties of an edge:

interface Edge<T = any> {
  id: string; // ID of the edge
  source: string; // ID of the source node
  sourcePort: string; // ID of the port on the source node
  target: string; // ID of the target node
  targetPort: string; // ID of the port on the target node
  data: T; // Custom data associated with the edge
  // ...optional properties
}

Edge API Reference →

Adding Edges to a Diagram

Section titled “Adding Edges to a Diagram”

To add edges to your diagram, include them in the edges array of your model:

import '@angular/compiler';


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


@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  template: `
    <div class="not-content diagram">
      <ng-diagram [model]="model" [config]="config">
        <ng-diagram-background />
      </ng-diagram>
    </div>
  `,
  styles: [
    `
      .diagram {
        display: flex;
        height: var(--ng-diagram-height);
        border: var(--ng-diagram-border);
      }
    `,
  ],
})
export class DiagramComponent {
  config = {
    zoom: {
      zoomToFit: {
        onInit: true,
        padding: 120,
      },
    },
  } satisfies NgDiagramConfig;


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

Default Edge

Section titled “Default Edge”

NgDiagram provides a default edge implementation that handles most common use cases. The default edge:

  • Automatically calculates the path between connected nodes
  • Supports three built-in routing algorithms
  • Can display arrowheads at either end
  • Supports labels for displaying text on edges

Customization

Section titled “Customization”

NgDiagram’s default edges offer several customization options:

  • Custom arrowheads (defined as SVG markers)
  • CSS variable based styling (stroke, hover / selection states etc.)
  • Built-in routing algorithms

import '@angular/compiler';


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


@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  template: `
    <div class="not-content diagram">
      <ng-diagram [config]="config" [model]="model">
        <ng-diagram-background />
      </ng-diagram>
      <svg height="0" width="0">
        <defs>
          <marker
            id="custom-arrowhead"
            markerWidth="10"
            markerHeight="10"
            refX="8"
            refY="5"
            orient="auto"
          >
            <circle cx="5" cy="5" r="4" fill="red" />
          </marker>
        </defs>
      </svg>
    </div>
  `,
  styles: `
    :host {
      --ngd-default-edge-stroke: #cccccc;
      --ngd-default-edge-stroke-hover: gray;
      --ngd-default-edge-stroke-selected: blue;
    }
    .diagram {
      display: flex;
      height: var(--ng-diagram-height);
      border: var(--ng-diagram-border);
    }
  `,
})
export class DiagramComponent {
7 collapsed lines
  config = {
    zoom: {
      zoomToFit: {
        onInit: true,
      },
    },
  } satisfies NgDiagramConfig;


  model = initializeModel({
8 collapsed lines
    nodes: [
      {
        id: '1',
        position: { x: 150, y: 100 },
        data: { label: 'Node 1' },
        rotatable: true,
      },
      { id: '2', position: { x: 500, y: 200 }, data: { label: 'Node 2' } },
    ],
    edges: [
      {
6 collapsed lines
        id: '1',
        source: '1',
        sourcePort: 'port-right',
        target: '2',
        targetPort: 'port-left',
        data: {},
        targetArrowhead: 'custom-arrowhead',
        routing: 'bezier',
      },
    ],
  });
}

CSS Variables

Section titled “CSS Variables”

Default edges can be styled using CSS variables. You can customize these in your global styles:

// Override default edge styling
ng-diagram-base-edge.default-edge {
  --edge-stroke: #334155;
  --edge-stroke-width: 3;
  --edge-stroke-dasharray: 5 5; // Dashed line
  --edge-stroke-transition: stroke 0.2s ease;
}


ng-diagram-base-edge.default-edge:hover:not(.selected) {
  --edge-stroke: #64748b;
}


ng-diagram-base-edge.default-edge.selected {
  --edge-stroke: #3b82f6;
  --edge-stroke-width: 4;
}

Available CSS variables:

  • --edge-stroke - Stroke color
  • --edge-stroke-width - Stroke width
  • --edge-stroke-opacity - Stroke opacity
  • --edge-stroke-dasharray - Stroke dash pattern (e.g., 5 5 for dashed line)
  • --edge-stroke-transition - Transition for stroke changes

The default edge also uses these semantic variables that map to the design system:

  • --ngd-default-edge-stroke - Base stroke color (default state)
  • --ngd-default-edge-stroke-hover - Stroke color on hover
  • --ngd-default-edge-stroke-selected - Stroke color when selected

Available Host Classes

Section titled “Available Host Classes”

The base edge component exposes these classes for styling:

  • .selected - Applied when the edge is selected
  • .temporary - Applied when the edge is being drawn (preview state)

See Edge Selection for more details on customizing selection styles.

Dynamic Styling

Section titled “Dynamic Styling”

For complex or programmatic styling, you can use computed properties with the base edge inputs:

import { Component, computed, input } from '@angular/core';
import {
  NgDiagramBaseEdgeComponent,
  type Edge,
  type NgDiagramEdgeTemplate,
} from 'ng-diagram';


@Component({
  template: `<ng-diagram-base-edge
    [edge]="edge()"
    [stroke]="edgeColor()"
    [strokeWidth]="edgeWidth()"
  />`,
  imports: [NgDiagramBaseEdgeComponent],
})
export class DynamicEdgeComponent implements NgDiagramEdgeTemplate {
  edge = input.required<Edge>();


  edgeColor = computed(() => {
    const edge = this.edge();
    if (edge.selected) return 'yellow';
    if (edge.temporary) return 'gray';
    return 'black';
  });
  edgeWidth = computed(() => (this.edge().selected ? 3 : 2));
}

Use Custom Edges for even more control over edge look and functionality

Custom Edges → | Arrowheads →

Ports

Section titled “Ports”

Ports are connection points on nodes where edges can start or end. Each port has an ID unique within its node. These IDs (along with their parent node IDs) are used to specify the exact position where edges should be attached.

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

Ports →

Routing

Section titled “Routing”

Edges can be routed using three built-in routing algorithms:

  • polyline: Draws a polyline (straight line by default)
  • orthogonal: Draws a series of horizontal and vertical lines
  • bezier: Draws a bezier curve

Routing →

User-Created Edges

Section titled “User-Created Edges”

When users create edges by dragging between ports, you can customize both the temporary edge shown during dragging and the final edge that gets created. This is done through the linking configuration in your diagram’s config.

Customization

Section titled “Customization”

The linking configuration provides two builder functions:

export class MyDiagramComponent {
  model = initializeModel({
    /* ... */
  });


  config: NgDiagramConfig = {
    linking: {
      temporaryEdgeDataBuilder: (defaultEdge) => ({
        ...defaultEdge,
        routing: 'bezier', // Use bezier routing for temporary edge
        type: 'preview', // Use a custom edge template
      }),
      finalEdgeDataBuilder: (defaultEdge) => ({
        ...defaultEdge,
        data: {
          ...defaultEdge.data,
          createdAt: new Date(),
          status: 'active',
        },
        type: 'custom',
        routing: 'orthogonal',
      }),
    },
  };
}

This allows you to:

  • Set different edge types for preview vs final edges
  • Add custom data to newly created edges
  • Apply specific routing algorithms
  • Control the visual appearance and behavior

Read more about global configuration in ngDiagram →

Further reading

Section titled “Further reading”

Labels → Floating Edges →