# FreeFlowCharts — https://freeflowcharts.app

## About
FreeFlowCharts is a free, web-based flowchart and Venn diagram builder with AI-powered features. Users can create, edit, and export flowcharts and Venn diagrams using a drag-and-drop canvas with 20+ node types. **No signup required** — visit the homepage and start building immediately. Login is only needed for permanent cloud save, sharing, and AI features.

## Features
- **No signup required** — open the app and start building flowcharts immediately
- **Guest mode** auto-saves to browser localStorage; sign in to save permanently
- Drag-and-drop flowchart canvas with infinite zoom and pan
- 20+ node types: start, end, process, decision, input/output, delay, subprocess, task, bug, email, meeting, approval, sticky note, text label, swimlane, approval gate, deadline, milestone, handoff, cost
- 7 visual themes: default, neon, pastel, retro, ocean, brutalist, candy
- Custom backgrounds via hex color or CSS linear-gradient
- AI-powered flowchart generation from natural language descriptions (Pro)
- AI suggestions, optimization, and summarization (Pro)
- Real-time auto-save to cloud (when signed in)
- Export as PNG, SVG, JSON, or Mermaid syntax
- Flow templates for common use cases
- Version history with restore
- Share flowcharts via live links (no account required for viewers)
- Venn diagram builder with 2–8 circles, custom labels, regions, and SVG export
- Dark and light mode UI

## Free API for AI Agents
FreeFlowCharts offers a free public API for creating and exporting flowcharts and Venn diagrams programmatically. Perfect for AI agents, chatbots, automation scripts, and developer tools.

### Endpoints
- POST https://freeflowcharts.app/api/create-flowchart — Create a flowchart
- GET https://freeflowcharts.app/api/export/json?id=<shareId> — Export as JSON
- GET https://freeflowcharts.app/api/export/mermaid?id=<shareId> — Export as Mermaid syntax
- GET https://freeflowcharts.app/api/export/svg?id=<shareId> — Export as SVG image (contrast-aware, adapts to light/dark backgrounds)
- GET https://freeflowcharts.app/api/export/png?id=<shareId> — Export as PNG image (1600px wide, contrast-aware)
- GET https://freeflowcharts.app/api/node-types — List all node types
- GET https://freeflowcharts.app/api/health — API status and endpoint listing

### Details
- No API key required
- No authentication needed
- Returns a shareable URL for the created flowchart
- Supports 19 node types
- Auto-layout if positions are omitted
- Optional `background` field: hex color or CSS linear-gradient
- Optional `theme` field: default, neon, pastel, retro, ocean, brutalist, candy
- Export endpoints accept `?bg=` and `?theme=` query params to override stored values
- JSON export includes `resolvedTheme` and `resolvedBackground` reflecting effective values
- Rate limit: 30 requests per hour per IP
- Full documentation: https://freeflowcharts.app/api-docs

### Quick example — create (POST JSON body):
{
  "title": "My Flow",
  "createdBy": "My Agent",
  "nodes": [
    { "id": "1", "type": "start", "label": "Begin" },
    { "id": "2", "type": "process", "label": "Do work" },
    { "id": "3", "type": "end", "label": "Done" }
  ],
  "edges": [
    { "from": "1", "to": "2" },
    { "from": "2", "to": "3" }
  ],
  "theme": "neon",
  "background": "#1a1a2e"
}

### Response:
{
  "success": true,
  "url": "https://freeflowcharts.app/view/<shareId>",
  "embed": "<iframe src=\"...\"></iframe>"
}

### Quick example — export:
GET https://freeflowcharts.app/api/export/mermaid?id=<shareId>
GET https://freeflowcharts.app/api/export/png?id=<shareId>&theme=neon
GET https://freeflowcharts.app/api/export/svg?id=<shareId>&bg=%231a1a2e
Returns Mermaid as text/plain, PNG as image/png, SVG as image/svg+xml.

## Venn Diagram API
FreeFlowCharts also supports creating Venn diagrams via API.

### Venn Endpoints
- POST https://freeflowcharts.app/api/create-venn — Create a Venn diagram
- GET https://freeflowcharts.app/api/export-venn/json?id=<shareId> — Export as JSON
- GET https://freeflowcharts.app/api/export-venn/svg?id=<shareId> — Export as SVG

### Quick example — create Venn (POST JSON body):
{
  "title": "Skills Overlap",
  "circles": [
    { "id": "A", "label": "Frontend", "color": "#3b82f6" },
    { "id": "B", "label": "Backend", "color": "#ef4444" }
  ],
  "labels": [
    { "id": "l1", "text": "React", "x": 260, "y": 300, "color": "#93c5fd", "region": "A" },
    { "id": "l2", "text": "Full-Stack", "x": 400, "y": 300, "color": "#ffffff", "region": "AB" }
  ]
}

### Venn Response:
{
  "success": true,
  "url": "https://freeflowcharts.app/venn/view/<shareId>",
  "embed": "<iframe src=\"...\"></iframe>"
}

