tmcfarlane/flowchart: A free, open-source flowchart designer that turns plain-English prompts into polished diagrams with AI. · GitHub

• 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

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 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_*):

For Vercel, add the same variables in your project settings.

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.