Getting Started with Foblex Flow

Foblex Flow is a flexible and powerful library for Angular, designed specifically for creating interactive graphs and diagrams. This guide will walk you through the integration of Foblex Flow into your project, enabling you to fully utilize its features.

Installation

To install Foblex Flow, run the following command in your Angular project:

npm install @foblex/flow@12

npm install @foblex/flow

This command will add Foblex Flow to your package.json.

Using Components

Add the f-flow component to your HTML template to get started:

• f-flow component acts as the primary container, managing the layout and interactions of all child visualization components within the flow.

• f-canvas component within f-flow component provides the foundation for placing other components such as nodes and connections.

• f-connection component creates a visual link between fNodeOutput and fNodeInput directives. In this case, it connects a output with fOutputId="1" to an input with fInputId="2".

• fNode directive represents a node in the flow and can be configured using properties like fNodePosition to define its position.

• The fNodeOutput and fNodeInput directives inside the nodes define connection points (outputs and inputs respectively) for establishing connections.

Pro Examples

Explore practical use cases to see Foblex Flow in action:

• Call Center - A streamlined flow example simulating a call flow.

• Scheme Editor - A more advanced example of a fully interactive scheme editor.

• Visual Programming - An example of a visual programming flow.

• DB Management - An example of a database management flow.