Skip to main content
Talk to the team

Build interactive diagrams – natively in Angular

Every node is one of your Angular components, styled with CSS. Every change passes through middleware you control.

Quick startLive demo (opens in a new tab)
  • Angular 18 or newer
  • Apache 2.0 open-source license
  • AI-ready docs, skills, and an MCP server

What is ngDiagram?

ngDiagram is an open-source Angular diagram library for interactive diagrams, node-based editors, and workflow editors – where users model a process, wire up a system, or map an organization. Built for Angular 18 or newer, ngDiagram is developed and maintained by Synergy Codes under the Apache 2.0 license.

  • Nodes are your Angular components

    Angular templates, signals, dependency injection, and your own forms, rendered as DOM you can inspect.

  • Styles are CSS variables

    Your tokens and themes apply from day one – no proprietary styling language.

  • Every change passes through middleware

    Validate, modify, or block any update before it reaches the model.

  • Signals by default, your store if you prefer

    initializeModel gives you a signal-based model; implement ModelAdapter to keep the diagram in your own store.

Your first diagram in 3 steps

Copy and paste into an existing Angular app – the same code the quick start guide in the docs walks through.

1

Install

npm install ng-diagram
2

Import the styles once, globally

In the global stylesheet, not in a component. The library is driven by CSS variables. Without this line the diagram renders unstyled.

/* src/styles.scss */
@import 'ng-diagram/styles.css';
3

Render your first diagram

Give the host an explicit height. The diagram fills its container; a container with no height is 0px tall and you see nothing.

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',
      target: '2', targetPort: 'port-left', data: {} },
  ],
});
}

You have a working diagramDraggable nodes, a live edge, and a canvas you can pan and zoom.

Open the quick start guide

Your AI agent already speaks ngDiagram

Agent skills, an official MCP server, and Markdown docs – so your agent works from the real API instead of guessing at one.

Read the Build with AI guide

Start from a template built for your domain

Fork-ready editors, each with a live demo and full source.

Electrical schematics, substation single-line diagrams, AV signal flow, production-line monitoring. The library gives you ports with sides and connection types, floating edges with orthogonal, polyline, or Bézier routing, plus snapping, groups, and a minimap. These templates add SVG symbol libraries, geometry-derived wire junctions, schema-driven properties panels, and SVG or DXF export; the Assembly Line template adds a live data feed with Edit and Monitor modes and threshold-colored KPIs.

Skip to template controls
All templates in the docs

Need a template built for your domain?

Describe the editor you need, and get a tailored version designed and shipped with you.

Ask the ngDiagram team

Make the diagram yours, one example at a time

Runnable Angular diagram examples in the docs – pick the feature you need and start from working code.

Show all examples

Want to know more about ngDiagram?

Learn how ngDiagram works, build a workflow editor step by step, and see what developers have made with it.

Skip to video and article controls

Created by diagramming veterans

ngDiagram is developed and maintained by Synergy Codes (opens in a new tab) – a team with 15+ years of diagramming expertise who:

  • Built production diagram editors for Fortune 500 companies.
  • Delivered 200+ diagram solutions across manufacturing, automation, and analytics.
  • Co-organize Angular meetups and teach at bootcamps and universities.

The same engineers can join your team: onboarding, implementation support, or a complete diagram editor for your domain on a deadline.

Let's talk

Tell us about your project – a schematic editor, a workflow editor, an org chart, or a monitoring canvas. We'll get back to you within 24 hours.

Talk to the team

Teams are already building with ngDiagram

Started testing this for work and lost track of time – spent 5 hours just playing around with it. Since it's built for Angular, I think even devs who never touched diagrams before can jump in and connect stuff pretty easily.
Adam KowalskiSenior Angular Architect
The best thing is it's truly Angular-native. Nodes are just regular Angular components with HTML and CSS, so you stick to what you know – no weird context switching. Makes onboarding way easier and maintenance less painful.
Emil MałańczakSenior Frontend Developer
ngDiagram gives you more control than other libraries. The middleware lets you override basically anything – try doing that with closed-source tools where you can't even peek under the hood.
Wojciech KrzesajSoftware Engineer

You're never stuck alone

Ask on Discord – the people who build and use ngDiagram answer there. Bring a question or share what you are building.

Join Discord (opens in a new tab)

Questions about ngDiagram

Is ngDiagram free and open source?

Yes. ngDiagram is an open-source Angular diagram library released under the Apache 2.0 license, which lets you use it free of charge, including in commercial projects. The source code is public on GitHub in the synergycodes/ng-diagram repository (opens in a new tab).

Which Angular versions does ngDiagram support?

ngDiagram works with Angular 18 or newer: the ng-diagram package on npm lists Angular 18 or higher as a peer dependency. The API stability policy in the docs lists the Angular versions ngDiagram supports, and a new Angular major is added within 2 months of its release. Install ngDiagram with npm install ng-diagram and follow the quick start guide in the docs.

Can I use my own Angular components as nodes in ngDiagram?

Yes. In ngDiagram, a custom node is an Angular component that implements the NgDiagramNodeTemplate interface. You register the component in nodeTemplateMap under a type key, and ngDiagram renders every node of that type with your template. A node template can hold any Angular content, including form controls, images, and buttons.

Can I build a workflow editor or a node-based editor in Angular with ngDiagram?

Yes. ngDiagram gives you the parts of a node-based editor: a drag-and-drop palette, ports, edges with labels, groups, and copy and paste. Every change passes through a middleware pipeline, where your code can inspect, modify, or cancel the change before the model updates. The BPMN Editor in the ngDiagram showcases is a process editor with a drag-and-drop palette and swimlanes built as ngDiagram groups.

Is ngDiagram built specifically for Angular?

Yes. ngDiagram is Angular-first: nodes are Angular components, NgDiagramModelService exposes nodes and edges as signals, and ngDiagram services come through Angular dependency injection. Each diagram gets its own isolated services from provideNgDiagram(), so several independent diagrams can run on one page.

Can ngDiagram render an interactive network graph with pan and zoom?

Yes. ngDiagram includes pan and zoom, a minimap with click-and-drag navigation, and box selection. For large graph visualizations, turn on virtualization: ngDiagram then renders only the nodes and edges inside the current viewport. The docs describe virtualization as a performance option for diagrams with hundreds or thousands of elements.

Can Synergy Codes build a custom diagram editor for my team?

Yes. Synergy Codes develops and maintains ngDiagram and offers consulting for larger implementations. Synergy Codes engineers can help with onboarding and implementation support, or design and ship a domain-specific editor with your team. Describe your project through the ngDiagram contact form.