A library that aims to provide everything needed for making flowcharts, graphs, diagrams, and other similar things using a simple and intuitive API.
Currently, NodeFlow is built using SolidJS, but there are plans to make it framework-agnostic in the future.

Features

• 🔍 Zooming and panning
• 🤚 Dragging, selecting, and connecting nodes
• 🎨 Fully customizable styling for every element (nodes, connectors, connector-sections, etc.)
• 📦 Customizable node content
• 📒 History (undo/redo)
• ⤵️ Connection curves

Installation

npm install nodeflow

Usage

📚 The Wiki page covers most of the features of NodeFlow.

Below is a simple example that covers adding 2 nodes and connecting them:

import { NodeflowLib } from "nodeflow-lib";

// Create a canvas with id "main".
// nodeflowData contains the data of the canvas
// Nodeflow is the canvas element (currently a SolidJS component)
const [nodeflowData, Nodeflow] = NodeflowLib.get().createCanvas("main");

// create the nodes
const sourceNode = nodeflowData.addNode({
  position: { x: 100, y: 100 },
  content: (nodeData) => <div>{nodeData.position}</div>,
});
const destinationNode = nodeflowData.addNode({
  position: { x: 400, y: 400 },
  content: (nodeData) => <div>Node 2!</div>,
});

// add a connector section to the nodes
const outputSection = sourceNode.addConnectorSection({ id: "output" });
const inputSection = node2.addConnectorSection({ id: "input" });

// add a connector to each connector section
outputSection.addConnector({ id: "source-connector" });
connectorSection2.addConnector({ id: "target-connector" });

// connect the connectors
nodeflowData.addConnection({
  sourceNodeId: sourceNode.id,
  sourceConnectorId: "source-connector",
  destinationNodeId: destinationNode.id,
  destinationConnectorId: "target-connector",
});

For rendering the canvas, you just use the Nodeflow component:

<Nodeflow width="800px" height="800px" />

Examples

There are 2 example projects: 👨‍👩‍👧‍👦 a FamilyTree App and 📘 a Blueprint App.
You can check them out in action here.