The Angular diagram-library problem, and how not to get stranded again

Originally published on the Grafloria engineering blog.

If you maintain an Angular app that draws graphs, there's a decent chance you've lived this story. The most popular Angular-native graph library's top-reacted issue is "Angular 15 not supported" — open for years, twenty-three thumbs up, followed by the same request for 17, 14, and 12 before it. A rendering bug from 2018 is still open. Meanwhile the Stack Overflow history under its tag is install failures on each new Angular major.

To be clear about tone: this is not a dunk. Open-source maintenance is unpaid work, the maintainers gave the community something real, and every library — ours included — is one life-change away from the same curve. The useful question isn't "whose fault", it's: what should an Angular team demand from a diagram dependency so this can't strand them again?

The trap has a shape

Angular's major-version cadence means a UI library that misses two majors becomes uninstallable in new projects (peer-dependency resolution simply refuses), and the workarounds — --legacy-peer-deps, forks, vendoring — each transfer the maintenance burden to you. The other escape hatch we keep seeing is wrapping a React library in Angular, which means shipping two frameworks and bridging every event across the boundary. It works. You will not enjoy it.

Four demands to make of any diagram library

• A peer range that spans majors, on record. Not a README promise — the
  package.json. (Ours currently declares
  ^18.1.0 || ^19.0.0 || ^20.0.0.)

• Proof the examples run, on every release. A gallery of screenshots proves
  nothing about the current version. Every Grafloria demo is executed in CI with real pointer events on every commit — an example that breaks blocks the release. Ask any vendor: what fails your build if a demo breaks?

• A framework-agnostic core. If the engine has no framework dependency, the
  Angular binding is a thin layer that's cheap to keep current — and if the worst happens, your diagram logic survives a framework migration. Our Angular layer is components and signals over the same engine the React, Vue and vanilla builds use.

• Full source under a real license. MIT means the ultimate fallback — you
  can maintain it — is at least possible. It's the difference between a risk and a cliff.

What Angular-native actually looks like now

Signal-based two-way bindings, templates for custom nodes, zoneless-verified — no wrappers around another framework's runtime:

import { Component } from '@angular/core';
import { DiagramCanvasComponent } from '@grafloria/angular';

@Component({
  selector: 'app-flow',
  imports: [DiagramCanvasComponent],
  template: `

  `,
})
export class FlowComponent {
  nodes = [
    { id: 'a', position: { x: 60, y: 80 },  size: { width: 180, height: 80 }, data: { label: 'Start' } },
    { id: 'b', position: { x: 380, y: 80 }, size: { width: 180, height: 80 }, data: { label: 'Ship' } },
  ];
  edges = [{ id: 'e1', source: 'a', target: 'b' }];
}

Drag, connect, pan/zoom, minimap, ⌘Z — wired. Every gallery demo exists as a real Angular component with source shown: the Angular demos.

Ten-minute start: the Angular tutorial · the honest shortlist including ngx-vflow and the commercial suites: alternatives.

Grafloria is an MIT-licensed diagram engine for React, Angular, Vue and plain JavaScript — grafloria.com. If this post was useful, the demo gallery is where the ideas live as running code.