Flowchart Maker

Write a flowchart as text in Mermaid-style syntax and get a laid-out diagram, exported as SVG or PNG.

Flowchart text

flowchart TD
    start([Open the app]) --> signed{Signed in?}
    signed -->|Yes| home[Home screen]
    signed -->|No| form[Sign-in form]
    form --> check{Password right?}
    check -->|Yes| home
    check -->|No| tries{3 tries used?}
    tries -->|No| form
    tries -->|Yes| lock((Locked))

7 boxes, 8 links

Syntax

A[Box] B(Round) C{Choice} D((Circle)) E([Pill]): Shapes. The name before the brackets links boxes; the text inside is the label.
--> --- -.-> ==>: Arrow, plain line, dotted arrow, thick arrow.
A -->|Yes| B A -- No --> B: A label on a link.
A --> B --> C A & B --> C: Chains, and several boxes at once.
flowchart LR %% note: Direction (TD, LR, BT, RL) on the first line; %% starts a comment.

Diagram

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

Flowchart Maker turns a few lines of text into a tidy diagram. Each line links boxes — “A --> B” draws an arrow from A to B — and brackets set a box’s shape and label: square brackets for a step, curly braces for a decision, double parentheses for a start or end. The diagram is laid out automatically as you type: boxes are arranged in rows so that arrows flow one way, ordered to avoid crossings, and spaced so nothing overlaps; loops back to an earlier step are drawn the right way round. The syntax is a subset of Mermaid’s flowchart syntax, so the text also works in GitHub, GitLab and Notion, which render Mermaid themselves. Download the drawing as SVG for documents or PNG for slides and chats.

How to use it

Start from a sample, or clear the text and write your own, one link per line.
Name each box once with its label, for example check{Paid?}; after that, the name alone is enough.
Label a link with A -->|Yes| B or A -- Yes --> B.
Change the direction with the menu above the diagram, or write flowchart LR on the first line.
If a line is wrong, the line number turns red and the message says what is expected; the last good drawing stays on screen meanwhile.
Zoom to fit a large chart, then download it as SVG or PNG, or copy the text to paste into Markdown.

Limits and your data

This reads a subset of Mermaid’s flowchart syntax: shapes [ ], ( ), { }, (( )) and ([ ]); links -->, ---, -.->, ==> with labels; chains and &. Subgraphs, styles, classes, click actions and other diagram types are not drawn, and the message says so rather than guessing.
Up to 150 boxes and 400 lines.
The layout is automatic and the same text always gives the same drawing; boxes cannot be dragged by hand.
Mermaid itself may place boxes differently: it uses its own layout engine.
The text and the drawing stay in this page. Nothing is uploaded, and the PNG is made by your browser.

Questions

Can I paste this into GitHub or Notion?

Yes. Put the text in a code block marked mermaid (three backticks followed by mermaid). GitHub, GitLab, Notion and many wikis draw it with Mermaid. Everything this tool accepts is valid Mermaid flowchart syntax.

Why does my loop arrow bend around?

A link back to an earlier box, such as “try again”, runs against the flow. The layout sets it aside while ordering the rows, then draws it from the later box back to the earlier one, which keeps the rest of the chart flowing one way.

How do I put a line break in a label?

Write <br> where the break should go, as in A[First line<br>Second line]. Long labels also wrap on their own at about 24 characters.

Why use this instead of Mermaid Live?

It loads instantly and works offline, because it does not download the Mermaid library. For subgraphs, sequence diagrams or Gantt charts, Mermaid’s own editor is the right tool.