Mermaid to PNG Converter

The output has a background

Dark-theme exports use a dark background; other themes use white. Choose the theme before export and check that the result fits the destination. Transparency is not an option in this tool.

Pixel size follows the render

Export uses the rendered dimensions and browser device scaling up to 2x. It is not a fixed 4K output or a control for choosing an arbitrary width and height.

A dense diagram needs a layout change

Shorten labels, use a direction that suits the page, or split an oversized explanation into separate diagrams. Stretching an exported PNG does not add detail.

Keep source and consider SVG

Keep the Mermaid source for later editing. Use SVG when the destination supports it and you need the diagram to remain sharp at multiple sizes.

Worked example: an approval loop for a ticket

This illustrative change-review process has one decision, two labeled exits, and a retry loop. Paste the complete source into the editor. Follow both branches before exporting: rejection must return through Revise proposal, while approval ends at Schedule release. Keep the labels short enough to read at the size used in the ticket.

flowchart LR
    Request[Receive change request] --> Review{Approved?}
    Review -->|Yes| Release[Schedule release]
    Review -->|No| Revise[Revise proposal]
    Revise --> Review

Fix syntax errors before investigating the PNG

If the preview shows a parsing error, confirm that the first line declares flowchart LR and that every bracket and decision brace is closed. Use stable IDs such as Review and keep display text inside brackets. For a label with punctuation, quote it, for example Step["Review (manual)"]. Re-render after each small change; an error in the source cannot be fixed by downloading the image again.

Diagnose blur, cropping, and background differences

First open the downloaded file itself and inspect its dimensions. If it is sharp there but blurred in a slide, reduce the display size or use SVG when supported. If the image is already too dense, shorten labels, change LR to TD, or split the process into separate diagrams; preview zoom is not an export-resolution setting. If a host crops the picture, check that host’s fit or crop setting before changing the source. PNG output uses a theme-dependent background, so choose a light theme for light documents and check contrast in the destination.