Protocol specs
Attach the rendered transition map so implementers see legal state changes at a glance.
State diagram PNG export · free, no watermark
Free Mermaid State Diagram to PNG Converter
Paste Mermaid stateDiagram-v2 code, preview the machine, and export a clean PNG for protocol specs, workflow docs, and firmware reviews. Free, local rendering, 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.
State
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-state-white-2x.png
Why export state diagrams as images
State machines describe behavior, and behavior docs travel — specs become PDFs, tickets get attachments, reviews happen in slides. An exported PNG keeps the transition map readable everywhere the code can't run.
Workflow docs
Show the lifecycle of a ticket, order, or job as a static image that renders the same everywhere.
Firmware and game logic reviews
Export the machine to a slide or PDF so the review argues about behavior, not about rendering tools.
State diagram syntax worth knowing
The sample above is a full edit-preview-export loop. Transitions carry the events that trigger them, and composite states nest whole machines inside a state.
Transitions
- [*] --> State
- Where the flow starts
- State --> [*]
- Where the flow ends
- A --> B : event
- Move from A to B on an event
- note right of A : text
- A note anchored to a state
Structure
- state A { ... }
- Composite — a state containing states
- direction LR
- Lay the machine out left to right
- stateDiagram-v2
- Current syntax version — use it
- state "Long name" as A
- Display label for a state
State diagram export checklist
Tall chain?
Use direction LR so long transition chains read across the image instead of collapsing into a column.
Nested machines?
Composite states render as boxes within boxes — export at 2x so inner labels stay readable.
Vector docs?
SVG keeps transition labels sharp in platforms that accept it; PNG is the compatible default.
FAQ
Questions about this Mermaid export workflow
How do I convert a Mermaid state diagram to PNG?+
Paste your stateDiagram-v2 code into the editor above, check the preview, then click Download PNG. Background, theme, and scale are set before export — all locally in your browser.
What is stateDiagram-v2?+
It is the current Mermaid syntax for state diagrams, with better layout and tooling than the original. Your existing v1 diagrams still render.
Is the state diagram export free and watermark-free?+
Yes. PNG, SVG, JPG, WebP, and PDF exports are free, with no signup and no watermark.
Why does my exported state diagram look blurry?+
Export at 2x for documentation and 4x for slides so state names and event labels stay sharp after platforms resize the image.
Which format is best for state diagrams?+
PNG for compatibility, SVG for zoomable specs, PDF for print. Composite-state diagrams benefit from 2x or higher.