Mermaid Live Editor

Turn Mermaid text into flowcharts, sequence, class and state diagrams with a live preview — then export SVG or PNG, all in your browser.

This Mermaid editor turns diagram text into flowcharts, sequence, class and state diagrams with a live preview. Use it to sketch a flowchart from text, draw a sequence diagram for docs, or build a diagram to drop into a README, then export it. You can save the result as a crisp SVG or a PNG for slides. It runs in your browser.

How it works

  1. 1

    Write Mermaid

    Type a Mermaid diagram definition, or start from the built-in example.

  2. 2

    Preview live

    The diagram renders instantly and re-renders as you edit.

  3. 3

    Export

    Download the diagram as a crisp SVG or a PNG for slides and docs.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

Which diagram types are supported?
All Mermaid types — flowcharts, sequence, class, state, entity-relationship, Gantt, pie, mindmaps and more.
Can I export the diagram?
Yes. Export to scalable SVG for documentation, or to PNG when you need a raster image for slides or chat.
Why isn’t my diagram rendering?
Mermaid is whitespace- and syntax-sensitive. The editor shows the parser error so you can spot the offending line; check the diagram type declaration on the first line.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.OpenAPI & Swagger ViewerRender an OpenAPI / Swagger spec into a browsable API reference.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.