Angular Diagram Library

Foblex Flow is not a charting package or a static SVG helper. It is an Angular diagram library for interactive, editable graph UIs. That matters when your users are not just viewing relationships, but actively creating, connecting, moving, and organizing diagram elements.

You can still start small. A simple diagram editor only needs the core flow primitives, while features like minimap, waypoints, alignment, caching, or virtualization stay optional.

When to use it

Use it for Angular diagram interfaces such as:

custom architecture diagrams,
UML or domain-specific modeling tools,
relationship editors,
interactive system maps,
large canvases with draggable connected elements.

Why it differs from generic diagram widgets

The core path is small enough for normal Angular product screens, not only advanced graph tools.
Nodes can contain real Angular UI, not only labels and icons.
Connections are first-class and support markers, content, and editable routing.
Users get editor behaviors such as zoom, selection, minimap, and snapping.
You can define domain-specific rules instead of accepting a fixed diagram grammar.

Key capabilities

Node, group, connector, and connection primitives
Multiple connection types and explicit routing controls
Magnetic alignment and spacing helpers
Connection waypoints for manual path shaping
Programmatic viewport controls for large diagrams

Related docs and examples

GitHub and install

For Nx workspaces:

Or install it manually with the required companion packages:

If you want layout engines on top of the core diagram surface:

or:

If your app already owns Flow styling, both layout packages also support --skipTheme.

Use Dagre for lighter hierarchical layouts and ELK.js when you need a richer algorithm set and more tuning options.

If you need a diagram surface that still behaves like an Angular product screen, Foblex Flow is a better fit than a static renderer.