https://github.com/tinkkid/diagram-flow
Diagram flow - shows the interaction diagram of nodes and edges
https://github.com/tinkkid/diagram-flow
react react-flow redux-persist redux-toolkit
Last synced: about 1 month ago
JSON representation
Diagram flow - shows the interaction diagram of nodes and edges
- Host: GitHub
- URL: https://github.com/tinkkid/diagram-flow
- Owner: Tinkkid
- Created: 2023-12-27T11:42:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-28T10:34:13.000Z (over 2 years ago)
- Last Synced: 2025-08-21T09:46:07.990Z (10 months ago)
- Topics: react, react-flow, redux-persist, redux-toolkit
- Language: TypeScript
- Homepage: https://diagram-flow.vercel.app
- Size: 169 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Diagram flow
Diagram flow - its react application with nodes and edges.
## Feauture
- Clicking on the button reveals a dropdown list of variants.
- Selecting a variant triggers the appearance of the next node, connected to the previous one in a specific way. This action can be repeated multiple times.
- The button text updates to reflect the selected option.
- All values are persisted even when the page is reloaded.
- Values dynamically change if another option is selected. Clicking again on the selected option removes the next node.
### Project built using:
- [React+Vite](https://vitejs.dev/guide/)
- [Redux](https://redux.js.org/)
- [Redux Persist](https://redux-toolkit.js.org/rtk-query/usage/persistence-and-rehydration)
- [React Flow](https://reactflow.dev/)
- [Emotion Styled Components](https://emotion.sh/docs/styled)
## Getting Started
1. Clone this repository:
```bash
git clone https://github.com/Tinkkid/Diagram-flow.git
```
2. Install all dependencies:
```bash
npm install
```
3. Start project: write command
```bash
npm run dev
```
4. Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
## Live page
Deploy on Vercel. Open page - use link [Diagram Flow](https://diagram-flow.vercel.app/)