Architecture decision records
Attach the rendered class diagram so reviewers see the proposed structure without reading Mermaid source.
Class diagram PNG export · free, no watermark
Free Mermaid Class Diagram to PNG Converter
Paste Mermaid class diagram code, preview the structure, and export a clean PNG for architecture docs, ADRs, and coursework. Everything renders locally in your browser — no upload, 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.
Class
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-class-white-2x.png
Why export class diagrams as images
Class diagrams compress a system's shape into one picture, and that picture is usually needed where Mermaid doesn't run — design docs, PDFs, wikis, and lecture slides. Exporting to PNG freezes the structure into an image every reader can open.
Course notes and assignments
Export a clean PNG or PDF of the model for submissions and study material — no UML tool required.
Wiki architecture pages
Ship a static image next to the code so the page renders identically for every reader, plugin or not.
Class diagram syntax worth knowing
The sample above uses the tokens most class diagrams need. Relationship arrows are the vocabulary reviewers read first — pick the one that matches the real ownership.
Relationship symbols
- A <|-- B
- Inheritance — B is an A
- A *-- B
- Composition — B is owned by A
- A o-- B
- Aggregation — B is referenced by A
- A <-- B
- Association between A and B
- A <.. B
- Dependency — B uses A
- A -- B
- Plain link, no arrowhead
Classes and members
- class Name { ... }
- A members block for the class
- +method()
- Public member
- -field: type
- Private member; # is protected
- <<interface>>
- Annotation: interface, abstract
- direction LR
- Lay the whole diagram out left to right
Class diagram export checklist
Wide hierarchy?
Use direction LR so deep inheritance chains spread across the image instead of stacking into a tall column.
Dense diagram?
Export at 2x or 4x so member text inside boxes stays legible after the image lands in docs.
Vector docs?
SVG keeps member text perfectly sharp in platforms that accept it; PNG is the safe default.
FAQ
Questions about this Mermaid export workflow
How do I convert a Mermaid class diagram to PNG?+
Paste your classDiagram code into the editor above, check the preview, then click Download PNG. Set the background, theme, and scale before exporting — all in the browser, nothing uploaded.
Is the class diagram export free and watermark-free?+
Yes. PNG, SVG, JPG, WebP, and PDF exports are all free, with no signup and no watermark.
Why does my exported class diagram look blurry in docs?+
Member text is small, so resizing hurts most. Export at 2x for documentation and 4x for slides so class boxes and arrows stay sharp.
Which format is best for class diagrams?+
PNG for compatibility, SVG for zoomable design docs, PDF for print. Deep hierarchies benefit from 2x or higher regardless of format.
Do I need PlantUML or the Mermaid CLI installed?+
No. The renderer runs locally in your browser — no Java, no Node.js, no install. Paste the code and download the image.