Skip the drag-and-drop. Describe your process in Mermaid's text syntax and Merflow lays out the flowchart for you, live — then export it as SVG or PNG.
This is all the "drawing" you do — the layout, spacing and routing are computed for you:
flowchart TD
A[User types] --> B{Valid syntax?}
B -- Yes --> C[Render with Mermaid]
B -- No --> D[Show error overlay]
C --> E[Live preview]
D --> E
E --> F([Export SVG / PNG])
Because a flowchart is just text, it diffs cleanly in git, lives next to your code or docs, and can be regenerated or edited by anyone — no proprietary file format.
Rectangles [ ], rounded ( ), stadiums ([ ]), decisions { }, circles, cylinders (databases), subroutines and more.
Top-down TD, left-right LR, bottom-up, right-left — and nested subgraph blocks to group related steps.
Solid, dotted and thick arrows, with labels on any branch (-- Yes -->) to document decision paths.
Per-node classes and colors via classDef, plus diagram-wide themes: default, dark, forest, neutral, base.
In Merflow specifically, the Monaco editor autocompletes flowchart keywords and arrows, flags syntax errors on the exact line, and the template gallery gives you a working starting point for every diagram type.
Start with flowchart TD (top-down) or flowchart LR (left-right), then describe nodes and arrows: A[Start] --> B{Decision?}. The preview updates as you type.
Curly braces make a rhombus decision node, and edge labels name each branch: B{Valid?} -- Yes --> C, B -- No --> D.
Yes, free: SVG (vector) or PNG at 1×/2×/3× with white, theme or transparent background — or copy the image to the clipboard.
Completely. No signup, no watermarks, no export limits — diagrams live in your own browser.