jerosoler/Drawflow
Drawflow
Simple flow library 🖥️🖱️
Features
- Node-Based UI Editors - A browser-based library for building interactive node graphs with drag-and-drop nodes, connections, and modules on an HTML canvas.
- Visual Node Editors - Building interactive diagrams by dragging nodes onto a canvas and connecting their inputs and outputs.
- Node-Based Diagramming Frameworks - Builds interactive diagrams by dragging nodes onto a canvas and connecting their inputs and outputs.
- Data Import and Export - Saves the entire node graph to a file or loads a previously saved graph from external data.
- Node Graph Serializers - Serializes the entire node graph, including positions, connections, and data, to JSON for saving and loading.
- Diagram Persistence - Saves the entire node diagram to a file and loads it back for later editing or sharing.
- Persistence - Saving and loading node diagrams to and from JSON files for later editing or sharing.
- Event-Driven Graph Models - Manages node positions, connections, and data through a centralized event system that triggers callbacks on changes.
- HTML Attribute Data Bindings - Sync data from HTML attributes like df-* on inputs, textareas, or selects to the node's data object.
- Node-Based Flow Builders - Builds and edits data flows visually by dragging and dropping nodes onto a canvas.
- Visual Data Flow Builders - Building and editing visual data flows by dragging and connecting nodes on a canvas.
- Node Graph Connection Routings - Links outputs of one node to inputs of another by dragging connections between them.
- Canvas Node Manipulation - Drag nodes onto a canvas and connect them to build visual data flows.
- Toolkits - A client-side toolkit for implementing node graph editors with zoom, pan, and JSON import/export capabilities.
- Flow Diagram Libraries - A browser-based tool for creating interactive flow diagrams with customizable node templates and event handling.
- Template Registrations - Registers reusable node definitions with custom HTML or Vue components that can be instantiated multiple times.
- Node Graph Event Callbacks - Fire callbacks for actions like node creation, connection changes, module switches, and zoom adjustments.
- Canvas Node Renderers - Renders nodes and connections directly on an HTML canvas element using 2D drawing operations for performance.
- Canvas Pan and Zoom Controls - Applies a 2D affine transform matrix to the canvas for zooming and panning the entire flow view.
- Custom Attribute Data Bindings - Synchronizes node data automatically by reading HTML attributes like df-* from input elements within node templates.
- Node-Based Logic Interfaces - A canvas-based interface for constructing data flows by connecting nodes with multiple input and output ports.
- Multiple Handles per Node - Create multiple connections between nodes, each with configurable input and output points.
- Flow Diagram Serializations - Serializes the entire diagram to JSON and restores it later from the same format.
- Node Form Data Binding - Binds form fields inside a node to its data object so changes update automatically.
- Named Modules - Splitting a flow editor into separate named modules to manage complex diagrams with independent state.
- Flow Module Isolation - Organizes nodes into separate modules with independent state and connection graphs to manage complex flows.
- Node Template Registration - Registering reusable node definitions with custom HTML or Vue components for instantiation.
- Lockable Editor Modes - Switches the canvas to fixed or view-only mode to prevent node movement or editing.
- Inline Content Editors - Lets users type or modify text directly inside a node without opening a separate editor.
- Connection Rerouting - Adding and removing intermediate points on connection lines to customize routing paths between nodes.
- Visual Connection Rerouting - Add and remove intermediate points on connection lines by double-clicking to reroute paths.
- Multi-Port Connection Editors - Supports nodes with several connection points so data can branch or merge across the graph.
- Visual Programming - Simple flow library.
- Web Frameworks - This allow you to create data flows easily and quickly.
