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, virtualization, or worker-assisted rendering 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

• UML Diagram Example
• Dagre Layout Example
• ELKJS Layout Example
• Connection Waypoints Example
• Background Docs

GitHub and install

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