Type Mermaid syntax on the left, watch the diagram draw itself on the right. The Mermaid Viewer & Visualizer renders the full Mermaid 12 engine locally in your browser: paste a diagram definition from your documentation, pick a sample to learn a syntax family, restyle it with eleven themes and three looks, then export production-ready SVG or PNG — or share a link that reproduces the exact same diagram for a teammate. Nothing is uploaded: the renderer, the sanitizer and the exporter all live on the static page.
Thirty diagram families, one editor
Mermaid 12 understands far more than flowcharts. The classics are all here — flowcharts with the new v11.3 shape catalogue, sequence diagrams with activations and loop/alt blocks, class, state and entity-relationship diagrams, Gantt charts, user journeys, mindmaps, timelines, Git graphs and Kanban boards. Chart-shaped families include pie, quadrant, XY charts, Sankey and Venn diagrams. The 12.0 release adds the newest members of the family: UML use case diagrams, agentflow (who does what, with which tool), treemaps, packet diagrams, radar charts, architecture, Ishikawa fishbone, Wardley maps, Cynefin and more — twenty curated starters ship in the sample picker, grouped by family so the next syntax is one click away.
Every sample is a complete, valid diagram you can edit in place — change a node name, add an edge, break something on purpose to see how errors surface. The status pill above the canvas reports idle, loading, ready, stale or error, and the stats row shows the detected diagram type, render time and SVG size after every render.
Appearance: themes, looks, layouts
Three controls map directly onto Mermaid 12’s configuration schema. Theme picks the palette: the five classics (default, base, neutral, dark, forest), the flat neo pair, or the redux family including the colorful redux-color and redux-dark-color variants that Mermaid 12 uses as the default look for flowcharts and use case diagrams. Look chooses the drawing style: classic for the traditional Mermaid strokes, neo for the softer, rounded modern style, or handDrawn for the sketchy rough.js look — with an optional seed so the wobble reproduces exactly across machines. Layout selects the engine: ELK, the Eclipse Layout Kernel that Mermaid 12 bundles as its new default and that produces tidier layouts for large graphs, or Dagre, the classic algorithm that has laid out Mermaid diagrams for a decade.
Prefer per-diagram settings? Mermaid’s YAML frontmatter and %%{directive}%% syntax work verbatim in the editor: a --- block with config: keys overrides the panel for that single diagram, exactly like the official documentation describes.
A canvas that behaves like a viewport
The preview is a real viewport, not a static image. Drag to pan, Ctrl/⌘ + scroll to zoom, pinch on touch screens, and double-click to reset. The zoom slider, the +/− buttons and the Fit control stay in sync — Fit measures the diagram’s intrinsic viewBox and scales it to the canvas exactly, which is what you want before exporting. Auto-render debounces typing at a third of a second; switch it off and the Render button (or Mod/⌘ + Enter from anywhere in the tool) takes over for large documents where you want deliberate, on-demand rendering.
Errors are first-class citizens. When the parser rejects the source, the canvas swaps for an error panel carrying Mermaid’s diagnostic message — usually the offending line and token — so fixing a missing end or an unbalanced quote takes seconds, not minutes. The previous successful render stays one undo away.
Export and share
Copy SVG puts the full, standalone markup on your clipboard — intrinsic size pinned, ready to inline in an HTML page or paste into a design tool. Download SVG saves the same document as a .svg file named after the diagram type and the date. Download PNG rasterizes the current render at 2× resolution on a transparent background, entirely inside the browser — no server sees your diagram, ever. Copy source and Share round out the set: the share button copies a URL whose fragment carries the source, theme, look, layout and zoom, so opening it on another machine reproduces the exact same picture without any server round-trip.
Security and privacy
The tool initializes Mermaid with securityLevel: "strict" — the library’s default — which escapes HTML in labels and disables click callbacks, and Mermaid’s bundled DOMPurify pass sanitizes the rendered SVG before the viewer mounts it through DOMParser, never a markup-injection API. Your diagram source is persisted only in your own browser’s localStorage so a reload restores your work, and share links keep everything in the URL fragment, which browsers never send to servers. This is the same posture as every Foxipa tool: a static page, zero telemetry beyond anonymous aggregate analytics, nothing phoned home.
Frequently asked questions
What is Mermaid? An open-source, JavaScript-based diagramming engine that renders diagrams from Markdown-inspired text definitions. It powers diagram blocks in GitHub, GitLab, Notion, Obsidian and many documentation systems — which is why “paste the ```mermaid block from my docs” is the tool’s most common workflow.
Which version does the viewer use? Mermaid 12.0.0, the current release, pinned in the project’s build. That means ELK as the bundled default layout, the redux-color/neo appearance generation, and the new UML use case and agentflow diagram types are all available.
Does my diagram need to be complete? No — partial sources render what they can, and invalid sources show the parser’s error message instead of a blank canvas. Iterating on a diagram in pieces is a normal way to work.
Why does my PNG look slightly different from the canvas? PNG export rasterizes the same SVG at double resolution; text positioning is identical, but fonts fall back to what your OS offers for the diagram’s font stack, and browser vendors rasterize SVG <foreignObject> labels with small differences. Chromium-based browsers give the most faithful raster.
Is there a size limit? The editor accepts up to 500,000 characters — Mermaid’s own maxTextSize — and share links carry up to 24 KB of source. Extremely large graphs render fine but are naturally slower; turn off auto-render and use Mod+Enter while editing them.