How it works

1. Pick a starter from the diagram-type dropdown, or write your own Mermaid syntax in the editor.
2. The preview re-renders automatically as you type; invalid syntax shows an inline error without losing your last successful render.
3. Pan and zoom to inspect the diagram, then export it as SVG, PNG, or PDF, or copy a share link.

Supported diagram types

• Flowchart
• Sequence diagram
• Class diagram
• Entity-relationship diagram
• State diagram
• Gantt chart
• Pie chart
• Mindmap
• Git graph
• User journey

A live Mermaid editor that never leaves your browser

Mermaid turns plain-text syntax into flowcharts, sequence diagrams, ER diagrams, and more — this tool gives that syntax a live, pannable, zoomable preview without a build step. Pick a diagram-type template to start from a working example, or paste your own syntax; the preview re-renders about 300ms after you stop typing, and a parse error is shown inline over the last good render instead of leaving you with a blank pane. When you're done, export the diagram as SVG, rasterize it to PNG at 1×–3× resolution, generate a PDF sized to the diagram's own aspect ratio, or copy a compressed share link that reproduces the exact source when opened. Node-by-node repositioning is intentionally out of scope — Mermaid owns layout and edge routing, and this viewer's interactivity is whole-diagram pan and zoom.

Frequently Asked Questions

How do I edit Mermaid diagrams online?

Type or paste Mermaid syntax into the code editor on the left. The preview on the right updates automatically about 300ms after you stop typing — there is no separate "render" button to click.

How do I export a Mermaid diagram to PNG or PDF?

Use the export bar below the preview. "Export PNG" rasterizes the diagram at your chosen resolution (1×, 2×, or 3×) and downloads it; "Export PDF" fits the same rasterized image to a page, choosing landscape or portrait automatically based on the diagram's aspect ratio. "Export SVG" downloads the original vector markup instead.

Can I use Mermaid without installing anything?

Yes. Mermaid, the code editor, and the diagram renderer all run as JavaScript in your browser tab — there is nothing to install and no CLI or Node.js setup required.

Is my diagram uploaded anywhere?

No. Parsing, rendering, and exporting all happen locally in your browser. Hexabench has no backend for this tool, so your diagram source never leaves your machine unless you explicitly copy a share link.

How do I zoom and pan a Mermaid diagram?

Scroll or pinch over the preview to zoom, and click-drag to pan. The bottom-right controls also offer zoom in, zoom out, fit-to-screen, and a reset-to-100% button, with a live zoom percentage readout.

What Mermaid diagram types are supported?

The templates dropdown loads working starters for flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, state diagrams, Gantt charts, pie charts, mindmaps, git graphs, and user journeys — any valid Mermaid syntax for these types renders correctly.

Can I share a diagram with someone else?

Yes — "Copy share link" compresses your diagram source into the page URL's `?code=` parameter and copies it to your clipboard. Opening that link reproduces the exact diagram, with no server-side storage involved.

Can I drag individual nodes to reposition them?

Not in this version. Mermaid automatically lays out nodes and routes edges from your syntax, and the viewer supports panning and zooming the whole diagram, but moving individual nodes independently (which would require re-routing edges) is not supported here.

Related Tools