Mermaid Online Editor

01 · about

A free online Mermaid editor and renderer

Turn Mermaid text into diagrams as you type. Nothing to install: open the page, paste your code and see the result. Every Mermaid diagram type works, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts and mind maps.

How to use the Mermaid online editor

1. step 1

   Paste or write Mermaid code

   Paste code into the editor on the left, or start from a flowchart, sequence diagram or other template under Examples.

2. step 2

   Pick a theme and layout

   Choose a color theme. For complex subgraphs, switch Layout to ELK. The preview updates as you go.

3. step 3

   Export or copy the diagram

   Click Export PNG or Export SVG to download, or copy the PNG or SVG straight into docs, slides or chat.

Supported Mermaid diagram types

Flowchart

Describe processes, decisions and system architecture with flowchart / graph, including subgraphs and many node shapes.

Sequence diagram

Show the order of messages between participants, such as API calls or a login flow.

Class diagram

Model classes, fields, methods and inheritance for object-oriented design and UML.

State diagram

Show states and the transitions between them, such as an order lifecycle.

ER diagram

Map database entities and their one-to-many and many-to-many relationships.

Gantt chart

Lay out tasks and milestones on a timeline for project planning.

Pie chart

Show proportions from simple label and value pairs.

Mindmap

Organize ideas and knowledge in an indented hierarchy.

Features

• 01

  Live preview

  Edit on the left, see it render on the right, with instant syntax errors.

• 02

  Color themes

  Multi-color themes give every node its own background.

• 03

  Export & copy

  Download a sharp PNG or a vector SVG, or copy to the clipboard.

• 04

  Autosave

  Your code stays in your browser and survives a reload.

FAQ

What is Mermaid?

Mermaid is a text-based diagram language. A few lines of code produce flowcharts, sequence diagrams, class and state diagrams, Gantt charts, ER diagrams, pie charts and mind maps, which makes diagrams easy to keep in Markdown and version control.

How do I export a Mermaid diagram to PNG or SVG?

Paste your Mermaid code into the editor and the preview updates live. Click Export PNG or Export SVG to download. PNG exports at 2x resolution for crisp results.

Can I change the colors and theme?

Yes. Pick from Klein, Default, Neutral, Forest, Dark, Rainbow, Pastel, Ocean, Sunset and Neon. Multi-color themes give each node a different background, and colors you set with style or classDef are kept.

Why is there a big empty area inside a subgraph?

That comes from dagre, Mermaid's default layout engine, usually when nodes in a subgraph have several edges to and from nodes outside it. Switch Layout to ELK at the top, or add config: layout: elk to the start of your code.

Is my code uploaded to a server?

No. Rendering happens entirely in your browser, and your code is only saved to your own browser's local storage.