https://github.com/dineshkumar-mb/flowchart-maker
flowchart maker app using web api and gemini api
https://github.com/dineshkumar-mb/flowchart-maker
api gemini-api web
Last synced: about 1 year ago
JSON representation
flowchart maker app using web api and gemini api
- Host: GitHub
- URL: https://github.com/dineshkumar-mb/flowchart-maker
- Owner: dineshkumar-mb
- Created: 2025-06-07T07:04:57.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-07T14:04:35.000Z (about 1 year ago)
- Last Synced: 2025-06-07T15:19:07.356Z (about 1 year ago)
- Topics: api, gemini-api, web
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
# Flowchart Maker App
A web-based **Flowchart Making Application** built with **React.js** that allows users to create customizable flowcharts using various shapes such as circles, diamonds, rectangles, squares, hexagons, and straight lines. The app also integrates voice-to-text functionality using the **Gemini API** and **Web APIs** to enable voice commands for creating and manipulating flowchart elements.
---
## Features
- **Drag & Drop** flowchart shapes: Circle, Diamond, Rectangle, Square, Hexagon, Straight Line, and more.
- **Connect shapes** with lines to visualize process flows.
- **Voice-to-Text Integration** using Gemini API & Web Speech API:
- Create shapes via voice commands.
- Label shapes using voice input.
- **Interactive UI** with smooth drag, resize, and delete options for flowchart elements.
- **Export and Save** flowcharts (planned feature).
- Responsive design for desktop and tablet devices.
---
## Tech Stack
- **Frontend:** React.js (Functional Components & Hooks)
- **APIs:** Gemini API for advanced voice recognition and Web Speech API for native browser voice input
- **Styling:** CSS / Bootstrap (or your styling library)
- **State Management:** React state and context (or Redux if used)
---
## Getting Started
https://github.com/user-attachments/assets/6cfd954c-a166-4811-a4c2-d3f2a85f91c2
### Prerequisites
- Node.js (v14+ recommended)
- npm or yarn
### output