FlowChart AI — Free AI-powered flowchart designer
The open-source flowchart designer that turns plain-English prompts into polished diagrams in seconds.
AI generation | 663+ Azure icons | Presentation mode | Export to PNG, SVG & GIF
License: MIT
GitHub Stars
Issues
Free
Created by ZeroClickDev
- AI-powered generation — describe what you want in plain English, get a structured flowchart in seconds
- Free to use — no sign-up, no paywall, no limits on the canvas
- Export to PNG, SVG & animated GIF — share diagrams in docs, slides, or README files
- Presentation mode — step through your flowchart with arrow keys, perfect for walkthroughs
- 663+ Azure icons — official Azure icon library built in, auto-applied by AI
- Dark mode — charcoal UI with teal/cyan accents, toggleable in one click
- Polished canvas UX — snap-to-grid, undo/redo, copy/paste, minimap, multi-select
- Multiple node & edge types — step, decision, note, image nodes with editable labels and animated edges
- AI proposal preview — review, regenerate, and tweak AI suggestions before inserting
- Deploy anywhere — one-click Vercel deploy, serverless API keeps credentials safe
Screenshots
Tell Flowchart what you want to make and watch it magically jump start you.
Tell Flowchart what you want to make and watch it magically jump start you
Official Azure icons are automatically applied to AI-generated nodes.
Default support for official Azure icons library
Review, regenerate, and modify AI suggestions before adding them to the canvas.
AI proposal view to review, regenerate, and modify prior to adding your new flowchart to the canvas
Walk through your flowchart step by step with arrow keys — great for meetings and demos.
Presentation Mode will walk you through your flowchart from start to finish
Export to PNG, SVG, animated GIF, or JSON. Import JSON to pick up where you left off.
# Prerequisites: Node.js 18+, pnpm 10.x pnpm install pnpm dev # http://localhost:3004 pnpm test # run tests pnpm build # production build
The AI assistant uses Azure OpenAI through a serverless proxy (api/chat.ts) so credentials stay server-side.
cp .env.example .env
Set these variables (server-side only; do not use VITE_*):
| Variable | Description |
|---|---|
AZURE_DEPLOYMENT_NAME |
Your Azure OpenAI deployment |
AZURE_RESOURCE_NAME |
Your Azure resource name |
AZURE_API_KEY |
Your Azure API key |
For Vercel, add the same variables in your project settings.
Architecture
sequenceDiagram
participant User
participant UI as React UI
participant API as Vercel Function
participant Azure as Azure OpenAI
User->>UI: Prompt (generate or refine)
UI->>API: POST /api/chat (flow context optional)
API->>Azure: Chat completions (structured output)
Azure-->>API: JSON flowchart proposal
API-->>UI: Message (JSON string) + finish reason
UI-->>User: Preview then insert
- API:
api/ - AI prompt skill:
api/flowchart-generation-skill.md - Icon resolution:
src/utils/azureIconRegistry.ts
See CONTRIBUTING.md and SECURITY.md.
This app was built 100% with AI assistance using Cursor, OpenCode, and Oh My Cursor.
MIT. See LICENSE.