FlowConnect is a highly-customizable library for creating node-based editors, graphs and diagrams.

🌐 Docs

🔍 Guide

📚 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 saurabhbhagat98die@gmail.com

MIT licensed

Copyright © 2021-present | Saurabh Bhagat