Getting Started

Learn how to configure the Studio and set up your API key.

What is AI Flowchart Studio?

Welcome! This application is designed to help you build beautiful, interactive flowcharts effortlessly. You have two ways to create: using our advanced AI to generate diagrams from plain English descriptions, or using the Manual Builder to snap nodes and links together yourself.

Setting Up Your API Key

To use the AI Generator, you must provide your own Google Gemini API key. This acts as your personal secure connection to the AI engine.

  1. Click the Get API Key button below to visit Google AI Studio.
  2. Sign in with your standard Google account.
  3. Click Create API Key in the dashboard and copy the resulting code.
  4. Return to AI Flowchart Studio. On the left panel, click on the 🔑 Gemini API Settings dropdown.
  5. Paste your key into the text box and click Save Key.
Get Google API Key
100% Private Your key is stored securely in your browser's local memory. It is never saved to our servers, ensuring your data remains completely private.

The AI Generator

Turn your natural language into complex visual logic instantly.

How to Generate a Flowchart

The AI Generator is the fastest way to map out processes, user flows, and logic trees.

  1. Make sure the ✨ AI Generator tab is selected in the left panel.
  2. In the Describe Your Flowchart box, type out the logic you want to visualize.
  3. Click the large blue ⚡ Generate Flowchart button.

Writing Great Prompts

The AI works best when you are highly descriptive. Don't just say "make a login flow". Tell it the exact steps!

Good Example: "A user checkout flow. Start at the cart. Check if the user is logged in. If no, redirect to login. If yes, check payment details. If payment fails, show an error and retry. If successful, show confirmation."

The Pipeline Status After clicking Generate, you will see a Pipeline Status list appear. This shows you exactly what the AI is thinking in real-time as it analyzes your prompt, writes the code, and validates it.

The Manual Builder

Take complete control over every single node and connection.

Creating Nodes

Click the ✏️ Manual Builder tab on the left panel to access the manual tools. You can build a flowchart from scratch here, or use these tools to edit a flowchart that the AI generated!

  1. Node ID: Type a unique identifier for the node (e.g., "login_step"). Spaces and special characters are automatically removed for safety.
  2. Node Label: Type the text you want the user to actually see inside the box (e.g., "Enter Password").
  3. Shape: Choose whether the box should be a Rectangle, Diamond (great for decisions), Rounded, etc.
  4. Click Create Node to add it to the canvas.

Linking Nodes Together

Nodes don't do much until they are connected!

  1. Select a Source Node from the first dropdown.
  2. Select a Target Node from the second dropdown.
  3. (Optional) Type a Link Label. This is text that appears on the arrow itself (e.g., "Yes", "No", "Success").
  4. Click Add Link to connect them.
Interactive Node Editing You don't always have to use the side panel! If you click directly on any shape inside the canvas, a floating Node Editor will pop up. You can use it to instantly change the shape, update the label, or delete the node entirely!

Canvas Controls

Master the interactive viewer to perfectly position your flowcharts.

Navigating the Canvas

The main viewing area is highly interactive, especially for massive flowcharts.

  • Panning: Click and hold any empty space on the canvas with your mouse, then drag to move around.
  • Zooming: Use your mouse wheel or trackpad scroll to zoom in and out. Alternatively, use the + and - buttons in the bottom right corner.

The Top Toolbar

At the top of the canvas, you will find several layout controls:

  • Theme Dropdown: Switch the flowchart colors between Light Theme, Dark Theme, or Forest Theme.
  • Direction Dropdown: Change how the flowchart flows. You can make it flow Top-Down (vertical) or Left-Right (horizontal).
  • 🔄 Reset Icon: Clicking this circular arrow instantly resets your zoom and centers the flowchart perfectly on your screen.

Exporting Options

Take your flowchart out of the Studio and into the real world.

Saving Your Work

Once you are happy with your flowchart, use the export buttons located in the top right corner of the canvas toolbar.

<> Code

Clicking this copies the raw, underlying layout code to your clipboard. You can paste this code directly into GitHub READMEs, Notion pages, or Markdown documents to render the flowchart there natively.

📥 SVG

Downloads an incredibly sharp, infinitely scalable vector graphic file. This is the absolute best option if you plan to import the flowchart into a design tool like Figma or Adobe Illustrator.

🖼️ PNG

Downloads a standard, high-resolution image file with a transparent background. This is the best option for quickly sharing the flowchart in an email, Slack message, or presentation slide.