nodeflow-lib v0.0.6
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.
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago