Solid-graph NPM

Convert Your Ideas To Graphs With Solid Graph!

Solid Graph

A lightweight and minimal Solid component for building interactive graphs and node-based editors.

Key Features

Easy to use: Just provide the nodes and edges data and it automatically gets converted to an interactive graph with seamless zooming and panning.
Customizable: Different edge types and support for custom nodes and custom edges.
Fast rendering: Only nodes that have changed are re-rendered and only those in the viewport are displayed
Reliable: Written in Typescript.

Installation

The easiest way to get the latest version of Solid Graph is to install it via npm:

npm install solid-graph # or yarn add

Quick Start

import SolidGraph from "solid-graph";

function Flow(props) {
  return <SolidGraph nodes={props.nodes} edges={props.edges}></SolidGraph>;
}

SolidGraph Props

Name	Type	default	Description
nodes	Node[]	[]	array of nodes
edges	Edge[]	[]	array of edges
width	number	800	width of the container
height	number	800	height of the container

type Node = {
  id: number,
  position: { x: number, y: number },
  data: { label: string, ... },
  width?: number,
  height?: number,
  bgColor?: string,
  fontSize?: number,
  borderColor?: string,
  borderRadius?: number,
  textColor?: string,
};

type Edge = {
  source: number,
  target: number,
  label?: string,
  type?: "straight" | "smoothStep" | "step",
  animated?: boolean,
  noHandle?: boolean,
  arrow?: boolean,
  style?: JSX.CSSProperties,
  labelStyle?: JSX.CSSProperties,
  labelBgStyle?: JSX.CSSProperties,
};