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,
};
Example
- Pan: alt + drag
- Zoom: mouse wheel
Development
Before you start you need to build the project using npm run build. Then install the Solid Graph dependencies via npm install.
If you want to contribute or develop custom features the easiest way is to start the dev server:
npm start
Credits
Solid Graph is heavily based on react flow. Without them Solid Graph would not exist. Please consider donating to them.
- solid-styled - for styling components
License
Solid Graph is MIT licensed.
4 Aug 18, 2022
80 Dec 21, 2022
208 Jan 3, 2023
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
652 Dec 30, 2022
4 Jul 19, 2022
5 Sep 18, 2022
12 Dec 29, 2022