How do I export a Mermaid diagram as an image?

Install @mermaid-js/mermaid-cli and run mmdc with an input and output path, for example mmdc -i diagram.mmd -o diagram.svg . SVG and PDF are vector and preferred; use PNG only with an explicit scale factor. For a single diagram, Mermaid Live Editor exports PNG and SVG from its Actions panel.

How do I produce a PNG file from a Mermaid diagram without installing anything?

Paste the code into Mermaid Live Editor in your browser and download PNG from the Actions panel. If you can run Node.js but cannot install packages globally, npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png -s 3 runs the official CLI once without a global install.

Can Mermaid export SVG?

Yes. Passing an output filename ending in .svg to mmdc produces vector output, and the Mermaid Live Editor and several VS Code extensions also export SVG directly.

Why does my Mermaid PNG look blurry?

The default PNG resolution targets screen display. Pass a scale factor such as -s 3 , widen the page with -w for wide diagrams, or better, export SVG or PDF so the diagram stays sharp at any size.

Can I export Mermaid with a transparent background?

Yes. With mermaid-cli, add -b transparent , for example mmdc -i diagram.mmd -o diagram.png -b transparent -s 3 . The option applies to PNG and SVG; PDF output is not affected.

How do I export a Mermaid diagram from Obsidian?

Obsidian renders Mermaid blocks but has no built-in single-diagram image export. Export the note to PDF, or copy the block into Mermaid Live Editor, or run mmdc on a .mmd file or on the note itself, since mmdc reads Markdown.

Is it safe to paste Mermaid code into online converters?

Online converters receive whatever you paste, so treat them like any hosted service. For unpublished results, internal architecture or patient-related workflows, render locally with mermaid-cli, which runs on your own machine.

Can I generate Mermaid diagrams in CI?

Yes. mermaid-cli is a command line tool, so you can install it in a pipeline and render diagrams during a documentation build. This keeps rendered images in sync with their committed sources.

Are Mermaid diagrams good enough for journal figures?

For simple structural diagrams, often yes, provided you export vector and set a readable font. For figures where spatial arrangement carries meaning, export SVG and finish in a vector editor, or have SciFig FlowChart redraw it from your description as a native SVG diagram, with every box and arrow editable and export to SVG, PNG or PPTX.

How do I change the theme of a Mermaid diagram?

Add an init directive at the top of the file, such as %%{init: {'theme':'neutral'}}%% . The neutral and base themes generally print better than the default, and you can set fontFamily in the same block. With mmdc you can also pass -t neutral or a -c config.json file.

Mermaid to Image: Export Diagrams (2026)

Name: SciFig
Author: SciFig

To turn a Mermaid diagram into an image, export PNG or SVG from Mermaid Live Editor or the mmdc CLI.

Quick answer: for a one-off Mermaid to image export, paste the diagram into Mermaid Live Editor and download PNG or SVG from its Actions panel. For repeatable or batch exports, run mermaid-cli's mmdc command, which turns a .mmd or Markdown file into SVG, PNG, or PDF. When you need an editable, journal-ready version instead, SciFig FlowChart (flowcharts and diagrams) has AI redraw the diagram from your description, with every box, label and arrow editable, and exports SVG, PNG or PPTX.

Mermaid renders diagrams from text, which makes it excellent for documentation that lives in version control. Getting a file out of it — one you can drop into a manuscript, a slide, or a poster — is a separate step that trips people up, mostly because the default export is a PNG at screen resolution.

Goal	Method	Formats	Install needed	Code leaves your machine?
One diagram, right now	Mermaid Live Editor → Actions → PNG or SVG	PNG, SVG	No	Yes, pasted into a hosted web page
Repeatable or batch export	mermaid-cli (`mmdc`)	SVG, PNG, PDF	Node.js, or run once with `npx`	No, renders locally
Preview while writing Markdown	VS Code extension or Obsidian	Preview; some extensions export SVG/PNG	Editor extension	No
Always-current docs	`mmdc` as a CI build step	SVG, PNG, PDF	In the pipeline	Stays in your CI
Editable, journal-ready redraw	SciFig FlowChart: describe the diagram, or attach the Mermaid text as a `.md` file, and AI redraws it with every box, label and arrow editable	SVG, PNG, JPG, PPTX	No, runs in the browser	Yes, uploaded to SciFig

The last row is a different kind of tool: instead of rendering your Mermaid code, AI redraws the diagram from your description as native SVG, so every node, label and arrow comes out as an element you can move, restyle and lay out to a journal's conventions. It is free to start, no card required, with 150 credits on your first day, and editing and SVG/PNG/PPTX export are free.

A Mermaid flowchart shown as source text beside its rendered SVG output (Figure generated with SciFig)

The Command Line Route

The official tool is @mermaid-js/mermaid-cli, which exposes an mmdc command:

npm install -g @mermaid-js/mermaid-cli
 
