Live Mermaid preview
See the diagram update as you edit the source. Syntax problems stay visible beside the code instead of failing silently.
Browser-based diagram workspace
Mermaid Online Editor
Write Mermaid syntax, inspect the diagram as it changes, and export a clean SVG or PNG without installing a local renderer. Use the focused workspace below for quick edits, then continue in OnUML when you need AI generation, repair, sharing, or project organization.
Mermaid workspace
Changes render automatically in the preview.
diagram.mmd6 lines
Live previewWaiting
Built for diagram-as-code
A direct Mermaid editing workflow
The page keeps the source and rendered result visible together. That makes every diagram reviewable as both code and communication—not a picture detached from its definition.
Portable source
Keep the diagram as readable text that can live in Markdown, documentation, tickets, and version control.
SVG and PNG export
Download vectors for scalable documentation or a high-resolution image for tools that cannot render Mermaid directly.
Theme-aware output
Switch between Mermaid themes before exporting so the result fits technical documents, presentations, or dark interfaces.
How to use the Mermaid online editor
Keep the first draft small, verify the structure, then add detail. A diagram that is easy to edit is usually easier to read.
- 01
Start with valid Mermaid syntax
Use the included flowchart or replace it with a sequence diagram, class diagram, ER model, Gantt chart, or another supported type.
- 02
Read the live preview
Check labels, direction, hierarchy, and relationships while the source is still easy to change.
- 03
Fix the source, not the picture
When the renderer reports an error, correct the Mermaid declaration or the line identified in the message.
- 04
Export or continue
Download SVG or PNG for immediate use, or move the current source into the full OnUML editor for AI-assisted work.
What can you create with Mermaid?
Mermaid covers more than flowcharts. Choose the diagram type that matches the question your documentation needs to answer.
Browse all Mermaid tools in this release →Mermaid flowcharts
Model decisions, request paths, onboarding steps, and service workflows with connected nodes.
Open the flowchart editor →Mermaid sequence diagrams
Document messages between users, services, APIs, databases, and external systems over time.
Open the sequence editor →Mermaid class diagrams
Model classes, selected members, inheritance, composition, and structural dependencies.
Open the class editor →From quick preview to a complete diagram workflow
Generate from a description
Ask the full editor to turn a system, process, or interaction into Mermaid source.
Repair syntax with context
Use AI-assisted repair when a large diagram fails and the parser message alone is not enough.
Organize and share work
Keep related diagrams together, continue editing later, and share a stable result with reviewers.
Frequently asked questions
Is this Mermaid online editor free to use?
Yes. You can edit Mermaid code, preview the result, switch themes, and export SVG or PNG files directly from this page.
Which Mermaid diagram types can I preview?
The editor uses Mermaid.js and supports its standard diagram syntax, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, timelines, mind maps, and Git graphs.
Can I download a Mermaid diagram as SVG or PNG?
Yes. SVG is ideal for scalable documentation and websites, while PNG works well in presentations and tools that do not render Mermaid syntax.
Do I need to install Mermaid or another application?
No. The preview is rendered in your browser, so you can start from the included example without installing a command-line tool or desktop application.
What is the difference between this page and the full OnUML editor?
This page is designed for quick Mermaid editing and export. The full OnUML editor adds AI generation, syntax repair, project organization, sharing, and multi-diagram workflows.