VisualFlow

VisualFlow is a versatile platform that simplifies the process of creating flowcharts by offering an intuitive and user-friendly interface. With VisualFlow you can effortlessly draw flowcharts by dragging and dropping various elements and connecting them to define the logical flow of a process or a program. This eliminates the need for manual time-consuming flowchart design and ensures that even individuals without extensive technical expertise can participate in the process. One of the standout features of VisualFlow is its ability to seamlessly generate code based on the flowchart you create. As you design your flowchart the platform can analyze the visual representation and translate it into actual programming code. This not only streamlines the coding process but also reduces the likelihood of errors or inconsistencies between the flowchart and the code. Furthermore VisualFlow empowers users to compile the generated code directly within the platform. This means that you can quickly and conveniently check the functionality and correctness of your code ensuring that it runs smoothly without having to switch to external development environments or compilers.

📦File Structure

.
└──📁 VisualFlow/
    ├──📁 backend/
    │   ├── 📄app.js
    │   ├── 📄index.js
    │   ├── 📄package.json
    │   └── 📄package-lock.json    
    ├──📁 public/
    │   ├── 📄index.html
    │   ├── 📄manifest.json
    │   └── 📄robots.txt
    ├──📁 src/
    │   ├──📁 components/
    │   │   ├── 📄codeCompile.js
    │   │   ├── 📄customEdge.js
    │   │   ├── 📄CustomNode.js
    │   │   ├── 📄decisionNode.js
    │   │   ├── 📄DownloadButton.js
    │   │   ├── 📄Navbar.jsx
    │   │   ├── 📄parallelogram.js
    │   │   ├── 📄script.js
    │   │   ├── 📄sideNav.js
    │   │   ├── 📄textUpdaterNode.js
    │   │   ├── 📄tokyo-night-dark.css
    │   │   ├── 📄gradient-dark.css
    │   │   └── 📄atom-one-dark.css
    │   ├── 📄App.cs
    │   ├── 📄App.js
    │   ├── 📄App.test.js
    │   ├── 📄index.css
    │   ├── 📄index.js
    │   ├── 📄reportWeVitals.js
    │   └── 📄setupTests.js
    ├── 📄package-lock.json
    ├── 📄package.json
    ├── 📄README.md
    └── 📄tailwind.config.js

---

📅TimeLine

---

Project Screenshots:

---

🧐 Features

Here're some of the project's best features:

• User-Friendly Interface: VisualFlow boasts an interface that is designed to be intuitive and easy to navigate. Users can efficiently interact with the platform even if they have limited technical experience thanks to its simplicity and clarity.
• Drag-and-Drop Feature: With VisualFlow you can create flowcharts by simply dragging and dropping various elements onto the canvas. This feature eliminates the need for manual drawing and helps users quickly construct flowcharts visually.
• C++ Code Generation: VisualFlow has the capability to automatically generate C++ code based on the flowchart you create. This feature streamlines the transition from visual design to functional code and is particularly beneficial for software development in C++.
• Downloadable Flowchart: VisualFlow allows users to download their created flowcharts in a downloadable format. This feature enables you to save and share your flowcharts with others or use them in documentation or presentations.
• Easy to Use: VisualFlow is known for its ease of use. It simplifies the process of flowchart creation and code generation making it accessible to a wide range of users without requiring extensive technical knowledge.
• Built-In Compiler: VisualFlow includes a built-in compiler which means that you can compile the generated C++ code directly within the platform. This feature provides a convenient and integrated solution for testing and verifying the functionality of your code.

---

JDoodle API Installation Guide

The JDoodle API allows you to execute code in various programming languages in a remote environment.

1. Prerequisites

Before you begin, ensure you have the following prerequisites in place:

• Node.js installed on your system.

2. Getting API Key

To use the JDoodle API, you need to obtain an API key. Follow these steps to get your API key:

1. Visit the JDoodle API website at https://www.jdoodle.com/api/docs/.
2. Sign up or log in to your JDoodle account.
3. Navigate to the API section and generate an API key.
4. Keep your API key secure and never share it publicly.

3. Installation Replace your 'YOUR_CLIENT_ID' and'YOUR_CLIENT_SECRET' with your own ClientId and ClientSecret

clientId: 'YOUR_CLIENT_ID',
clientSecret: 'YOUR_CLIENT_SECRET',

---

🛠️ Installation Steps:

1. Start by cloning the repo

git clone https://github.com/SharanRP/VisualFlow.git

2. Navigate to folder

cd VisualFlow
npm install

3. start the react app

npm start

4. open another terminal

cd backend
npm install

5. start the server

node index.js

Project demo

07.11.2023_17.52.29_REC.mp4

Code_Generation.mp4

DownloadBtn.mp4

💻 Built with

Technologies used in the project:

• React
• React-Flow
• Tailwind
• MUI

Future Scope

• Incorporating machine learning and AI capabilities could help VisualFlow analyze flowcharts and suggest optimized code, making it more intelligent and adaptive to the user's needs.

• While VisualFlow currently supports C++, expanding its capabilities to cover a broader range of programming languages could significantly increase its utility. This would make it attractive to a more extensive community of developers and programmers.

• VisualFlow could be further developed for educational purposes. It could be used to teach programming concepts, algorithm design, and software engineering in an interactive and engaging way.

Mentor

• Sameer Gupta