FlowConnect is a highly-customizable library for creating node-based editors, graphs and diagrams.
Installation
NPM or Yarn
npm i flow-connect
yarn add flow-connect
CDN
<script src="https://cdn.jsdelivr.net/npm/flow-connect@latest/dist/flow-connect.js"></script>
Example Usage
ESM
flow-connect-standard-nodes monorepo for further details.
Note: Seperate dependency required for '@flow-connect/*' packages, checkimport { FlowConnect, Vector } from "flow-connect";
Example
const flowConnect = new FlowConnect(canvasElement);
const flow = flowConnect.createFlow({ name: "New Flow" }, rules: {});
const timer = flow.createNode('common/timer', Vector.create(50, 50), {
state: { delay: 500 },
});
const log = flow.createNode('common/log', Vector.create(250, 100), {});
timer.outputs[0].connect(log.inputs[0]);
flowConnect.render(flow);
flow.start();
Testing
Run unit tests using Jest
npm run test
Build
Build UMD, ESM and CommonJS modules
npm run build
or
npm run build:cjs
npm run build:esm
npm run build:umd
Docs
Develop & Build docs using VuePress
Develop Docs
npm run docs:dev
Build Docs
npm run docs:build
Local development
All the local development setup is pre-configured under /dev
with tools that provides seamless development experience.
-
Create a new script that you want to test in
dev/scripts/examples
-
Run local developement setup
npm run dev
- All the scripts defined in above directory will be available to test
Feedback
Feel free to send any feedback on saurabhbhagat98die@gmail.com
MIT licensed
Copyright © 2021-present | Saurabh Bhagat