https://github.com/flowhub/the-graph

SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
https://github.com/flowhub/the-graph

editor flowhub graph react svg

Last synced: 25 days ago
JSON representation

SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui

• Host: GitHub
• URL: https://github.com/flowhub/the-graph
• Owner: flowhub
• License: mit
• Created: 2013-10-05T13:40:55.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T23:06:47.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T18:04:26.889Z (about 1 month ago)
• Topics: editor, flowhub, graph, react, svg
• Language: JavaScript
• Homepage: https://flowhub.github.io/the-graph/demo-full.html
• Size: 8.91 MB
• Stars: 1,011
• Watchers: 49
• Forks: 179
• Open Issues: 77
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • License: LICENSE-MIT.txt

Awesome Lists containing this project

• awesome-starred - flowhub/the-graph - SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui (react)

README

        
The Graph Editor [![MIT license](http://img.shields.io/badge/License-MIT-brightgreen.svg)](#license)

================

This project provides a set [React](https://facebook.github.io/react) components for viewing and editing node-based graphs.

The focus is on graphs used for dataflow and [Flow-based programming](https://en.wikipedia.org/wiki/Flow-based_programming).

The graph structure is stored by [fbp-graph](https://github.com/flowbased/fbp-graph), which supports extendable metadata and undo/redo.

You can optionally use [klayjs-noflo](https://github.com/noflo/klayjs-noflo) for automatic layout of graphs.

`the-graph` is used as the editor in the [Flowhub IDE](https://app.flowhub.io).

## Examples

* Basic demo. [code](./examples/demo-simple.js) |

[Run](https://flowhub.github.io/the-graph/demo-simple.html)

* Stresstest. [code](./examples/demo-full.js) |

[Run](https://flowhub.github.io/the-graph/demo-full.html)

* Thumbnail. [code](./examples/demo-thumbnail.js) |

[Run](https://flowhub.github.io/the-graph/demo-thumbnail.html)

## Using

Install via NPM

    npm install the-graph

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

## License

[The MIT License](./LICENSE-MIT.txt)

## Support

Please refer to .

## Developing

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  for interactive demo.

Send pull requests on Github!