A form-driven flowchart builder powered by Gemini AI.
Build beautiful, structured flowcharts by filling out a simple form — no dragging shapes manually.
FlowCraft (internally called FlowForge) is an AI-assisted flowchart builder where you describe your flow using a structured form interface, and the app renders it as a clean visual diagram. It supports terminators, process blocks, and decision nodes — all wired together through a linked-list-style canvas.
Key highlights:
- Form-based block creation (no drag-and-drop complexity)
- Real-time canvas rendering with connection arrows
- Gemini AI integration for smart assistance
- Export to PNG, PDF, and PPTX
- Save/load workspace via Local Storage
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript |
| Styling | Tailwind CSS v4 |
| Build Tool | Vite |
| AI | Google Gemini API (@google/genai) |
| Animations | Motion (Framer Motion) |
| Export | html-to-image, jsPDF, PptxGenJS |
| Icons | Lucide React |
FlowCraft/
├── src/
│ ├── components/
│ │ ├── CenterCanvas.tsx # Main flowchart canvas
│ │ ├── LeftSidebar.tsx # Block creation form panel
│ │ ├── RightSidebar.tsx # Block properties panel
│ │ └── Toast.tsx # Notification system
│ ├── utils/
│ │ └── layout.ts # Auto-layout logic
│ ├── App.tsx # Root component & state
│ ├── types.ts # Shared TypeScript types
│ └── index.css
├── .env.example
└── metadata.json
Prerequisites: Node.js 18+
# 1. Fork and clone the repo
git clone https://github.com/<your-username>/FlowCraft.git
cd FlowCraft
# 2. Install dependencies
npm install
# 3. Set up environment variables
cp .env.example .env.local
# Add your GEMINI_API_KEY to .env.local
# 4. Start the dev server
npm run devOpen http://localhost:3000 in your browser.
Getting a Gemini API key: Visit Google AI Studio → Get API key.
| Command | Description |
|---|---|
npm run dev |
Start dev server on port 3000 |
npm run build |
Production build |
npm run preview |
Preview production build |
npm run lint |
TypeScript type check |
Contributions are welcome! Whether it's a bug fix, new feature, or documentation improvement — all help is appreciated.
- Read the Contributing Guide before opening a PR
- Check open issues for things to work on
- Look for issues labeled
good first issueif you're new
View the app running on AI Studio: FlowCraft on AI Studio
Licensed under the Apache 2.0 License.