# Mermaid Viewer

> Mermaid Viewer turns Mermaid code into diagram previews in the browser for developers and technical writers. Free to use, with no sign-up; preview, choose themes, share a link, and export PNG or SVG.

Mermaid Viewer at mermaidviewer.top is an independent tool, not affiliated with or endorsed by the Mermaid project.

## How it works
1. Open the editor and paste Mermaid code, choose a sample, or open an example from a guide.
2. Preview the diagram and choose a theme or layout preset. Example links carry their code and theme into the editor.
3. Export PNG or SVG, copy styled Mermaid code, or copy a share link that preserves code, theme, and layout.

## Pricing
- Free: browser editor, diagram previews, themes, layout presets, share links, styled code copying, and PNG/SVG export. No account required.

## Product reference
- [Product reference](https://mermaidviewer.top/product-reference.md): Plain Markdown details on features, configuration, sharing, privacy, and limitations.

## Key pages
- [Mermaid Viewer editor](https://mermaidviewer.top/): Paste Mermaid code, preview, style, share, and export a diagram.
- [What is Mermaid.js?](https://mermaidviewer.top/what-is-mermaid-js): Introduction to text-based diagrams and Mermaid syntax.
- [Mermaid themes](https://mermaidviewer.top/mermaid-themes): Runnable default, forest, dark, neutral, and base examples, plus themeVariables customization.
- [Flowchart guide](https://mermaidviewer.top/mermaid-flowchart-viewer): Flowchart syntax, decisions, subgraphs, and examples that open in the editor.
- [Architecture diagram examples](https://mermaidviewer.top/templates/architecture-diagram-examples): A system architecture sample to preview and adapt in the editor.
- [Flowchart examples](https://mermaidviewer.top/templates/flowchart-examples): Process, approval, and retry examples with code and explanations.
- [Sequence diagram examples](https://mermaidviewer.top/templates/sequence-diagram-examples): Six examples covering participants, alternative paths, asynchronous work, activation, and optional messages.
- [State machine examples](https://mermaidviewer.top/templates/state-machine-examples): A state diagram sample to preview and adapt in the editor.

## About and policies
- [About](https://mermaidviewer.top/about): Purpose of the independent browser tool and Mermaid project affiliation statement.
- [Privacy](https://mermaidviewer.top/privacy): Browser rendering, analytics, advertising, and handling of sensitive information.
- [Contact](https://mermaidviewer.top/contact): Contact information for feedback and support.