April 20, 2026 5 min readFreeFlowCharts Team

How We Built AI-Powered Flowcharts with Google Gemini

ai engineering gemini

One of the headline features of FreeFlowCharts is the AI integration. You can describe a process in plain English, and the AI generates a complete flowchart — nodes, connections, colors, and all. Here's how we built it.

The challenge

Flowcharts are structured data: nodes with types, positions, labels, and edges connecting them. Getting an AI to output valid, well-laid-out graph data from a natural language prompt is non-trivial.

Our approach

We use Google Gemini (via the Firebase AI SDK) with carefully crafted system prompts that instruct the model to output structured JSON. The prompt includes:

The full schema of our node and edge types

The current state of the canvas (so the AI can extend existing flows)

Constraints like "use dagre layout for positioning" and "always include start/end nodes"

Four AI modes

Generate: Create an entire flowchart from a text description

Suggest: Given an existing flow, suggest the next logical steps

Summarize: Generate a Markdown summary of what a flowchart represents

Optimize: Analyze a flow and suggest improvements for efficiency

The result

The AI generates surprisingly good flowcharts. A prompt like "User onboarding flow for a SaaS app" produces a 10-15 node flow with proper decision branches, email triggers, and success/failure paths — in about 3 seconds.

Lessons learned

Structured output is key: Asking for JSON with a strict schema works much better than freeform text

Context matters: Including the existing canvas state makes suggestions dramatically better

Layout is hard: We run dagre auto-layout after AI generation to prevent overlapping nodes

The AI features are available on the Pro plan ($7.99/month). We think it's worth it — it turns a 30-minute flowchart into a 30-second one.