What diagram types does Mermaid support?

Flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, state diagrams, pie charts, user journey diagrams, git graphs, and more. See the Mermaid.js documentation for the full list and syntax for each type.

How do I start a flowchart in Mermaid?

Start with flowchart TD (top-down) or flowchart LR (left-right). Add nodes and edges: A[Start] --> B{Decision} --> C[Result]. The editor renders the diagram in real time as you type.

Can I use the SVG output in a presentation or document?

Yes. SVG is a vector format that scales to any size without pixelation. Export as SVG and insert it into Google Slides, PowerPoint (Insert → Picture), Notion, Confluence, or any tool that accepts SVG or image files.

Is my diagram data safe here?

Yes. Rendering runs in your browser. Nothing is sent to a server.

Back to Dev All tools

◈

Mermaid Diagram Editor

DevNeeds internet · Mermaid.js CDN (first load)

Mermaid Editor renders Mermaid.js diagrams in real time as you type — flowcharts, sequence diagrams, entity-relationship diagrams, Gantt charts, class diagrams, and state machines. Write diagram code on the left, see the rendered diagram on the right, and export as SVG (scalable) or PNG for documentation, README files, and presentations. No account needed. Runs entirely in your browser.

Related: Markdown PreviewSVG OptPreview

Examples:

Theme

Mermaid source

115 chars

Live preview

Type Mermaid syntax to preview your diagram

Diagrams render entirely in your browser via the Mermaid.js reference. Nothing is sent to a server.

What Mermaid Diagram Editor does

Mermaid Diagram Editor Live editor for Mermaid.js flowcharts, sequence diagrams, ER diagrams, Gantt charts — export SVG or PNG. It lives in DevBench's Dev collection — open it in any modern browser with JavaScript enabled. There is no install step and no account wall: you get the UI immediately so you can paste input, tweak options, and copy output during real debugging sessions.

Like the rest of DevBench, this workflow runs entirely in your browser by default. Your text and files are processed with client-side JavaScript, which means they are not sent to our servers for routine formatting or conversion — open DevTools → Network and you should see no upload when you use the core controls. That makes these tools practical for internal payloads, configs, and drafts when you want to avoid unnecessary cloud round-trips.

Start from the controls above: paste or type into the labelled fields, upload when the tool supports files, and watch results update as you work. If output looks unexpected, verify encoding (UTF-8), line endings, and whether the tool expects structured input such as JSON, YAML, CSV, or hex. Many utilities include copy buttons or downloadable results so you can drop answers straight back into tickets, CI logs, or documentation.

When to use it

Quick one-off checks during development — faster than spinning up a REPL when you only need a transform or sanity check.

Sharing your screen: everything stays local to the browser tab so you can demo without pushing sensitive data through a backend.

Pairing with related DevBench tools via the "More Devtools" links when your task spans encoding, parsing, or formatting.

Teaching or documentation walkthroughs where readers can reproduce steps without installing CLI tooling first.

If you need deterministic automation at scale, shell scripts and CI pipelines still win — use DevBench to prototype the transform and validate edge cases, then port the same logic into your stack when you are happy with the behaviour.

Mermaid Diagram Editor

Related tools

What Mermaid Diagram Editor does

When to use it