mmdc -i diagram.mmd -o diagram.svg          # vector, preferred
mmdc -i diagram.mmd -o diagram.pdf          # vector PDF
mmdc -i diagram.mmd -o diagram.png -s 3     # raster at 3x scale

Always prefer SVG or PDF. Both are vector, so text stays sharp at any size. Use PNG only when a destination cannot accept vector, and then set an explicit scale factor — the default resolution is too low for print.

Format	Vector	Good for	Avoid when
SVG	Yes	Web, further editing, most journals	Target requires EPS
PDF	Yes	Manuscripts, print, slides	You need to edit in a browser tool
PNG	No	Chat, wikis, quick previews	Print or any scaling

mmdc also reads Markdown. mmdc -i notes.md -o notes-rendered.md renders every mermaid code block in the file to an image and writes a copy of the Markdown that points at those images — handy for a README or a lab notebook full of diagrams.

See AI Scientific Figure Generation in Action

Watch how researchers create publication-ready scientific figures from text descriptions.

Explore the Tool

How to export Mermaid to PNG (and fix blurry, tiny or cropped output)

To produce a PNG file from a Mermaid diagram, give mmdc an output name ending in .png. The PNG is trimmed to the diagram itself, and its size comes from two settings: the page width the diagram is laid out in, and the scale factor. Most "bad PNG" complaints trace back to one of the fixes below.

Blurry PNG: raise the scale. -s multiplies the pixel density without changing the layout. -s 2 suits slides, -s 3 or -s 4 suits print.

mmdc -i diagram.mmd -o diagram.png -s 3

Tiny text in a wide diagram: widen the page. -w sets the page width (default 800 px) and -H the page height (default 600 px). Mermaid shrinks a wide diagram to fit the page, so a long left-to-right flowchart can come out with unreadable labels. A wider page keeps the labels at full size.

mmdc -i diagram.mmd -o diagram.png -w 1600 -s 2

Cropped or squeezed output: export SVG first. If labels are cut off or crowded, render SVG and open it in a browser. If the SVG looks right, the problem is page size or scale; if it looks wrong too, shorten the labels or switch direction (graph TD instead of graph LR).

White box behind the diagram: use a transparent background. -b sets the background for PNG and SVG (not PDF). The default is white.

mmdc -i diagram.mmd -o diagram.png -b transparent -s 3

Wrong font or theme: put it in a config file. -c loads a JSON configuration for Mermaid, so every diagram you export shares one font and theme. -t picks a built-in theme (default, forest, dark, neutral) for a single run.

{
  "theme": "neutral",
  "themeVariables": { "fontFamily": "Arial" }
}

mmdc -i diagram.mmd -o diagram.png -c config.json -s 3

Editor themes do not come along. A dark VS Code theme, Obsidian's dark mode or a theme picked in an editor's UI only changes how the preview looks. The exported file uses whatever theme is written in the diagram (an init line or front matter) or passed to mmdc. If the export looks different from your preview, write the theme into the diagram.

mmdc will not install: run it with npx. Global installs fail on locked-down machines. npx downloads the CLI into a cache and runs it once, with no global install. The first run also downloads a headless browser, so it takes a few minutes.

npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png -s 3

Timeline and Sequence Diagram Examples

These minimal examples export with the same commands. Save each as a .mmd file.

Mermaid timeline example (image/PNG):

timeline
    title Research project timeline
    2024 : Grant awarded
    2025 : Pilot study : Data collection
    2026 : Analysis : Manuscript submitted

mmdc -i timeline.mmd -o timeline.png -s 3

Mermaid sequence diagram example:

sequenceDiagram
    participant R as Researcher
    participant S as Sequencing core
    participant P as Analysis pipeline
    R->>S: Submit samples
    S-->>R: Raw reads
    R->>P: Run QC and alignment
    P-->>R: Results table

mmdc -i sequence.mmd -o sequence.svg

Other Export Routes

Mermaid Live Editor. The browser editor exports SVG and PNG directly from its Actions panel and is the fastest option for a one-off diagram, though it means pasting your diagram into a hosted service — a consideration if the content is sensitive.

VS Code. The Markdown Preview Mermaid Support extension renders diagrams inline, and the Mermaid Editor extension adds direct SVG and PNG export. Convenient while drafting.

CI pipelines. Because mmdc is a CLI, diagram rendering can be a build step. A common pattern is committing .mmd sources and generating images during documentation builds, so the rendered output never goes stale relative to the source.

- run: npm install -g @mermaid-js/mermaid-cli
- run: mmdc -i docs/architecture.mmd -o docs/architecture.svg

A CI pipeline diagram showing Mermaid source committed to the repository and images generated during the documentation build (Figure generated with SciFig)

Exporting from Obsidian, VS Code and Into Papers or Slides

Obsidian. Obsidian renders mermaid code blocks in the note preview, but it has no built-in button to save a single diagram as an image file. Exporting the note to PDF carries the diagram along. For a standalone PNG or SVG, copy the code block into Mermaid Live Editor, or save it as a .mmd file and run mmdc. Because mmdc reads Markdown, you can also point it at the note itself.

