Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/foblex/f-flow

Foblex Flow - is an Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.
https://github.com/foblex/f-flow

angular drag-and-drop drag-nodes dynamic-flow dynamic-graph flow flowchart graph javascript node-based-ui typescript

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/foblex/f-flow
Owner: Foblex
License: mit
Created: 2024-03-11T17:37:14.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-10-25T09:40:45.000Z (19 days ago)
Last Synced: 2024-10-29T20:23:56.724Z (15 days ago)
Topics: angular, drag-and-drop, drag-nodes, dynamic-flow, dynamic-graph, flow, flowchart, graph, javascript, node-based-ui, typescript
Language: TypeScript
Homepage: https://flow.foblex.com/
Size: 66 MB
Stars: 79
Watchers: 5
Forks: 15
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

## Welcome to Foblex Flow

Foblex Flow is an [Angular](https://angular.dev/) library built to simplify the creation and management of dynamic, interactive flows.
Whether you're developing complex systems or lightweight visualizations, Foblex Flow provides a robust set of tools to help automate node manipulation and inter-node connections with ease. It's fully compatible with Angular 12+, Server-Side Rendering (SSR), and the Composition API.

### Examples

Explore practical use cases to see Foblex Flow in action:

- [Call Center](https://github.com/Foblex/f-flow-example) - A streamlined flow example simulating a call flow.

- [Scheme Editor](https://github.com/Foblex/f-scheme-editor) - A more advanced example of a fully interactive scheme editor.

- [Visual Programming](https://flow.foblex.com/examples/f-visual-programming-flow/) - An example of a visual programming flow.

- [DB Management](https://flow.foblex.com/examples/f-db-management-flow/) - An example of a database management flow.

### Features

1. **Node and Connection Creation:** Dynamically generate and manipulate nodes and their connections.
2. **Event-Driven Architecture:** Built-in events for nodes and connections to allow seamless interaction handling.
3. **Reassign Connections:** Easily reassign connections between nodes, allowing for flexible flow adjustments.
4. **Custom Templates:** Fully customizable node and connection templates for tailored visual representation.
5. **Drag-and-Drop:** Simplified drag-and-drop functionality for intuitive flow manipulation.
6. **Zoom and Pan Support:** Explore large flows with smooth zooming and panning controls.

### Getting Started and Documentation

For a comprehensive guide on how to install, configure, and use Foblex Flow in your Angular project, visit our [Documentation](https://flow.foblex.com/docs/get-started).

### Installation

To add Foblex Flow to your project, use the following npm command:

```bash
npm install @foblex/flow
```

### Usage Example

Here’s a simple example of how you can use Foblex Flow to create draggable nodes and connections:

```html

Drag me

```

### Community and Support

For questions, feedback, and support, visit the [Foblex Portal](https://flow.foblex.com/) to connect with the community and the development team.
You can also report [issues](https://github.com/Foblex/flow/issues) and request [features](https://github.com/Foblex/flow/discussions) on the [GitHub repository](https://github.com/Foblex/flow).

### License

This library is available for use under the [MIT License](./LICENSE).

For more information please contact our [support](mailto:[email protected]).