Free online tool

Free Mermaid chart viewer

Paste Mermaid source or open a .mmd file to preview the diagram in your browser. Search labels, zoom large diagrams, change themes, and export SVG, PNG, PDF, or source.

Loading the Mermaid viewer…

Start with your source

Paste Mermaid text, open a .mmd, .mermaid, or .txt file, or load an example. A ready-to-edit flowchart is loaded when the viewer opens. Select Render diagram after editing. No sign-in needed.

Read the whole picture

Hide the editor for a wider view. Pan, zoom, search labels, and use the overview map to navigate large charts. Download Mermaid source, SVG, PNG, or PDF from the export menu.

Bring it into Confluence

Use the same Diagram Lens reader on your team’s Confluence pages, with editable Mermaid source close to your documentation.

Explore Diagram Lens for Confluence →

Ready-to-try example

Start with a Mermaid flowchart

This example is already loaded in the viewer above. Change a label or add a step, then select Render diagram or press Ctrl / ⌘ + Enter.

Open the viewer ↑

flowchart TD
    Idea([A new idea]) --> Brief[Write the brief]
    Brief --> Review{Ready to build?}
    Review -->|Yes| Build[Build and test]
    Review -->|Needs work| Brief
    Build --> Launch([Ship it])

    classDef milestone fill:#dbeafe,stroke:#2563eb,color:#1e3a8a
    class Idea,Launch milestone

Supported Mermaid diagram types

The viewer uses Mermaid 11 and supports common text-based diagram types. Start the first non-comment line with the matching Mermaid keyword.

Flowcharts flowchart
Sequence diagrams sequenceDiagram
Class diagrams classDiagram
State diagrams stateDiagram-v2
Entity relationship diagrams erDiagram
Gantt charts gantt
User journeys journey
Mind maps mindmap
Timelines timeline
Pie charts pie
Quadrant charts quadrantChart
Requirement diagrams requirementDiagram

Choose the right workflow

This viewer versus Mermaid Live Editor

Use this free viewer when you want to open a Mermaid file quickly, inspect a rendered chart, search its labels, navigate a large diagram, or test the Diagram Lens reading workflow. It keeps your source in the current browser tab and does not create a persistent project.

When Mermaid Live Editor is a better fit

Use the official Mermaid Live Editor when you specifically want the Mermaid project’s editing environment or a shareable editor link. Both tools work with text-based Mermaid source; this page emphasizes inspection, in-diagram search, navigation, and browser-side exports.

Open Mermaid Live Editor ↗

Mermaid guides

Go from preview to publishable diagram

Use these practical guides when the preview exposes a syntax problem, the diagram is difficult to read, or you need to hand it off.

Fix Mermaid parse errors →

Reduce a failing chart to a small example, find the first broken statement, and test each correction.

Choose an export format →

Compare editable Mermaid source, scalable SVG, PNG, and PDF for review and handoff.

Make diagrams accessible →

Add a useful name and text equivalent, then check the representation readers actually receive.

Review large diagrams →

Use focused paths, readable labels, search, zoom, and an overview without losing context.

Questions and answers

Mermaid viewer FAQ

Does the Mermaid viewer upload my diagram?

No. Your Mermaid source is processed in your browser and stays in the current browser tab. The viewer does not send it to a remote diagram renderer or save it to a Backlog Bridge account.

Which Mermaid files can I open?

You can open UTF-8 text files ending in .mmd, .mermaid, or .txt. You can also paste plain Mermaid source or source wrapped in a Mermaid code fence.

Can I export a Mermaid chart?

Yes. Use the preview export menu to download Mermaid source or SVG. PNG and PDF export are also available, but very large raster exports can depend on browser memory and canvas limits.

Do I need an account?

No. The viewer is free to use without signing in. It does not create persistent projects, so download the source or another export before closing the tab.

Mermaid in Confluence

Keep the same reading workflow inside Confluence

Diagram Lens adds editable Mermaid source, live preview, wide view, search, minimap navigation, themes, and export tools to Confluence Cloud pages.

Explore Diagram Lens →