FlowConnect is a highly-customizable library for creating node-based editors, graphs and diagrams.
π Docs
π Guide
π API
npm i flow-connect
yarn add flow-connect
<script src="https://cdn.jsdelivr.net/npm/flow-connect@latest/dist/flow-connect.js"></script>
ESM
Note: Seperate dependency required for '@flow-connect/*' packages, check flow-connect-standard-nodes monorepo for further details.
import { 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();
Run unit tests using Jest
npm run test
Build UMD, ESM and CommonJS modules
npm run build
or
npm run build:cjs
npm run build:esm
npm run build:umd
Develop & Build docs using VuePress
npm run docs:dev
npm run docs:build
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
Feel free to send any feedback on saurabhbhagat98die@gmail.com
MIT licensed
Copyright Β© 2021-present | Saurabh Bhagat