VectorFlow — Visual Pipeline Editor

VectorFlow is a visual pipeline editor for building and validating node-based workflows. It provides a reusable node architecture, nine draggable node types, dynamic template-variable handles, and FastAPI-powered graph validation.

Features

• Configuration-friendly BaseNode shared by all standard nodes
• Central node registry powering both the toolbar and React Flow
• Input, Output, LLM, Text, API Request, Database, Filter, Merge, and Delay nodes
• Editable values persisted in the Zustand pipeline store
• Text nodes that grow with their content
• Dynamic target handles for valid JavaScript identifiers inside {{ double braces }}
• Node/edge counting and directed-cycle detection using Kahn's algorithm
• Responsive dark workflow interface with loading, success, and error feedback

Run locally

Frontend

cd frontend
npm install
npm start

Open http://localhost:3000.

Backend

Using a Python virtual environment is recommended:

cd backend
pip install -r requirements.txt
uvicorn main:app --reload

The API runs at http://localhost:8000.

Architecture

BaseNode.js renders shared node structure, fields, handles, and controlled values. nodeRegistry.js is the single source of truth for React Flow node components, toolbar metadata, colors, and initial data. The Text node reuses the base card while keeping its specialized resizing and variable parsing straightforward.

The frontend submits React Flow's current nodes and edges arrays to POST /pipelines/parse. FastAPI validates the payload, counts graph elements, and uses indegrees plus a topological queue to determine whether the pipeline is a DAG.

Validation

Run the focused checks with:

cd frontend
npm test -- --watchAll=false
npm run build

cd backend
python -m unittest

Assumptions

• Demonstration nodes model their controls and connections but do not call real external services.
• Edges referencing unknown nodes are rejected with HTTP 400.
• The frontend API URL defaults to http://localhost:8000 and can be overridden with REACT_APP_API_URL.