▶ Watch the trailer (0:56, sound on)
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
Created by ZeroClickDev
Tip
New: the Flowchart AI MCP server. Connect Claude, ChatGPT, VS Code, Cursor or OpenCode to https://flowchart.zeroclickdev.ai/api/mcp, and your agent can draw a flowchart, hand you a link, and keep editing it with you. Free, no account or API key. Launch page and setup · Docs
- AI-powered generation — describe what you want in plain English, get a structured flowchart in seconds
- Works with your AI agent (MCP) — Claude, Copilot, Cursor, OpenCode or ChatGPT can create a chart, hand you a link, and keep editing it with you
- Share links with live sync — share a chart in one click; edits from you and your agent appear live
- 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.
Official Azure icons are automatically applied to AI-generated nodes.
Review, regenerate, and modify AI suggestions before adding them to the canvas.
Walk through your flowchart step by step with arrow keys — great for meetings and demos.
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 buildFlowchart AI is also a remote MCP server. Connect it to your agent, ask for a chart, and you get a link to an editable flowchart. Keep editing in the browser while the agent keeps editing the same chart; each side sees the other's changes.
https://flowchart.zeroclickdev.ai/api/mcp
# Claude Code
claude mcp add --transport http flowchart https://flowchart.zeroclickdev.ai/api/mcpTools: create_flowchart, get_flowchart, update_flowchart, list_node_types, search_azure_icons. No account or API key is needed. The dev server also serves the MCP endpoint at http://localhost:3004/api/mcp. Setup steps for each client are on the launch page, and docs/mcp.md has the same setup plus the tool reference, privacy notes, and self-hosting with Upstash Redis.
The AI assistant uses Azure OpenAI through a serverless proxy (api/chat.ts) so credentials stay server-side.
cp .env.example .envSet 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.