flow-connect
v2.0.9
Published
FlowConnect is a highly-customizable library for creating node-based editors, graphs and diagrams.
Downloads
1,368
Maintainers
Readme
:globe_with_meridians: Docs
:mag: Guide
:books: API
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
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();
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 [email protected]
MIT licensed
Copyright © 2021-present | Saurabh Bhagat