READMEs and docs
Ship a rendered flowchart next to the code so readers see the architecture without a Mermaid plugin or enabled scripts.
Flowchart PNG export · free, no watermark
Free Mermaid Flowchart to PNG Converter
Paste Mermaid flowchart code, preview the diagram, and export a clean PNG for READMEs, specs, tickets, and slides. The editor runs in your browser — nothing is uploaded, and the downloaded image carries no watermark.
No signup · No watermark · Local browser rendering · Transparent background · 1x / 2x / 4x output
Paste or edit Mermaid code
Replace the sample below, or load another example.
Load example
Paste Mermaid code here. Preview and export load locally in your browser.
Live previewSample preview · Clean Docs
Render & export
Export controls activate after your diagram renders locally.
Flowchart
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMEGitHub DarkTransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro
Scale
1x2x4x
Or exact width, e.g. 1200px wide
Output: White · comfortable padding
Size: calculated after render
Filename: mermaid-flowchart-white-2x.png
Why export flowcharts as images
Flowcharts are the most shared Mermaid diagram, and most of the places they end up — READMEs, PDF specs, slide decks, issue trackers, wikis — do not render Mermaid code. Exporting a flowchart to PNG freezes it into an image every platform can display exactly as designed.
Reviews and tickets
Attach the exported flowchart to a pull request or ticket so reviewers see the proposed process change without leaving the thread.
Slides and posters
Export at 2x/4x with a transparent background so the flowchart sits cleanly on branded slide layouts without a white box.
Flowchart syntax worth knowing
The sample above uses the core subset you need for most flowcharts. These tokens change how the exported image reads — pick node shapes that match meaning and a direction that fits the destination.
Node shapes
- A[Step]
- Rectangle — a process step (default look)
- A(Step)
- Rounded box — a softer, less formal step
- A([Start])
- Stadium — start or end of the flow
- A{Choice?}
- Diamond — a decision branch
- A[[Sub]]
- Subroutine — a referenced sub-flow
- A[(Data)]
- Cylinder — a database or store
Direction and links
- flowchart TD
- Top to down — the default layout
- flowchart LR
- Left to right — wide diagrams for slides
- A --> B
- Arrow from A to B
- A -->|yes| B
- Arrow with an edge label
- A --- B
- Plain connecting line, no arrowhead
- subgraph ... end
- Group related steps into a box
Flowchart export checklist
Going on a slide?
Pick a transparent background and 4x scale so labels stay sharp after the deck resizes the image.
Wide flowchart?
Use flowchart LR so long chains stay readable instead of collapsing into a tall, narrow column.
Dropping into docs?
PNG is the safest default; choose SVG only when the docs platform accepts vector images and you need infinite zoom.
FAQ
Questions about this Mermaid export workflow
How do I convert a Mermaid flowchart to PNG?+
Paste your flowchart code into the editor above, check the preview, then click Download PNG. You can switch the background, theme, and 2x/4x scale before exporting — the whole flow runs in your browser.
Is the flowchart PNG export free and watermark-free?+
Yes. Exporting Mermaid flowcharts to PNG, SVG, JPG, WebP, or PDF is free, needs no signup, and never adds a watermark to the image.
Can I export a flowchart with a transparent background?+
Yes. Choose a transparent background preset before downloading. The checkerboard you see in the preview is only an aid — the exported PNG has real alpha transparency.
Why does my exported flowchart look blurry in docs?+
Most platforms re-compress or resize images. Export at 2x for documentation and 4x for slides or retina screens so node text and arrows survive the resize.
Which formats can I export a Mermaid flowchart to?+
PNG, SVG, JPG, WebP, and PDF. PNG is the safest for sharing; SVG stays sharp at any zoom; PDF suits print pipelines and formal documents.
Do I need Mermaid installed to export a flowchart image?+
No. The renderer runs locally in your browser — no Node.js, no CLI, no npm install. Paste the code and download the image.