Mermaid Renderer

Write Mermaid diagrams and see them render as you type. Flowcharts, sequence diagrams, class, state, ER and Gantt charts export as SVG or PNG.

Runs entirely in your browser. Nothing you put in here gets uploaded.

Diagram

SourceFlowchart

Preview

Loading Mermaid…

Export

Background

PNG scale

Next steps

Send this tool's output straight into another tool.

SVG Optimizer

Shrink an SVG with SVGO. Paste the markup or drop a file, toggle every optimizer plugin individually, set the numeric precision and multipass, and compare the size before and after. Copy the result or download it as a file.

media image compress dev

JPG Image Compressor

Shrink any image with as little quality loss as possible. Pick a WhatsApp, Instagram or Discord preset, or switch to Custom to hit a hard file size or a fixed quality, downscale with aspect-locked resolution sliders, and keep or strip EXIF metadata. Live preview, multiple images at once.

media image compress

Image Converter

Convert images between JPEG, PNG, WebP and AVIF. Drop in as many as you like, pick a format, and dial in the quality for the lossy ones. When you convert to JPEG, choose the colour that fills any transparency. Live previews, download one or all at once.

media image converter

EXIF Editor

See and edit the EXIF metadata inside a photo, then download it with your changes or save a copy with all metadata removed, GPS included. It reads JPEG, PNG, HEIC and more, and edits JPEG files.

media image exif

EXIF Transfer

Copy the EXIF metadata from one photo onto another without changing the destination's pixels. That covers camera model, lens, focal length, exposure, GPS and more. Choose to replace all metadata or only fill in what the source provides.

media image exif

Image Annotator

Draw arrows, boxes, text, highlights and numbered steps on a screenshot, blur or pixelate anything private, crop the result and add a watermark. The finished image downloads as PNG or JPG or goes straight to your clipboard.

media image

Hash Generator

Hash text or a file with MD5, SHA-1, SHA-256, SHA-512, SHA-3, BLAKE2, BLAKE3, CRC32 and more, all computed live as you type. Compare against an expected checksum and copy any digest.

dev security

Checksum Validator

Verify a checksum online: drop a file, paste the expected checksum and see instantly whether they match. The hash type is detected from the checksum itself, covering MD5, SHA-1, SHA-256, SHA-512, BLAKE3, CRC-32 and more, and sha256sum lines or whole checksum files can be pasted as-is.

dev security

Data Compressor

Compress text or a file with gzip, deflate, brotli or Zstandard and see the size before and after, the compression ratio and how long it took. One click tries every method and recommends the smallest result.

dev compress

About the Mermaid Renderer Tool

This tool renders Mermaid diagrams while you write them. Type the diagram source on the left and the drawing updates on the right a moment after you stop typing. Flowcharts, sequence diagrams, class, state and ER diagrams, Gantt charts, pie charts, mindmaps, timelines and the other Mermaid types all work.

A typo never wipes the preview. The last diagram that rendered stays on screen, and the editor names the line Mermaid stumbled on along with what it expected there. When the diagram looks right, download it as SVG or as a PNG at up to four times its size, or copy either format straight to the clipboard.

What you can do

Preview a Mermaid diagram live while editing it
Convert a Mermaid flowchart to SVG
Export a Mermaid diagram as a high resolution PNG
Copy a Mermaid diagram as an image to paste into a doc or chat
Find the line with a syntax error in a Mermaid diagram
Render Mermaid with the dark, forest, neutral or base theme
Export a Mermaid diagram with a transparent or solid background
Start from an example sequence diagram, ER diagram or Gantt chart

How to use the Mermaid Renderer

1Write or paste your Mermaid source, or pick a starter from Examples.
2Pick a diagram theme, or leave it on Match site to follow the light or dark mode of this page.
3Zoom with the buttons or Ctrl and the mouse wheel, drag to pan, and double-click to fit the diagram back into view.
4Choose a background and a PNG scale under Export, then download or copy the SVG or PNG.

SVG or PNG

SVG is the better choice wherever it is accepted. It stays sharp at any zoom, the text inside stays selectable, and it is usually smaller. Send it to the SVG Optimizer to shrink it further. PNG is for places that only take pixel images, like many chat apps, slide tools and issue trackers. A scale of 2× looks crisp on high density screens, and 3× or 4× is for print.

Labels render as plain SVG text rather than embedded HTML. That keeps the PNG export working in every browser and lets design tools such as Figma or Inkscape open the SVG without missing text.

Themes and backgrounds

Mermaid ships five themes. Default is the familiar purple look, Neutral is grayscale and prints well, Dark suits dark slides and pages, Forest is green, and Base is the plain starting point Mermaid's own themeVariables build on. A theme set inside the source with an %%{init}%% directive or frontmatter wins over the picker.

A transparent background lets the diagram sit on any page color, but a light theme on a dark page loses its text, so pick Theme to back the export with the color the theme was designed for, or Custom to match your slides.

Credits

Open source does the heavy lifting in this tool. Thank you to:

Mermaid
A JavaScript library that turns text definitions into flowcharts, sequence diagrams and many other diagram types.

Everything this site builds on is listed on the credits page.

Tools that share a tag with this one.

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculator image dev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

media image dev

Base Encoder & Decoder

Encode and decode Base16, Base32, Base36, Base45, Base58, Base62, Base64 and Base85. Pick the alphabet variant you need, from Crockford Base32 to Bitcoin Base58 and Ascii85, and convert in either direction.

dev converter text

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

dev converter text

Code Formatter

Format code in JavaScript, TypeScript, JSON, JSON5, HTML, Vue, CSS, SCSS, LESS, Markdown, YAML, GraphQL, XML and SQL. Pick tabs or spaces, set the indent width, and format the input in place with one click.

dev text json yaml

CSV Viewer

Open a CSV or TSV file and read it as a proper table. Sort by any column, filter rows with a search or per-column conditions, hide columns you do not need, and copy or download what is left.

text dev