VS Code and Markdown previews. A Mermaid preview extension shows the diagram as you type. To export a Mermaid diagram in Markdown as PNG in VS Code, use an export-capable extension, or keep the diagram in a .mmd file next to your Markdown and render it with mmdc from the integrated terminal.

Papers and slides. Export SVG (or PDF for LaTeX), not PNG. In PowerPoint, insert the SVG as a picture; recent versions can convert it to shapes so you can recolor boxes. In Illustrator or Inkscape, open the SVG to adjust spacing, fonts and arrowheads before placing it in the manuscript. Use PNG at -s 3 or higher only when a submission system rejects vector files.

The same Mermaid flowchart rendered in the default and neutral themes, showing the difference in print legibility (Figure generated with SciFig)

Controlling Appearance

Mermaid's defaults are built for documentation, not for publication. Three levers matter:

Themes. %%{init: {'theme':'neutral'}}%% at the top of the file. neutral and base print better than the default.
Fonts. Set fontFamily in the init block so the diagram matches the surrounding document.
Direction. graph LR versus graph TD changes the aspect ratio, which matters more than it sounds when fitting a diagram into a column.

A research process flowchart with a neutral theme and a print font:

%%{init: {'theme':'neutral', 'themeVariables': {'fontFamily':'Helvetica'}}}%%
graph LR
  A[Sample collection] --> B[Extraction]
  B --> C[Sequencing]
  C --> D[Analysis]

When Mermaid Is the Wrong Tool

Mermaid computes layout automatically, and you get limited control over it. That is a feature for documentation and a limitation for scientific figures where composition carries meaning.

Mermaid fits	Switch to SciFig FlowChart or a vector editor
Documentation that lives in version control	A manuscript figure that must match a journal's visual conventions
Diagrams regenerated on every build	Precise spatial arrangement you control box by box
Automatic layout is good enough	Positions that reflect real relationships, such as anatomical position or temporal sequence
Text-only source that diffs in review	Co-authors who edit the figure visually rather than in code

A workable compromise: generate the structure in Mermaid, export SVG, then finish in a vector editor — accepting that the finishing step breaks regeneration.

A Mermaid auto-layout diagram beside the same content rearranged manually for a manuscript figure (Figure generated with SciFig)

Another route is a redraw in SciFig FlowChart. Describe the diagram in plain language, or attach your Mermaid text as a .md file, and the text to diagram generator has AI draw an editable version as native SVG, where every box, label and arrow can be moved and restyled directly. For an interaction like the sequence example above, the sequence diagram generator does the same for participants and messages. It is free to start with 150 credits on your first day, and editing, saving and exporting SVG, PNG or PPTX are free. If you are weighing template-based design tools for the same job, see our Canva alternatives for diagrams.

Tip

Commit the .mmd source alongside the exported image. The source diffs meaningfully in review and regenerates when things change; the image is what people actually look at. Keeping only one of the two costs you either reviewability or convenience.

Create Scientific Figures Now

Describe your scientific figure in natural language — get publication-ready illustrations in minutes.

Try Free

For publication figures beyond diagrams, text to figure handles illustrations. See our guide to visualizing research for the broader workflow.

FAQ

For one diagram, paste the Mermaid code into Mermaid Live Editor and download PNG or SVG from the Actions panel. For files or batches, run mermaid-cli, for example mmdc -i diagram.mmd -o diagram.svg or mmdc -i diagram.mmd -o diagram.png -s 3. If you need an editable, journal-ready figure rather than a rendered image, SciFig FlowChart redraws the diagram from your description as native SVG, with every box and arrow editable.

Mermaid to Image: Export Diagrams (2026)

The Command Line Route

How to export Mermaid to PNG (and fix blurry, tiny or cropped output)

Timeline and Sequence Diagram Examples

Other Export Routes

Exporting from Obsidian, VS Code and Into Papers or Slides

Controlling Appearance

When Mermaid Is the Wrong Tool

FAQ

Recommended resources

Continue Reading

Methods Figure Flowchart: Six Steps to a Clear Diagram

How to Vectorize Hand-Drawn Sketches to SVG

Block Diagram: How to Make One (2026)

Publication-ready scientific figures, in minutes

The Command Line Route

How to export Mermaid to PNG (and fix blurry, tiny or cropped output)

Timeline and Sequence Diagram Examples

Other Export Routes

Exporting from Obsidian, VS Code and Into Papers or Slides

Controlling Appearance

When Mermaid Is the Wrong Tool

Related Reading

FAQ

Recommended resources

Continue Reading

Methods Figure Flowchart: Six Steps to a Clear Diagram

How to Vectorize Hand-Drawn Sketches to SVG

Block Diagram: How to Make One (2026)

Publication-ready scientific figures, in minutes