# alyssaxuu/flowy

**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/alyssaxuu-flowy).**

12,001 stars · 1,047 forks · JavaScript · mit

## Links

- GitHub: https://github.com/alyssaxuu/flowy
- awesome-repositories: https://awesome-repositories.com/repository/alyssaxuu-flowy.md

## Topics

`diagrams` `drag-and-drop` `engine` `flowchart` `javascript` `javascript-library` `marketing` `marketing-automation` `minimal` `zapier`

## Description

Flowy is a JavaScript library designed for building interactive, drag-and-drop flowchart interfaces. It enables the creation of canvas-based environments where users can arrange blocks to design custom logic sequences, decision trees, and visual process maps.

The library provides a structured approach to diagramming by organizing elements into a hierarchical parent-child tree. It features coordinate-based snapping logic to ensure blocks automatically align into organized layouts during user interaction. To support complex system configurations, the tool includes event-driven callback hooks that allow developers to trigger custom logic during the movement and connection of workflow blocks.

The system facilitates the management of diagram data by converting visual arrangements into structured JSON format. This serialization capability allows for the export and import of workflow states, enabling users to save their progress and reload diagrams for future modification.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Enables the creation of interactive, drag-and-drop flowchart interfaces where users arrange blocks on a canvas. ([source](https://github.com/alyssaxuu/flowy#readme))
- [Interactive Diagramming Tools](https://awesome-repositories.com/f/user-interface-experience/interactive-diagramming-tools.md) — Provides a browser-based canvas for building, saving, and reloading structured flowcharts.
- [Visual Component Builders](https://awesome-repositories.com/f/user-interface-experience/visual-component-builders.md) — Provides a canvas-based component for designing logic sequences that serialize into structured JSON data.
- [Visual Editors](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-utilities/visual-editors.md) — Provides a component for mapping sequences and decision trees that converts user actions into structured data.
- [Node Snapping](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems/node-snapping.md) — Provides automatic alignment and snapping logic for positioning nodes on a coordinate grid within a canvas interface.
- [Drag-and-Drop Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-handlers/drag-and-drop-event-callbacks.md) — Provides hooks to execute custom logic during specific phases of drag-and-drop interactions. ([source](https://github.com/alyssaxuu/flowy#readme))

### Web Development

- [Node-Based Diagramming Frameworks](https://awesome-repositories.com/f/web-development/node-based-diagramming-frameworks.md) — Provides a framework for building custom node-based editors with snapping, event triggers, and data serialization.
- [Direct DOM Manipulation](https://awesome-repositories.com/f/web-development/direct-dom-manipulation.md) — Updates the visual interface by directly modifying the DOM in response to user drag-and-drop interactions.

### Development Tools & Productivity

- [No-Code Platforms](https://awesome-repositories.com/f/development-tools-productivity/no-code-platforms.md) — Provides an intuitive interface for mapping complex business processes with custom event hooks and element snapping.
- [Visual Flow Orchestrators](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/process-orchestration/visual-flow-orchestrators.md) — Enables the visual design of custom logic flows and process diagrams through drag-and-drop interfaces.

### Graphics & Multimedia

- [Interactive Diagramming Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/interactive-diagramming-libraries.md) — Offers a library for embedding interactive, browser-rendered diagrams for process mapping.

### Data & Databases

- [JSON Serialization](https://awesome-repositories.com/f/data-databases/data-serialization-formats/json-serialization.md) — Converts visual workflow arrangements into structured JSON format for storage and retrieval.
- [Data Import and Export](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/data-extraction-ingestion/data-import-and-export.md) — Facilitates the export and import of workflow states to save and reload diagram progress. ([source](https://github.com/alyssaxuu/flowy#readme))

### Programming Languages & Runtimes

- [Hierarchical Tree Structures](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures.md) — Organizes workflow blocks into a hierarchical tree structure to maintain logical flow and connectivity.

### Software Engineering & Architecture

- [Event-Driven Hooks](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-hooks.md) — Triggers custom user-defined logic at specific lifecycle stages during the movement and connection of workflow blocks.