Mermaid Editor | Browser-based Flowchart & Diagram Editor

Enter Mermaid code in the editor to see the preview.

Syntax error

100%

Files

✨ Key Features

Browser-based — no install required, runs entirely in your web browser
Multi-file management — save multiple diagrams locally in your browser storage
Real-time preview — diagrams are generated instantly as you type code
Wide diagram support — flowcharts, sequence diagrams, ER diagrams, Gantt charts and more

🪄 Use Cases

System Design & Architecture

Visualize system design with ER diagrams and flowcharts. Text-based and easy to version-control.

Business Flows & Processes

Diagram business workflows and processes as flowcharts. Embed in docs and share with your team.

API & Sequence Diagrams

Visualize API communication flows and user interactions with sequence diagrams for specs.

Project Management & Gantt Charts

Manage project schedules and task dependencies with Gantt charts.

🔒 Privacy & Security

All diagram data is stored in your browser's local storage. Nothing is sent to any external server.

❓ FAQ

What is Mermaid syntax?

A text-based diagramming syntax. Write flowcharts, sequence diagrams, ER diagrams and more with simple text code. Also used in GitHub READMEs, Notion, and Obsidian.

Can I export diagrams?

Yes. From the download menu at the top of the preview you can save the diagram as an SVG file or as a PNG (with a transparent or solid background). You can also copy the SVG to your clipboard.

Where are files saved?

All files are saved in your browser's local storage. Nothing is sent to any external server.

Do I need an internet connection?

Only for the initial load. After that, creating, editing, and previewing diagrams all happen on your device, and your input is never sent anywhere.

※ Some beta features like sankey-beta may fail to parse multibyte characters due to Mermaid's specification. If you encounter an error, try using ASCII characters.

1 行 0 文字 Ln 1, Col 1