# mrblenny/react-flow-chart

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mrblenny-react-flow-chart).**

1,553 stars · 305 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/MrBlenny/react-flow-chart
- Homepage: https://mrblenny.github.io/react-flow-chart/index.html
- awesome-repositories: https://awesome-repositories.com/repository/mrblenny-react-flow-chart.md

## Topics

`diagram` `diagrams` `drag-and-drop` `flowchart` `react` `styled-components` `typescript` `webpack4`

## Description

This library is a declarative React component toolkit for constructing interactive, node-based diagramming interfaces and flow charts. It provides the foundational UI elements required to render draggable nodes and scalable vector graphics paths within a web browser, enabling the creation of complex visual editors and data flow representations.

The library distinguishes itself through a strictly stateless architecture that relies on external state management. By utilizing a controlled input pattern and component injection, it decouples diagram logic from data storage, allowing developers to maintain the source of truth within their own application state. This approach ensures that every visual element, from nodes and ports to the canvas itself, can be fully customized to meet specific design requirements.

The toolkit supports a broad range of interaction capabilities, including gesture-based navigation for panning and zooming across the canvas. It also provides functionality for drawing connections between nodes and includes a read-only mode for scenarios where structural modifications must be restricted. The library is distributed as a collection of reusable components designed for integration into existing React projects.

## Tags

### Web Development

- [Node-Based Diagramming Frameworks](https://awesome-repositories.com/f/web-development/node-based-diagramming-frameworks.md) — Provides a visual interface for connecting nodes with links to represent data flows and complex relationships.
- [Controlled Input Management](https://awesome-repositories.com/f/web-development/controlled-input-management.md) — Implements a controlled input pattern where user interactions trigger external callbacks to maintain the application's source of truth.

### Data & Databases

- [External State Stores](https://awesome-repositories.com/f/data-databases/external-state-stores.md) — Decouples diagram logic from data storage by relying on external state management for all diagram data. ([source](https://github.com/mrblenny/react-flow-chart#readme))

### Graphics & Multimedia

- [Flow Diagram Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/interactive-diagramming-libraries/flow-diagram-libraries.md) — Offers a declarative library for building interactive node-based diagrams and flow charts within React applications. ([source](https://github.com/mrblenny/react-flow-chart#readme))
- [Canvas Coordinate Transformations](https://awesome-repositories.com/f/graphics-multimedia/canvas-coordinate-transformations.md) — Handles canvas panning and zooming by applying CSS transform matrices to the container based on user input.
- [SVG Path Rendering](https://awesome-repositories.com/f/graphics-multimedia/svg-path-rendering.md) — Renders visual connections between nodes using scalable vector graphics paths that update dynamically.
- [Interactive Diagramming Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/interactive-diagramming-libraries.md) — Enables the creation of complex, zoomable, and pannable diagrams for exploring structured information.

### Software Engineering & Architecture

- [Stateful and Stateless Component Separation](https://awesome-repositories.com/f/software-engineering-architecture/stateless-architectures/stateful-and-stateless-component-separation.md) — Utilizes a stateless architecture where all data and interaction handlers are passed down via properties from the parent.

### User Interface & Experience

- [State-Driven UI Rendering](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers/ui-state-recomposition/state-driven-ui-rendering.md) — Ensures visual diagrams remain synchronized with business logic through external state-driven rendering.
- [Component Style Customizations](https://awesome-repositories.com/f/user-interface-experience/component-style-customizations.md) — Allows overriding default visual styles for nodes, ports, and links to meet specific design requirements. ([source](https://github.com/mrblenny/react-flow-chart#readme))
- [Custom Component Injection](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection.md) — Provides a mechanism for injecting custom React components into the diagram structure to define node and link appearance.
- [Gesture Navigation](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/gesture-navigation.md) — Supports gesture-based navigation including panning and zooming via scroll and pinch interactions. ([source](https://github.com/mrblenny/react-flow-chart#readme))
- [Node-Based Logic Interfaces](https://awesome-repositories.com/f/user-interface-experience/node-based-logic-interfaces.md) — Supports building interactive interfaces where users connect blocks to define logic and data processing pipelines.
- [React UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/react-ui-component-libraries.md) — Ships a collection of reusable React components for rendering interactive canvas elements.
- [React Component Canvas Editors](https://awesome-repositories.com/f/user-interface-experience/visual-website-builders/react-component-canvas-editors.md) — Facilitates the development of tailored visual editors by allowing full control over interface element styling.