Flowchart Maker — Text-to-Diagram with Mermaid, In Your Browser

100%

Drag shapes to move them · double-click a shape to rename it · drag from a shape's + handle to connect · hold Space and drag to pan · scroll to zoom

Selected

Nothing selected. Click a shape or an arrow to edit it here — the Delete key removes the selection.

Download

Play runs the diagram step by step on the canvas; Video downloads that same animation as a .webm file.

White background on PNG export (off = transparent; if you picked a canvas background colour in the Shapes panel, that colour is used instead)

Diagram code

Insert:

Syntax in one breath: A[Text] is a box, B{Text} a decision, C((Text)) a round start/end, and A --> B connects them. Letters are just IDs — reuse one to connect more arrows to the same box. The canvas and the code are two views of the same chart: drag shapes and the code follows; edit the code and press Apply code to rebuild the canvas.

Start from a template

Diagram theme

The flowchart templates open on the canvas, ready to drag — or browse them with previews from the Templates button. The other diagram types are drawn from code by the Mermaid engine, exactly as before — pick one and its code lands in the code panel.

UNDERSTAND YOUR RESULTS

Flowchart Maker — Text-to-Diagram with Mermaid, In Your Browser guide

Create flowcharts and diagrams by typing simple text — the Mermaid engine turns lines like "A --> B" into polished, publication-ready diagrams with a live preview as you type. Templates cover flowcharts, sequence, class, state and ER diagrams, Gantt timelines and user journey maps, with PNG and SVG export. Free, private — nothing is uploaded.

How to use this tool

Pick a template to start from (or clear the box and write your own), then edit the code. The preview re-renders as you type; if something does not parse, the problem is shown under the preview so you can fix it.
Build with the building blocks: A[Text] is a step, B{Text} a decision, C((Text)) a round start/end, and A --> B connects them. Letters are reusable IDs — give two arrows the same letter and they share one box. The Insert chips drop in common pieces without typing syntax.
Choose a theme to match your document, then download the diagram as an SVG (infinitely scalable, ideal for docs and slides) or a high-resolution PNG, or copy the SVG code to embed it directly.

A worked example

Documenting a returns process for a staff handbook: start from the flowchart template, rename the steps to "Customer emails support", "Within 30 days?" and "Refund or replace", and the finished diagram exports as a crisp PNG that drops straight into the handbook — and because the diagram is text, next quarter’s update takes thirty seconds.

How it works

Diagrams are rendered by Mermaid, the open-source text-to-diagram engine adopted by GitHub, GitLab and Notion. Mermaid parses your code into a graph, lays it out automatically with its layout engine and draws it as SVG in the page. PNG export rasterizes that SVG at up to 3× resolution so text stays sharp in print and slides.

Frequently asked questions

I have never written diagram code — is this for me?

Yes: the templates carry you. Change the words inside the brackets and the diagram follows; the Insert chips add steps and decisions without typing syntax. Most people are editing confidently within two minutes.

What diagram types are supported?

Everything Mermaid supports: flowcharts, sequence diagrams, class diagrams, state diagrams, ER (database) diagrams, Gantt charts, user journeys, pie charts, mindmaps and more — the first word of the code picks the type, as the templates show.

PNG or SVG — which export should I use?

SVG wherever the destination accepts it (web pages, docs, slides): it is tiny and sharp at any size. PNG for tools that want a picture file — it exports at high resolution, with a white or transparent background.

Can I use the diagrams commercially?

Yes — the diagrams you create are yours, and Mermaid itself is MIT-licensed open source. Nothing here restricts what you do with the output.

Is my diagram text uploaded?

No. Mermaid runs entirely in your browser; your processes and plans never leave your device.