Arrowheads

Arrowheads in NgDiagram are visual markers that indicate the start or end of the edge. They are implemented using SVG markers and can be applied to either the source end (sourceArrowhead) or target end (targetArrowhead) of an edge.

Default Arrowhead

NgDiagram provides a built-in arrowhead called ng-diagram-arrow that can be used out of the box. This default arrowhead is a simple triangular arrow that adapts to the edge’s stroke color.

To use the default arrowhead, specify it in your edge configuration:

1
    edges: [
2
      {
3
        targetArrowhead: 'ng-diagram-arrow',
7 collapsed lines
4
        id: '1',
5
        source: '1',
6
        sourcePort: 'port-right',
7
        target: '2',
8
        targetPort: 'port-left',
9
        data: {},
10
        routing: 'straight',
11
      },
12
      {
13
        sourceArrowhead: 'ng-diagram-arrow',
14
        targetArrowhead: 'ng-diagram-arrow',
7 collapsed lines
15
        id: '2',
16
        source: '3',
17
        sourcePort: 'port-right',
18
        target: '4',
19
        targetPort: 'port-left',
20
        data: {},
21
        routing: 'straight',
22
      },
23
    ],
24
  });

Custom Arrowhead

You can create custom arrowheads by defining SVG markers with unique IDs. Custom arrowheads allow you to create distinctive visual styles that match your application’s design requirements.

Custom arrowheads need to be defined as SVG <marker> elements within a <defs> section. Each marker needs a unique ID that you’ll reference in your edge configuration:

1
@Component({
2
  selector: 'custom-arrowheads',
3
  template: `
4
    <svg height="0" width="0">
5
      <defs>
6
        <!-- Square Arrowhead -->
7
        <marker
8
          id="square-arrowhead"
9
          markerWidth="10"
10
          markerHeight="10"
11
          refX="8"
12
          refY="5"
13
          orient="auto"
14
        >
15
          <rect
16
            x="1"
17
            y="1"
18
            width="8"
19
            height="8"
20
            fill="context-stroke"
21
            stroke="context-stroke"
22
          />
23
        </marker>
24

25
        <!-- Open Arrow Arrowhead -->
26
        <marker
27
          id="open-arrow"
28
          markerWidth="10"
29
          markerHeight="10"
30
          refX="8"
31
          refY="5"
32
          orient="auto"
33
        >
34
          <path
35
            d="M 2 2 L 8 5 L 2 8"
36
            fill="none"
37
            stroke="context-stroke"
38
            stroke-width="2"
39
            stroke-linecap="round"
40
            stroke-linejoin="round"
41
          />
42
        </marker>
43

44
        <!-- Circle Arrowhead -->
45
        <marker
46
          id="circle-arrowhead"
47
          markerWidth="8"
48
          markerHeight="8"
49
          refX="6"
50
          refY="4"
51
          orient="auto"
52
        >
53
          <circle cx="4" cy="4" r="3" fill="context-stroke" />
54
        </marker>
55
      </defs>
56
    </svg>
57
  `,
58
})
59
export class CustomArrowheadsComponent {}

When marker is defined in the SVG <defs> section, it can be referenced in your edge configuration to apply the custom arrowhead to the edge.

1
@Component({
2
  imports: [NgDiagramComponent, CustomArrowheadsComponent],
3
  providers: [provideNgDiagram()],
4
  template: `
5
    <ng-diagram [model]="model" />
6
    <custom-arrowheads />
7
  `,
7 collapsed lines
8
  styles: `
9
    :host {
10
      flex: 1;
11
      display: flex;
12
      height: 100%;
13
    }
14
  `,
15
})
16
export class CustomArrowheadDiagram {
17
  model = initializeModel({
35 collapsed lines
18
    metadata: {
19
      viewport: { x: 100, y: 0, scale: 0.8 },
20
    },
21
    nodes: [
22
      {
23
        id: 'square',
24
        position: { x: 50, y: 50 },
25
        data: { label: 'Square' },
26
      },
27
      {
28
        id: 'square-target',
29
        position: { x: 400, y: 50 },
30
        data: { label: 'Target' },
31
      },
32
      {
33
        id: 'open-arrow',
34
        position: { x: 50, y: 150 },
35
        data: { label: 'Open Arrow' },
36
      },
37
      {
38
        id: 'open-arrow-target',
39
        position: { x: 400, y: 150 },
40
        data: { label: 'Target' },
41
      },
42
      {
43
        id: 'circle',
44
        position: { x: 50, y: 250 },
45
        data: { label: 'Circle' },
46
      },
47
      {
48
        id: 'circle-target',
49
        position: { x: 400, y: 250 },
50
        data: { label: 'Target' },
51
      },
52
    ],
53
    edges: [
54
      {
55
        targetArrowhead: 'square-arrowhead',
6 collapsed lines
56
        id: '1',
57
        source: 'square',
58
        target: 'square-target',
59
        sourcePort: 'port-right',
60
        targetPort: 'port-left',
61
        data: {},
62
      },
63
      {
64
        targetArrowhead: 'open-arrow',
6 collapsed lines
65
        id: '2',
66
        source: 'open-arrow',
67
        target: 'open-arrow-target',
68
        sourcePort: 'port-right',
69
        targetPort: 'port-left',
70
        data: {},
71
      },
72
      {
73
        targetArrowhead: 'circle-arrowhead',
6 collapsed lines
74
        id: '3',
75
        source: 'circle',
76
        target: 'circle-target',
77
        sourcePort: 'port-right',
78
        targetPort: 'port-left',
79
        data: {},
80
      },
81
    ],
82
  });
83
}

See <marker> documentation on MDN for more details.

Overriding arrowheads in Custom Edges

When implementing custom edges, you can override the default arrowhead with a custom one by specifying the sourceArrowhead and targetArrowhead inputs of NgDiagramBaseEdgeComponent. Thanks to it you don’t have to specify the arrowhead in the data of each edge.

Custom Edges See how to implement custom edges