What Is the Mermaid Diagram Editor?

The Mermaid Diagram Editor is an interactive tool that lets you write diagram code using Mermaid.js syntax and see the rendered result instantly. Whether you need a quick flowchart, a detailed sequence diagram, or a project Gantt chart, you can create it right in your browser with simple text-based code.

Mermaid is a popular open-source diagramming language that turns markdown-like text into professional diagrams. This editor provides a split-pane interface with a code editor on one side and a live preview on the other, so you can see your changes as you type.

Why Mermaid? Text-based diagrams are version-controllable, easy to update, and can be embedded directly in documentation without external image files.

Supported Diagram Types

Flowchart

Process flows, decision trees, and workflows

Sequence Diagram

Interactions between systems or actors over time

Class Diagram

Object-oriented class structures and relationships

State Diagram

State machines and transitions

ER Diagram

Entity-relationship models for databases

Gantt Chart

Project timelines and task schedules

Pie Chart

Data distribution and proportions

Mindmap

Brainstorming and idea organization

Git Graph

Branch and commit visualizations

How to Use the Mermaid Diagram Editor

Getting Started

Load Sample Diagram

The editor loads with a sample flowchart. You can start editing it immediately or pick a different diagram type from the Templates dropdown.

Write Your Code

Write your Mermaid code in the left panel. The diagram preview updates automatically as you type, giving you instant visual feedback.

Fix Errors

If there's a syntax error, an error message appears below the editor to help you identify and fix the issue quickly.

Using Templates

Click the Templates button in the toolbar to choose from 9 built-in diagram templates. Each template provides a working example that you can modify to fit your needs.

Pro Tip: Templates are the fastest way to learn Mermaid syntax. Start with a template similar to your goal, then customize it step by step.

Editing Code

Smart Indentation

Keyboard shortcuts for efficient code formatting

Press Tab to insert indentation (4 spaces)
Press Shift+Tab to remove indentation

Line Numbers & Auto-Save

Enhanced editing experience

Line numbers help track code structure
Your code is automatically saved and restored when you return

Preview Controls

Use the zoom buttons (+/−) or Ctrl + mouse wheel to zoom between 25% and 300%
Click the reset button to return to 100% zoom
Drag the resize handle between panels to adjust the editor/preview split

Exporting Your Diagram

SVG Export

Downloads a scalable vector file, ideal for web use and documents. Scales to any size without quality loss.

PNG Export

Downloads a high-resolution image (2x scale) for presentations and sharing on high-DPI screens.

Copy SVG

Copies the SVG code to your clipboard for pasting into other tools or embedding in web pages.

Features

Live Preview

See your diagram rendered in real time as you type. The preview updates automatically with a short delay, so you get instant visual feedback without interrupting your workflow.

9 Diagram Types

Create flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mindmaps, and git graphs — all from text-based code using Mermaid.js syntax.

Built-in Templates

Start quickly with ready-made templates for every supported diagram type. Each template includes a working example that demonstrates the syntax and structure.

Code Editor with Line Numbers

The editor features line numbers, Tab/Shift+Tab indentation, and real-time error feedback. Syntax errors are displayed clearly below the editor so you can fix issues immediately.

Flexible Export Options

Export your finished diagrams as SVG for scalable vector graphics, or PNG for high-resolution images at 2x scale. You can also copy the SVG code directly to your clipboard.

Zoom and Resize

Zoom the preview from 25% to 300% using buttons or Ctrl + mouse wheel. Drag the resize handle to adjust the editor and preview panel sizes to your preference.

Auto-Save

Your code is automatically saved to your browser's local storage. When you return to the editor, your work is exactly where you left it.

Dark Mode

The editor fully supports dark mode. When you switch themes, the Mermaid diagram theme automatically updates to match, ensuring your diagrams always look right.

Your Data Stays Private

All rendering happens in your browser

No uploads — Your code never leaves your device
No tracking — We don't collect usage data

Frequently Asked Questions

What is Mermaid.js?

Mermaid.js is an open-source JavaScript library that generates diagrams and charts from text-based definitions. Instead of drawing diagrams manually, you write simple code that describes the structure, and Mermaid renders it as a visual diagram.

This approach makes diagrams version-controllable, easy to update, and perfect for embedding in documentation, wikis, and markdown files.

What diagram types can I create?

This editor supports 9 diagram types:

Flowcharts
Sequence diagrams
Class diagrams
State diagrams
ER (entity-relationship) diagrams
Gantt charts
Pie charts
Mindmaps
Git graphs

How do I learn Mermaid syntax?

The easiest way to start is by selecting a template from the dropdown menu. Each template provides a working example that you can study and modify.

The Mermaid.js documentation also provides comprehensive syntax references for each diagram type. Start with simple examples and gradually add complexity as you become familiar with the syntax.

What's the difference between SVG and PNG export?

SVG

Vector Format

Scales to any size without losing quality
Ideal for documents and websites
Can be edited in vector graphics software
Smaller file size for simple diagrams

PNG

Raster Image

Exported at 2x resolution for sharp display
Suitable for presentations and sharing
Works on high-DPI screens
Universal compatibility

Is my code saved?

Yes, your code is automatically saved to your browser's local storage. When you revisit the editor, your last code is restored.

Important: Clearing your browser data will also clear saved code. For important diagrams, export them as SVG or PNG files for backup.

Why does my diagram show an error?

Mermaid has specific syntax rules for each diagram type. Common issues include:

Missing arrows (e.g., --> or --->)
Incorrect keywords or diagram type declarations
Mismatched brackets or quotes
Invalid node IDs or special characters
Improper indentation in certain diagram types

Check the error message below the editor for details on what went wrong. The message usually indicates the line number and type of error.

Can I use this on mobile?

Yes. On smaller screens, the layout switches to a vertical arrangement with the editor on top and the preview below. All features remain available, including templates, export options, and zoom controls.

For the best experience on mobile, we recommend using landscape orientation when working with complex diagrams.