Flow & behavior
Write a flowchart in Mermaid text and see it render live, then export SVG, PNG, or PDF — all in your browser, nothing uploaded.
There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check. See how it stays private.
How to make a flowchart from text
- Write the flow. Describe nodes and arrows in Mermaid flowchart syntax.
- See it render. The diagram updates live as you type.
- Style it. Adjust direction (top-down or left-right) and node shapes.
- Export. Download SVG, PNG, or PDF.
Flowcharts are the workhorse diagram — processes, decisions, and logic — and drawing them by hand in a canvas tool is slow to edit. Writing them as Mermaid text flips that: you describe the steps and arrows, and the layout engine draws a tidy chart you can restyle in seconds.
Because the source is plain text, a flowchart lives happily in a README or a pull request and diffs like code, so it never drifts out of date the way an exported image does.
For interactions over time use the Sequence diagram, for lifecycles use the State diagram, or switch engines freely in the Playground.
Frequently asked questions
How do I make a flowchart from text?
Write the steps and decisions in Mermaid's simple arrow syntax (A --> B, B -- Yes --> C) and it renders a flowchart instantly — no dragging boxes around.
Why use diagram-as-code instead of a drag-and-drop editor?
Text diagrams diff cleanly in Git, are fast to edit, and stay consistent automatically. You describe the logic; the layout is handled for you.
Can I export a transparent or high-res image?
Yes. SVG is vector (infinitely scalable), and PNG/PDF export are available for slides and docs.
Is my diagram source uploaded?
No. Mermaid renders in your browser tab, so the text and the diagram — which may describe internal systems — never leave your device.
Related tools
- Sequence diagramTurn a few lines of Mermaid into a clean sequence diagram of actors and messages. Live preview and SVG/PNG/PDF export, 100% on-device.
- State diagramModel state machines and transitions with Mermaid and render them instantly. Export vector or raster — your text never leaves the tab.
- PlaygroundA free-form canvas for any Mermaid diagram or Graphviz DOT graph. Switch engines, edit live, and export — all on-device, nothing uploaded.
- Graphviz (DOT)Render Graphviz DOT graphs with the real Graphviz engine compiled to WebAssembly — runs fully in your browser. Export SVG, PNG, or PDF.