Real-time Preview
Free & Open Source
AI Powered

Diagrams as Code

Made Simple

Create stunning flowcharts, sequence diagrams, and more with simple text syntax. Powered by Mermaid.js, enhanced with AI assistance, and instant live previews.
Start Creating Free
GitHub
Simple Workflow

How It Works

Create professional diagrams in four simple steps
1
Write Code

Use simple Mermaid syntax to describe your diagrams. No complex tools needed.

2
See Preview

Watch your diagrams come to life instantly as you type with real-time rendering.

3
Enhance with AI

Let AI help you refine, expand, or create diagrams from natural language.

4
Export & Share

Export as SVG/PNG or share via link. Embed anywhere with ease.

Visual Coding

editor.mmd
graph TD
YesNoStartIs it working?Great!Debug
Powerful Features

Everything you need

Powerful features built for developers, by developers.
Real-time Preview

See your changes instantly as you type. No more switching contexts or waiting for renders. Catch errors early and perfect your diagrams faster.

Presentation Mode

Enter a distraction-free full-screen view for your diagrams. Perfect for meetings and demos. URL state is preserved.

AI Assistant

Stuck on syntax? Just say what you want and let Gemini handle it for you. Refine and expand with ease.

Cross-Device Sync

Sign in with GitHub or Google to sync your diagrams across all your devices for free. Access your work from anywhere, anytime.

Template Library

Browse 70+ ready-made templates across 18 diagram categories including Flowcharts and Sequence diagrams to kickstart your project.

Dark & Light Modes

Customizable interface themes to reduce eye strain. Choose from a variety of syntax highlighting themes to match your preference.

Export & Share

Export your diagrams as high-quality SVG or PNG images. Share diagrams with a single link or embed them in your own sites.

📚 Learn Mermaid Syntax

New to Mermaid? Check out the official documentation to learn about all diagram types and syntax:

Official Mermaid Documentation →

Frequently Asked Questions

Yes, the core editor is completely free and open source. You can create, save (locally), and export diagrams without any cost.

No, you can start creating diagrams immediately using local storage. However, signing in with GitHub or Google allows you to sync your diagrams across devices for free.

The AI Assistant helps you generate Mermaid syntax using Google's Gemini AI. You can use it for free with our provided key, or optionally provide your own Gemini API key for higher limits.

Yes, the diagrams you create are yours. The editor itself is open source under GPL-3.0.

Yes! All your diagrams and settings are saved locally in your browser by default. You can work completely offline without an internet connection.

You can share diagrams by copying the URL (which contains the diagram code) or by using the 'Embed as iframe' feature to add it to your website. You can also export as PNG/SVG.

Open Source

Mermaid Editor is 100% open source and free to use. Contribute, report issues, or star the repo to show your support!
View on GitHub
Mermaid Editor

Create beautiful diagrams and visualizations with our powerful, open-source Mermaid editor. Design flowcharts, sequence diagrams, and more with ease.

Resources
Mermaid Documentation↗GitHub Repository↗Report an Issue↗
Legal
Privacy Policy↗Terms of Service↗
Get Started
Open Editor →No sign-up required. Start creating diagrams instantly.

Enjoying Mermaid Editor?

Buy me a coffee ☕

to help ship faster and keep features free!

© 2026 Mermaid Editor. Built by sametcc.me

Open Source
GPL-3.0 License