Flowchart maker

Flowchart Generator — type text, get a clean flowchart

Make a flowchart online by typing plain text. Each line declares a step or a decision, arrows connect them, and the preview re-renders live — already laid out for presentation, not a cramped default. Free, no signup, exports to SVG and PNG.

Mermaid sourceedit to preview live
Theme
Beautified Mermaid diagram preview

This is a quick preview. The full editor adds AI generate, save & share links, every theme, and watermark-free HD export.

Open full editor →

What is a flowchart?

A flowchart maps a process as steps and decisions connected by arrows: rectangles for actions, diamonds for yes/no branches, with flow read top-to-bottom or left-to-right. It is the most universal diagram there is — onboarding flows, support triage, deployment pipelines, approval chains — anywhere a process has steps and branch points.

Common use cases

Process documentation

Support triage, incident response, approval chains — write the process as text once and the diagram stays easy to update when the process changes.

Engineering flows

Deployment pipelines, request handling, background jobs — a flowchart makes branch conditions and failure paths reviewable in one glance.

Product and user flows

Signup funnels, checkout paths, feature decision trees — sketch alternatives quickly because rearranging text beats redrawing boxes.

Syntax quick reference

The essentials to get productive — paste any of these into the editor above and adapt. For the full grammar, see the flowchart syntax reference.

SyntaxWhat it does
flowchart TDStart a flowchart, top-down. Use LR for left-to-right.
A[Step label]A process step (rectangle).
B{Question?}A decision point (diamond).
A --> BAn arrow from A to B.
B -->|Yes| CA labelled branch — the text rides on the arrow.
subgraph Name … endGroup related steps in a labelled container.

Export options

SVG

Vector output with fonts inlined — crisp at any zoom, right for docs, READMEs, and the web.

PNG

Raster with optional transparent background and up to 4× scale — right for slides and tickets.

Share link

One click publishes a share page with the beautified diagram — no file juggling for reviews.

Frequently asked questions

How do I make a flowchart online for free?

Type the process as text in the editor above — one line per step, arrows between them, |labels| on branches. The flowchart renders live with a presentation-ready layout and exports to SVG or PNG without signup.

How do I add a decision with yes/no branches?

Write the decision in curly braces — B{Approved?} — then give each outgoing arrow a label: B -->|Yes| C and B -->|No| D. The preloaded example above shows two decision points; edit it in place to see the branches re-render.

Can the flowchart flow left-to-right instead of top-down?

Yes — change the first line from flowchart TD to flowchart LR. Top-down suits approval chains and triage trees; left-to-right suits pipelines and timelines.

Why does this flowchart look better than a default Mermaid render?

The layout is rewritten before rendering — spacing, edge routing, and branch alignment are recomputed for legibility, so the exported diagram is the polished version rather than the cramped pastel default.

Can I generate the flowchart from AI output?

Yes. Ask any AI assistant for "a Mermaid flowchart of …", paste the code here, and it renders with a beautified layout. A command-line tool and editor plugins let agents and scripts export flowcharts directly.

Is this flowchart maker really free?

Yes. Anonymous use covers live preview, beautify, and SVG/PNG export with a small watermark; a free account removes the watermark. Per-month export quotas are listed on the pricing page.

Ready to make your own?

Open the full editor to save your work, switch themes, and export clean SVG or PNG. No signup.