https://github.com/miguelsalesvieira/solid-flow
Solidjs component for building interactive flow-based diagrams and graphs
https://github.com/miguelsalesvieira/solid-flow
flow flowchart graph solidjs ui visualization
Last synced: 4 months ago
JSON representation
Solidjs component for building interactive flow-based diagrams and graphs
- Host: GitHub
- URL: https://github.com/miguelsalesvieira/solid-flow
- Owner: miguelsalesvieira
- License: mit
- Created: 2022-09-26T10:25:23.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-19T13:21:50.000Z (over 2 years ago)
- Last Synced: 2025-09-25T19:56:16.484Z (5 months ago)
- Topics: flow, flowchart, graph, solidjs, ui, visualization
- Language: TypeScript
- Homepage:
- Size: 594 KB
- Stars: 144
- Watchers: 1
- Forks: 21
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A simple yet complex [Solidjs](https://www.solidjs.com/) component for building interactive node-based diagrams and editors
[📖 Documentation](https://miguel-vieira.gitbook.io/solid-flow/) |
[🧪 Demo](https://solidflowdemo.netlify.app/)
---
## Installation
To install it, simply run
```bash
$ npm install solid-flow
```
## Usage
A very simple example to get started with solid-flow. If you want to check out more complex examples plese refer to [examples](#examples)
```javascript
import { createEffect, createSignal } from "solid-js";
import { SolidFlow } from "solid-flow";
import styles from "./styles.module.css";
const initialNodes = [
{
id: "node-1",
position: { x: 50, y: 100 },
data: {
content:
This is a simple node
,
},
inputs: 0,
outputs: 1,
},
{
id: "node-2",
position: { x: 350, y: 100 },
data: {
label: "Node with label",
content: This is a node with a label
,
},
inputs: 1,
outputs: 0,
},
];
const initialEdges = [
{
id: "edge_node-1:0_node-2:0",
sourceNode: "node-1",
sourceOutput: 0,
targetNode: "node-2",
targetInput: 0,
},
];
const Example = () => {
const [nodes, setNodes] = createSignal(initialNodes);
const [edges, setEdges] = createSignal(initialEdges);
return (
{
setNodes(newNodes);
}}
onEdgesChange={(newEdges) => {
setEdges(newEdges);
}}
/>
);
};
```
## Development
To begin development first you need to `git clone` this repository to your local machine. Once that's done, on the main directory, run
```bash
npm install
```
to install the packages and then run
```bash
npm start
```
to rollup the project.
From here, everytime a change is made the project will be built automatically. To test it out follow the instructions on [examples](#examples) and use of the examples as a development template.
## Examples
You can run the examples on your local machine and tinker with them or if you simply want to have a look, you can go directly to the [demo page](https://solidflowdemo.netlify.app/).
To run the examples first make sure your've gone trough all the steps explained in [development](#development). Once you've got that set up then go to the examples directory
```bash
cd examples
```
Install it
```bash
npm install
```
and run it
```bash
npm start
```
you should now be able to check it out on your [localhost](http://127.0.0.1:3000/). You can use the examples as a template for development.
## Credits
Credits go to [Product Dock](https://productdock.com/) by giving the means to be able to build this project.