Flowchart
Map decisions and processes with nodes, arrows and Mermaid shapes such as rounded boxes and diamonds.
Mermaid Viewer Online
Paste your Mermaid code on the left and watch the diagram render instantly on the right. Analyze and fix Mermaid syntax in one click, optimize your code, and export the result to PNG, SVG or PDF — free, private, no sign-up.
- 100% free
- No sign-up
- Runs 100% in your browser
- 12+ diagram types
Live Mermaid editor & chart viewer
This Mermaid chart viewer streams a fresh preview every time you stop typing, so simple Mermaid drawing becomes as easy as writing text. When something breaks, the built-in Mermaid fixer pinpoints the problem and repairs the most common syntax errors for you — with a plain-language explanation for every change.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Mermaid diagram types you can render
From flowcharts to timelines, every Mermaid diagram type works out of the box — an easy way to draw Mermaid diagrams without installing anything. Each preview below is rendered live by the same engine that powers the viewer; load any template to keep editing it.
Sequence diagram
Show how participants exchange messages over time, with loops, alternatives and activations.
ER diagram
Model database entities, attributes and relationships in crow's-foot notation.
Class diagram
Describe classes, interfaces, members and inheritance for software design.
State diagram
Trace the states of a system and the transitions between them.
Gantt chart
Plan projects with tasks, milestones, dependencies and dates.
Pie chart
Turn a handful of numbers into a share-of-total pie chart.
User journey
Map a user journey across tasks and satisfaction scores.
Timeline
Chronicle events on a vertical timeline — perfect for history and roadmaps.
Mindmap
Brainstorm as a branching mindmap — plain text in, hierarchy out. The mindmap syntax is just indented text.
Git graph
Visualize branches, commits and merges of a Git repository.
Quadrant chart
Plot items on two axes into four quadrants, e.g. priority vs. effort.
Mermaid syntax essentials
Mermaid syntax is plain text: one statement per line, nodes joined by arrows. These Mermaid shapes cover most diagrams — select any sample to open it in the viewer and keep editing.
| Syntax | Draws |
|---|---|
A[Label] | Rectangle (process) |
A(Label) | Rounded box |
A{Label} | Diamond (decision) |
A([Label]) | Stadium |
A[(Label)] | Cylinder (database) |
A((Label)) | Circle |
A-->B | Arrow (link) |
A-->|text|B | Arrow with label |
A---B | Plain line |
subgraph Title … end | Group of nodes |
Mini templates
Convert a Mermaid diagram to an image online
Wondering how to convert a Mermaid diagram to an image online? Three steps: paste your code, let the preview render, then click PNG, SVG or PDF in the toolbar. Everything happens in your browser — no file uploads.
Mermaid to PNG
Exports at up to 4× resolution — crisp diagrams for slides, docs and messages. Pick PNG when you need a pixel image that goes anywhere.
Mermaid to SVG
A true vector file: infinitely zoomable, editable in Figma or Illustrator, and perfect for print and high-DPI screens.
Mermaid to PDF
One click produces a PDF page sized to your diagram — ideal for reports, tickets and archives.
Frequently asked questions
What is a Mermaid viewer?
A Mermaid viewer takes diagram code written in Mermaid syntax and renders it as a real diagram. This one is a full Mermaid chart viewer, maker and fixer in a single page: render online live while you type, spot syntax problems, repair them automatically, then export the result as PNG, SVG or PDF.
How do I fix invalid Mermaid syntax?
Paste the code and click Fix. The Mermaid fixer repairs smart quotes and invisible Unicode characters, full-width CJK punctuation, unbalanced brackets, reserved words such as “end”, missing “end” statements for subgraphs and loops, stray Markdown fences, and more. Every change is explained in the diagnostics list.
How do I convert Mermaid to PNG, SVG or PDF?
Render your diagram in the viewer above, then click PNG, SVG or PDF in the preview toolbar. PNG downloads a high-resolution bitmap, SVG a vector file, and PDF a print-ready document. It is free, unlimited and browser-side.
PlantUML vs Mermaid — which should I use?
Mermaid renders directly in the browser, which is why GitHub, GitLab and most Markdown wikis support it natively; it is the lighter choice for documentation. PlantUML covers more of the UML 2 specification but needs Java or a server to render. For text-first diagrams that live in docs and web pages, Mermaid is usually the easier path — and you can try the syntax here instantly.
What does “Mermaid” represent — what is the meaning of the name?
The diagram tool is named after the mythical mermaid — the idea that plain text can “sing” a beautiful diagram into existence, the way sailors were said to be charmed by a mermaid's song. In diagrams, Mermaid represents code-as-drawing: you describe nodes and arrows in text, and the library draws the chart for you.
What are the different types of Mermaid diagrams?
The most-used kinds are flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, Gantt charts, pie charts, user journeys, timelines and mindmaps — see the full gallery above. Every type starts with a keyword line such as “flowchart TD” or “sequenceDiagram”, followed by one statement per line.
Is my diagram code uploaded anywhere?
No. Rendering, fixing, optimizing and exporting all run locally in your browser. Nothing is sent to, or stored on, a server — you can even use the viewer offline once the page is loaded.