https://github.com/adia-dev/graphflow

Transform your data into stunning visualizations with GraphFlow.
https://github.com/adia-dev/graphflow

algorithms algorithms-visualization arc-browser avl-tree bfs code-editor data-structures data-visualization dfs graphs-algorithms leetcode leetcode-visualizer mit-license open-source react react-typescript tree-structure typescript user-interface visjs

Last synced: about 5 hours ago
JSON representation

Transform your data into stunning visualizations with GraphFlow.

• Host: GitHub
• URL: https://github.com/adia-dev/graphflow
• Owner: adia-dev
• License: mit
• Created: 2023-03-31T22:15:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-12T22:14:36.000Z (12 months ago)
• Last Synced: 2024-04-20T16:53:07.620Z (7 months ago)
• Topics: algorithms, algorithms-visualization, arc-browser, avl-tree, bfs, code-editor, data-structures, data-visualization, dfs, graphs-algorithms, leetcode, leetcode-visualizer, mit-license, open-source, react, react-typescript, tree-structure, typescript, user-interface, visjs
• Language: TypeScript
• Homepage:
• Size: 16.7 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# GraphFlow Application

![visual](./assets/screenshots/demo_1.png)

Welcome to GraphFlow, a React Typescript application that allows you to visualize graphs based on input matrices. GraphFlow uses tailwindcss for styling and visjs for data visualization.

## Demo Video

Check out the demo video to see GraphFlow in action! ![demo video](./assets/demos/demo_2.gif)

## Getting Started

To get started with GraphFlow, simply clone the repository from Github and install the dependencies using `npm install`. Then, start the application using `npm run dev` and you're ready to go!

## Goals

I really enjoy solving [LeetCode](https://leetcode.com/adia-dev/) problems and I often find myself visualizing the data structures that I'm working with. I wanted to create a tool that would allow me to visualize data structures in a simple and intuitive way. GraphFlow is the result of that goal.

## Usage

Using GraphFlow is easy! Start by entering your input in the form of a matrix. Once you've entered your input, simply click on the "Submit" button and GraphFlow will display the corresponding graph based on your input. It's that simple!

### Quick Actions

Make sure to use the `Quick Actions` (cmd+k on Mac) to quickly add/remove nodes and edges. You can also use the `Quick Actions` to add/remove weights from edges and more to come!

![quick actions](./assets/screenshots/quick_actions.png)

## Future Plans

The goal of GraphFlow is to represent various data structures such as graphs, linked lists, trees, AVL trees, and more. Additionally, there are plans to add a code editor that would allow the execution of code to traverse the tree and receive live visual feedback. Stay tuned for more updates!

## Contributing

Contributions to GraphFlow are welcome. If you have an idea for a new feature or want to make improvements to GraphFlow, simply submit a pull request with your changes.

## License

GraphFlow is licensed under the MIT License. For more information, please see the [LICENSE](https://github.com/example/example/LICENSE) file.