Build diagrams
at the speed of thought

AI Flowchart Studio is a browser-based diagram tool that converts plain-language descriptions into visual diagrams using Google's Gemini AI. You can also build diagrams from scratch with the Manual Builder — no API key required.

All diagrams are rendered using Mermaid.js — giving you clean, scalable output you can drop directly into GitHub, Notion, or any Mermaid-compatible tool.

Create your first AI-generated flowchart in under two minutes.

AI Flowchart Studio uses a BYOK (Bring Your Own Key) model. You supply your Gemini API key and the app calls Google's API directly from your browser.

Getting your key

The AI tab sends your prompt to Google Gemini, which returns valid Mermaid flowchart syntax. That code is rendered live on the canvas as an interactive SVG.

How it works

After generation

• Click any node on the canvas to open the node editor — rename it or change its shape.
• The Mermaid Output field shows the raw code — edit it directly and re-render for precise tweaks.
• Generate again with a refined prompt to replace the diagram entirely, or combine AI generation with manual edits.

The quality of your diagram depends directly on the quality of your prompt. Gemini infers structure well — but the more explicit you are, the better the output.

What to include

• Start node — Where does the process begin? (e.g. "Start when the user lands on checkout")
• Actions — What happens at each step? Use verbs: validate, check, send, display, redirect.
• Decision points — Where does the flow branch? Name both paths explicitly — the Yes/success path and the No/failure path.
• End states — What are all possible termination points? Name each one.

Prompt examples

Tips for better results

• Use connecting words: if, then, otherwise, when, after, on success, on failure
• Name each branch explicitly: "if valid → …" and "if invalid → …"
• One action per node — don't bundle multiple steps together
• State every end state so Gemini knows where to terminate each branch
• For complex flows, break into sub-processes and generate separately

Build diagrams node-by-node without AI. Useful for precise, predictable diagrams or when you don't have an API key.

Node types

Adding nodes

Connecting nodes

• Select the From node (origin) and To node (destination)
• Optionally add an Edge Label — e.g. "Yes", "No", "On success"
• Click Add Connection to draw the arrow

The canvas is a scrollable, zoomable area that holds your rendered diagram.

Navigation

• Pan — Click and drag the canvas background to move around.
• Zoom — Use + / − buttons in the bottom-right corner, or the zoom dropdown in the toolbar.
• Fit to screen — Click Fit in the toolbar to reset zoom so the full diagram is visible.
• Reset zoom — Click the zoom percentage to snap back to 100%.

Node interaction

• Click a node to open the floating Node Editor — edit label or change shape.
• Hover a node to see an indigo glow highlight.
• Press Esc or click outside to dismiss the editor.

Toolbar reference

• Layout — Switch flow direction: TD (top-down), LR (left-right), BT, RL.
• Undo / Redo — Step backward or forward through edit history.
• Clear — Wipe the canvas and start fresh.
• Export — Open the export menu for Mermaid, SVG, or PNG.

Click Export in the canvas toolbar to open the export menu. Three formats available.

Embed Mermaid in GitHub

GitHub natively renders Mermaid in Markdown. Paste your exported code inside a fenced block tagged mermaid:

```mermaid
flowchart TD
    A([Start]) --> B[Enter Credentials]
    B --> C{Account exists?}
    C -->|Yes| D[Verify Password]
    C -->|No| E[Show Signup]
    D -->|Correct| F([Dashboard])
    D -->|Wrong| G[Show Error]
```

On macOS, substitute Ctrl with ⌘.