ChatGPT flowchart: let AI draw it, then edit it yourself

3 ways to make a flowchart with ChatGPT

Ask ChatGPT or Claude to “turn this process into a flowchart” and you’ll get one of three things back.

1. Ask for Mermaid code

The AI writes the flowchart in a text-based diagram language such as Mermaid, which you paste into a Mermaid-compatible editor. It’s fast and can live next to your code, but the layout engine decides where boxes go, every fix means pasting new code, and one syntax error means nothing renders.

2. Ask for an image

An image-capable model draws the flowchart as a picture. That can do for a rough slide sketch, but box text and arrows don’t always come out right, and since it’s a flat image, every change regenerates the whole picture.

3. Connect a diagram tool through MCP

MCP (Model Context Protocol) is an open standard for connecting AI assistants to outside tools. Add the flowdraft MCP server to ChatGPT or Claude and the AI builds a real, editable flowchart in your flowdraft account (step cards, decision diamonds, swimlanes, labeled connections) that you can change in the editor.

How the flowdraft flowchart MCP server works

Once it’s set up, the loop is always the same:

1. You describe the process: who does what, where decisions happen, where it ends.
2. The AI creates a flowchart in flowdraft: steps as cards, decisions as diamonds, start and end as pills, teams as swimlanes.
3. A PNG of it appears in the chat (in Claude and ChatGPT). The AI sees it too and can fix overlapping boxes or cut-off text.
4. You ask for changes (“move the approval step before the warehouse”), and the AI updates the same flowchart and shows the new picture.
5. The flowdraft.tech/?p=… link opens it in the editor for fine-tuning by hand and PNG, SVG or JSON export.

It works the other way too: say “review the flowchart I have open” and the AI reads what’s open in flowdraft, unsaved changes included. It asks you to save before changing it, so your manual edits aren’t overwritten.

Open flowdraft for free →

Setup for ChatGPT, Claude, Claude Code, Cursor and VS Code

Every tool works the same way: add https://flowdraft.tech/mcp to its connector settings, sign in with your flowdraft account on the page that opens and click Allow. No account yet? Open flowdraft and choose Sign in → Sign up; it’s free. The MCP setup guide has every step in detail.

ChatGPT

1. Turn on Developer mode in Settings → Security and login (on some accounts it’s under Apps & Connectors → Advanced settings).
2. On Apps & Connectors, click Create: name flowdraft, the URL above, authentication OAuth. Confirm you trust the app, then sign in and click Allow.
3. In a new chat, pick + → Developer mode → flowdraft. ChatGPT asks you to confirm write actions.

Claude (claude.ai and the desktop app)

1. On claude.ai, open Customize → Connectors and click + → Add custom connector.
2. Name it flowdraft, paste the URL, click Add and then Connect; sign in and click Allow.
3. In a chat, turn flowdraft on under + → Connectors. The connector belongs to your Claude account, so it works in the desktop and mobile apps too.

Claude Code

1. Run this in your terminal: claude mcp add --transport http flowdraft https://flowdraft.tech/mcp
2. Type /mcp, select flowdraft, choose Authenticate and allow access in your browser. The terminal can’t show the picture, so open the flowchart with the link.

Cursor

Add {"mcpServers": {"flowdraft": {"url": "https://flowdraft.tech/mcp"}}} to ~/.cursor/mcp.json, then click the sign-in button next to flowdraft in the MCP section of Cursor’s settings.

VS Code (Copilot)

Add {"servers": {"flowdraft": {"type": "http", "url": "https://flowdraft.tech/mcp"}}} to .vscode/mcp.json, or run MCP: Add Server → HTTP from the Command Palette. VS Code asks you to sign in when the server starts.

Codex and other tools that support remote MCP servers with OAuth use the same URL.

Ready-to-copy prompts for ChatGPT and Claude

Once connected, try one of these. The README prompt is for Claude Code, Cursor or VS Code.

• Use flowdraft to draw our customer return process as a swimlane flowchart with lanes for Customer, Support and Warehouse.
• Review the flowchart I have open in flowdraft, add any missing decision steps and label every branch Yes or No.
• Draw these steps as a top-to-bottom flowchart in flowdraft with a clear start and end: [your steps]
• Use flowdraft to map our new-hire onboarding and mark the manager’s sign-off as a human approval step.
• Draw the setup steps from this repo’s README as a left-to-right flowchart in flowdraft.
• The boxes in the flowchart you just drew look cramped. Space them out, highlight the key step and show me the new picture.
• Translate every label in the flowchart I have open into Turkish without changing the layout.

Example: what a single prompt produces

Here’s what a typical answer to the first prompt looks like in flowdraft: three swimlanes, two decisions, a rejection path and a damaged-item exception.

Open this example in flowdraft ↗

Every decision exit is labeled Yes or No, the main path is green, the exceptions orange, and the refund is highlighted as the key step. For a damaged item, support offers a partial refund or declines the return. Open it in the editor to adapt it, or browse more flowchart examples.

What the AI can and can’t do

It can

• List, read and summarize your saved flowcharts.
• Create flowcharts and update existing ones.
• Delete a flowchart when you clearly ask. Deleting is permanent.
• Read the flowchart open in flowdraft, unsaved changes included.
• Give you a link to the editor with each result, plus a picture of it in the chat in Claude and ChatGPT.

It can’t

• Access anything before you sign in and click Allow, and even then it reaches only your own flowcharts.
• Change a flowchart that was never saved to your account; save it first.
• Draw shapes flowdraft lacks, such as a separate parallelogram (input/output) or document shape; those become labeled step cards. The flowchart symbols guide shows how standard symbols map to flowdraft.

Privacy and access

• The connection uses OAuth: you sign in on flowdraft’s own page, and the AI tool gets an access grant, never your password.
• The tool you approve can list, read, create, change and delete your flowcharts, nothing else.
• While a tool is connected, the flowchart open in flowdraft is written to your account so the tool can read it. Turn this off with Share the open flow with connected AI tools under File → Connect AI tools.
• What the tool sees falls under its own privacy terms (OpenAI, Anthropic and so on).
• Revoke access any time: File → Connect AI tools → Remove access.

Tips for better results from an AI flowchart generator

• Name the tool. Starting with “use flowdraft to …” helps the AI pick the right connector.
• List the actors and decisions. Say who does the work and what happens at each decision; actors become swimlanes and outcomes become labeled branches.
• Pick a direction. Long processes read best top to bottom; swimlane processes, left to right.
• Keep it to one process. Split big processes so each flowchart fits on one screen.
• Fix in the same chat, back up first. Ask for a specific change rather than a redraw, and before a big change, save a copy with Export → JSON (editable).
• Finish by hand. Small tweaks are often quicker in the editor; the 30-second tour shows how it works. New to flowcharts? Read what a flowchart is first.

Draw your flowchart in flowdraft →