Free forever · No sign-up · AI-powered
The fast, free Mermaid viewer & live editor
Paste Mermaid code and see your diagram instantly. Generate diagrams from plain English with AI, fix syntax errors in one click, and export crisp PNG, SVG or PDF.
Supports all 22+ Mermaid diagram types · Mermaid v12
Everything you need to work with Mermaid
A focused, fast editor that does the basics brilliantly — and adds the things other Mermaid viewers are missing.
Instant live preview
Diagrams re-render as you type, with clear error messages that point to the exact line.
AI generate, edit & fix
Describe a diagram in plain English, ask for changes, or repair broken syntax in one click.
PNG, SVG & PDF export
High-resolution PNG up to 6x, clean SVG, vector PDF, or copy the image straight to your clipboard.
Every Mermaid diagram type
Flowcharts, sequence, class, ER, Gantt, mindmaps, timelines, C4, Sankey, architecture and more.
Share links & embeds
Share an editable link without an account, or publish a read-only page and iframe embed.
Built for keyboards
Autocomplete, syntax highlighting, find & replace, and shortcuts for save, export and AI.
Works on any device
A responsive editor with pan, pinch-zoom and full-screen preview on phones and tablets.
Private by default
Diagrams render in your browser and autosave locally. Nothing is stored unless you save it.
AI diagram assistant
From idea to diagram in seconds
Type “sequence diagram for OAuth login with refresh tokens” and get valid Mermaid code streamed straight into the editor. Ask for edits like “add a cache layer” or “make error paths red”, get a plain-English explanation of any diagram, and let AI fix syntax errors for you.
- Generate any diagram type from a description
- Edit existing diagrams with natural language
- One-click fixes for parser errors
flowchart TD
A[Cart] --> B[Checkout]
B --> C{Payment OK?}
C -- Yes --> D[Order confirmed]
C -- No --> E{Attempts < 3?}
E -- Yes --> B
E -- No --> F[Show support options]Every Mermaid diagram type, with examples
Syntax references, live examples and tips for each diagram type.
Flowchart
Map processes, decisions and workflows with nodes, shapes and arrows.
Sequence Diagram
Show how services, users and systems exchange messages over time.
Class Diagram
Model object-oriented code: classes, members and relationships (UML).
State Diagram
Describe state machines: states, transitions, choices and nested states.
Entity Relationship Diagram
Design database schemas with entities, keys and crow's-foot relationships.
Gantt Chart
Plan projects with tasks, durations, dependencies and milestones.
Pie Chart
Show proportions of a whole with a simple labelled pie chart.
Mindmap
Brainstorm and organise ideas with an indentation-based mind map.
Timeline
Show events in chronological order, grouped by period or section.
Git Graph
Visualise Git branches, commits, merges and release tags.
User Journey
Map user experiences step by step with satisfaction scores.
Quadrant Chart
Plot items on a 2×2 matrix for prioritisation and positioning.
Sankey Diagram
Show how quantities flow between categories with weighted links.
XY Chart (Bar & Line)
Bar and line charts with categorical or numeric axes.
Requirement Diagram
Trace requirements to the elements that satisfy and verify them (SysML).
C4 Diagram
Document software architecture using the C4 model (context, containers…).
Block Diagram
Lay out system components in a grid you control, with spans and nesting.
Packet Diagram
Visualise network packets and binary formats bit by bit.
Kanban Board
Show work items as cards in columns such as To do, Doing and Done.
Architecture Diagram
betaDraw cloud and infrastructure diagrams with services, groups and icons.
Radar Chart
betaCompare items across several dimensions on a spider chart.
Treemap
betaShow hierarchical data as nested rectangles sized by value.
How to view a Mermaid diagram online
- 1
Write or paste Mermaid code
Open the editor and type Mermaid syntax, paste code from a README, or start from a template.
- 2
Preview and refine
Watch the diagram update live. Use pan, zoom and themes, or ask the AI assistant to edit it for you.
- 3
Export or share
Download PNG, SVG or PDF, copy Markdown, or share a link or embed with your team.
How MermaidViewer compares
The speed and simplicity of the official live editor, with the AI and sharing features of paid tools — free to start.
| Feature | MermaidViewer | Mermaid Live Editor | Mermaid Chart |
|---|---|---|---|
| Free without sign-up | Yes | Yes | Limited |
| AI generate / edit / fix | Yes (free daily quota) | No | Paid plans |
| PNG, SVG & PDF export | Yes, up to 6x PNG | PNG & SVG | Yes |
| Autocomplete & error line highlighting | Yes | Partial | Yes |
| Saved diagrams, folders & versions | Yes | No (browser only) | Yes |
| Public share links & embeds | Yes | Link only | Yes |
| Pro price | $6/month | — | From ~$8/month |
Read the full comparisons: Mermaid Live Editor alternative · Mermaid Chart alternative · Best Mermaid editors
Start from a template
30+ ready-to-edit Mermaid templates for software, product and business.
User Login Flowchart
A login flow with credential checks, two-factor authentication, lockout and password reset branches.
SoftwareOAuth 2.0 Authorization Code Flow
Sequence diagram of the OAuth 2.0 authorization code flow with PKCE between user, client, authorization server and API.
DevOpsMicroservices Architecture
Microservices overview with API gateway, services, message broker, databases and observability.
DataE-commerce Database ER Diagram
Entity relationship diagram for an online store: customers, addresses, orders, order items, products, categories and payments.
ProductProject Roadmap Gantt Chart
A three-month product roadmap with discovery, design, development, testing and launch phases plus milestones.
DevOpsCI/CD Pipeline
Continuous integration and delivery pipeline from commit through tests, build, staging and production with approvals.
Frequently asked questions
What is MermaidViewer?
MermaidViewer is a free online Mermaid diagram viewer and editor. Write Mermaid code and see the diagram instantly, generate diagrams with AI, export to PNG, SVG or PDF, and share links or embeds.
Is MermaidViewer free?
Yes. The editor, live preview, exports, templates and share links are free and work without an account. A free account adds cloud saving and a daily AI quota; the Pro plan adds unlimited diagrams, higher AI limits and more version history.
Do I need to sign up?
No. Open the editor and start typing. Your work is autosaved in your browser. Sign up only if you want to save diagrams to the cloud, organise them in folders and access them from any device.
Which Mermaid diagram types are supported?
All of them: flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, git graph, user journey, quadrant, sankey, XY chart, requirement, C4, block, packet, kanban, architecture, radar and treemap, plus any new types in the latest Mermaid release.
How does the AI diagram generator work?
Describe the diagram you want in plain language. MermaidViewer sends the request to an AI model on our server, which writes Mermaid code that streams into the editor and renders live. You can also ask the AI to edit, fix or explain an existing diagram.
Is my diagram data private?
Diagrams you create without an account stay in your browser's local storage. Saved diagrams are private to your account unless you explicitly make them public. AI requests send the diagram text to our AI provider only when you use an AI feature.
Can I export Mermaid diagrams as images?
Yes. Export PNG at up to 3x resolution (6x on Pro) with a transparent or solid background, export a vector SVG, export a PDF, or copy the image straight to your clipboard.
Can I embed diagrams in my website or docs?
Yes. Save a diagram, make it public and copy the embed code. The iframe always shows the latest saved version, so updates appear everywhere automatically.
More answers in the FAQ.
Turn your next idea into a diagram
No account, no install, no watermark. Open the editor and start typing.
Open the Mermaid editor