This project provides a set React components for viewing and editing node-based graphs. The focus is on graphs used for dataflow and Flow-based programming.

The graph structure is stored by fbp-graph, which supports extendable metadata and undo/redo.

You can optionally use klayjs-noflo for automatic layout of graphs.

the-graph is used as the editor in the Flowhub IDE.

• Basic demo. code | Run
• Stresstest. code | Run
• Thumbnail. code | Run

Install via NPM

npm install the-graph

See the examples for how to include the .js and .css files, and API usage.

The MIT License

Please refer to https://noflojs.org/support/.

Clone the repo

git clone https://github.com/flowhub/the-graph.git # or your own fork on Github
cd the-graph

Install dependencies and build

npm install
npm run build

Run the demo server

npm start

or http://localhost:3000/examples/demo-full.html for interactive demo.

Send pull requests on Github!