Free online flowchart maker

How to make a flowchart online in 4 steps

1. Open the editor. It fills the top of this page and is ready at once. Start on the blank canvas or pick a template under File → New flow.
2. Add shapes. Drag Start / End, Step and Decision from the parts panel on the left onto the canvas. On a phone, tap Add at the bottom.
3. Connect them. Drag from a dot on one box's edge to another box. Select each arrow that leaves a decision and label it “Yes” or “No”.
4. Save and export. Your drawing stays on this device as a draft. Sign in with a free account to save it to the cloud, turn on auto-save and export a PNG image, an SVG vector or editable JSON.

For planning tips, swimlanes and shortcuts, read the full guide on how to make a flowchart.

What you can draw with this flowchart maker

flowdraft's ready-made parts cover the flowcharts most people need:

• Process flowcharts for orders, refunds, approvals and onboarding.
• Algorithm flowcharts for programming classes, such as the flowchart to find the largest of three numbers, even or odd and factorial.
• Swimlane diagrams that show which person, team or system does each step.
• Workflow and automation diagrams with bots, systems, databases and human approval steps.
• Chatbot and conversation flows drawn with chat bubbles.

Features of the free flowchart maker

• Works without an account; your drawing is kept on the device as a draft
• Ready-made parts: step, decision, human approval, start/end, person, bot, system, database, chat bubble, note, swimlane
• Connections: solid, dashed or dotted; 6 colors; stepped, curved or straight; flow animation and labels
• Export to PNG, SVG and JSON
• Cloud save and auto-save with a free account
• Draw flows from AI tools such as ChatGPT, Claude and Cursor over MCP
• Turkish and English interface, light and dark theme, installable as a PWA

Flowchart symbols, ready to drag in

The parts panel covers the standard flowchart symbols: an oval Start / End, a Step for each action, a Decision diamond for yes/no questions and arrows for the direction of flow, plus person, bot, system, database, note and swimlane parts. For input and output, use a Step card tagged INPUT or OUTPUT. Every shape and its meaning is in the guide to flowchart symbols.

Make a flowchart with ChatGPT or Claude

Add flowdraft to ChatGPT, Claude, Claude Code, Cursor or VS Code as an MCP server at https://flowdraft.tech/mcp. Describe a process in the chat and the AI draws it as a real flowchart in your account. Claude and ChatGPT show a picture of it in the chat, and you can keep editing it here. For setup, see flowcharts with ChatGPT or Claude and the MCP setup page.

Flowchart guides and examples

• What is a flowchart?The meaning of a flowchart, its main types and symbols, and how to make one step by step.
• Flowchart symbols and their meaningsAll 19 common shapes, the 5 you'll use most and the rules for using them.
• Flowchart examplesLargest of three numbers, even or odd, factorial, sum of 1 to N, an order process and more, each ready to edit.
• Flowcharts with ChatGPT or ClaudeThree ways to get a flowchart from AI, and how to connect the flowdraft MCP server.
• 30-second product tourSee flowdraft in action in a short video.