### Venn constraints:
- Max 8 circles, 50 labels
- Circles auto-position if cx/cy omitted
- Colors auto-assigned if omitted
- Same rate limit: 30/hr per IP

## Org Chart API
FreeFlowCharts supports creating org charts via API.

### Org Chart Endpoints
- POST https://freeflowcharts.app/api/create-orgchart — Create an org chart
- GET https://freeflowcharts.app/api/export-orgchart/json?id=<shareId> — Export as JSON
- GET https://freeflowcharts.app/api/export-orgchart/svg?id=<shareId> — Export as SVG

### Quick example — create org chart (POST JSON body):
{
  "title": "My Team",
  "nodes": [
    { "id": "1", "label": "CEO", "title": "Chief Executive" },
    { "id": "2", "label": "CTO", "title": "Technology", "parentId": "1" },
    { "id": "3", "label": "CFO", "title": "Finance", "parentId": "1" }
  ]
}

### Org Chart constraints:
- Max 100 nodes
- Auto-layout tree if positions omitted
- Same rate limit: 30/hr per IP

## Pie Chart API
FreeFlowCharts supports creating pie and donut charts via API.

### Pie Chart Endpoints
- POST https://freeflowcharts.app/api/create-piechart — Create a pie chart
- GET https://freeflowcharts.app/api/export-piechart/json?id=<shareId> — Export as JSON
- GET https://freeflowcharts.app/api/export-piechart/svg?id=<shareId> — Export as SVG

### Quick example — create pie chart (POST JSON body):
{
  "title": "Market Share",
  "slices": [
    { "label": "Product A", "value": 40 },
    { "label": "Product B", "value": 30 },
    { "label": "Other", "value": 30 }
  ],
  "donut": true
}

### Pie Chart constraints:
- Max 50 slices
- Optional donut mode
- Same rate limit: 30/hr per IP

## Mind Map API
FreeFlowCharts supports creating mind maps via API.

### Mind Map Endpoints
- POST https://freeflowcharts.app/api/create-mindmap — Create a mind map
- GET https://freeflowcharts.app/api/export-mindmap/json?id=<shareId> — Export as JSON
- GET https://freeflowcharts.app/api/export-mindmap/svg?id=<shareId> — Export as SVG

### Quick example — create mind map (POST JSON body):
{
  "title": "Project Ideas",
  "nodes": [
    { "id": "1", "label": "Main Topic" },
    { "id": "2", "label": "Branch A", "parentId": "1" },
    { "id": "3", "label": "Branch B", "parentId": "1" },
    { "id": "4", "label": "Sub-idea", "parentId": "2" }
  ]
}

### Mind Map constraints:
- Max 100 nodes
- Auto radial layout
- Same rate limit: 30/hr per IP

## Agent Skill Files
- https://freeflowcharts.app/SKILL.md — Skill file with YAML frontmatter (readable by Gemini, OpenClaw, and any agent)
- https://freeflowcharts.app/.well-known/ai-plugin.json — OpenAI/ChatGPT plugin manifest
- https://freeflowcharts.app/openapi.json — OpenAPI 3.1 spec

## GitHub (supplementary — examples, themes, changelogs)
- https://github.com/nerdfreakuser/freeflowcharts-api — Code examples, node type guide, theme guide, changelog
- The live site (freeflowcharts.app) is the canonical source for the API spec, SKILL.md, and llms.txt

## Tech Stack
- React 18 with TypeScript
- Vite build tool
- Tailwind CSS
- React Flow for canvas
- Firebase (Auth, Firestore, Storage)
- Google Gemini AI
- Stripe for payments
- Netlify hosting
- Cloudflare DNS

## Pricing
- Free tier: Full flowchart builder, unlimited flows, export, templates
- Pro tier ($7.99/month): AI features — generate, suggest, summarize, optimize

## Pages
- / — Content-rich landing page with features, how-it-works, educational content, FAQ, and calls to action
- /editor — Flowchart canvas editor (guest mode, no signup required)
- /venn — Venn diagram editor (requires sign-in)
- /welcome — Marketing landing page with sign-in/sign-up options
- /api-docs — Free flowchart & Venn diagram API documentation
- /blog — Development blog index (21 articles)
- /blog/<slug> — Individual blog post (e.g. /blog/how-to-make-a-flowchart)
- /orgchart — Org chart editor (no signup required)
- /piechart — Pie chart editor (no signup required)
- /mindmap — Mind map editor (no signup required)
- /view/<shareId> — Public read-only view of a shared flowchart (with download toolbar)
- /venn/view/<shareId> — Public read-only view of a shared Venn diagram (with download toolbar)
- /orgchart/view/<shareId> — Public read-only view of a shared org chart (with download toolbar)
- /piechart/view/<shareId> — Public read-only view of a shared pie chart (with download toolbar)
- /mindmap/view/<shareId> — Public read-only view of a shared mind map (with download toolbar)
- /privacy — Privacy policy
- /terms — Terms of service
- /cookies — Cookie policy

## Contact
hello@imagey.ai