How do I render a Mermaid diagram on Mac?

The simplest way is MDViewer — open any .md file with Mermaid code blocks or a standalone .mmd file, and the diagram renders as an interactive SVG automatically. For live editing, use VS Code with the Markdown Preview Mermaid Support extension. For batch export to SVG or PNG, use the Mermaid CLI (mmdc).

Can I render Mermaid diagrams without a browser?

Yes. MDViewer and VS Code both render Mermaid diagrams locally without a browser or internet connection. MDViewer is a native macOS app; VS Code uses an extension. The Mermaid CLI (mmdc) also works offline and can export diagrams to SVG, PNG, or PDF from the terminal.

How do I export a Mermaid diagram to SVG or PNG on Mac?

Use the Mermaid CLI: 'mmdc -i diagram.mmd -o diagram.svg' for SVG, or 'mmdc -i diagram.mmd -o diagram.png' for PNG. MDViewer can export the full Markdown document (including rendered diagrams) to PDF. The Mermaid Live Editor also offers SVG and PNG download buttons.

Does GitHub render Mermaid diagrams?

Yes. GitHub renders Mermaid code blocks natively in README files, issues, pull requests, and wikis — no setup needed. The diagrams are rendered as static images. For interactive diagrams with zoom and pan, use a local viewer like MDViewer.

How to Render Mermaid Diagrams on Mac

Q: Which Mermaid diagram types can be rendered on Mac?

All standard Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, user journey diagrams, pie charts, quadrant charts, and git graphs. MDViewer supports all of these and renders them as interactive SVGs.

Mermaid diagrams are written as plain text, but you need a renderer to turn that text into a visual diagram. macOS has no built-in Mermaid support — here are five ways to render diagrams locally, from the simplest to the most automated.

Quick Comparison

Method	Best For	Interactive	Offline	Export
MDViewer	Reading docs with diagrams	Yes (zoom, pan)	Yes	PDF
VS Code + extension	Editing diagrams in code	No	Yes	Via extension
Mermaid CLI (mmdc)	Batch export, CI/CD	N/A	Yes	SVG, PNG, PDF
Mermaid Live Editor	Quick prototyping	Yes	No	SVG, PNG
GitHub / GitLab	Team sharing	No (static)	No	No

1. MDViewer — Instant Rendering from Finder

MDViewer renders Mermaid diagrams inside Markdown files and standalone .mmd / .mermaid files. Open a file from Finder and every Mermaid code block becomes an interactive SVG — click to open in a full-screen lightbox with zoom and pan.

What Gets Rendered

Flowcharts — nodes, edges, subgraphs
Sequence diagrams — participants, messages, loops, alt blocks
Class diagrams, ER diagrams, state diagrams
Gantt charts, user journey diagrams, pie charts
Git graphs, quadrant charts

QuickLook Preview

Press Space on any .md or .mmd file in Finder — MDViewer’s QuickLook extension renders the diagram without opening the app. This is the fastest way to check a diagram on Mac.

2. VS Code — Live Preview While Editing

Install Markdown Preview Mermaid Support from the Extensions marketplace. Open a Markdown file, press ⌘⇧V for the preview pane, and Mermaid code blocks render alongside your text.

For standalone .mmd files, add the Mermaid Editor extension. It provides a dedicated preview panel with syntax highlighting.

VS Code is the best option when you’re actively writing or editing diagram code. For reading project docs, a dedicated viewer is faster.

3. Mermaid CLI — Export to SVG, PNG, PDF

The Mermaid CLI (mmdc) renders diagrams from the terminal. Install it with npm:

npm install -g @mermaid-js/mermaid-cli

Render a single file:

mmdc -i diagram.mmd -o diagram.svg
mmdc -i diagram.mmd -o diagram.png
mmdc -i diagram.mmd -o diagram.pdf

Process all .mmd files in a directory:

for f in *.mmd; do mmdc -i "$f" -o "${f%.mmd}.svg"; done

The CLI uses Puppeteer (headless Chromium) under the hood. It’s the right tool for CI/CD pipelines, documentation builds, and batch conversion — not for everyday previewing.

4. Mermaid Live Editor — Browser Prototyping

The official Mermaid Live Editor at mermaid.live renders diagrams in real time as you type. Useful for prototyping syntax, testing edge cases, and sharing diagrams via URL.

Limitations: requires internet, can’t open local files, and doesn’t integrate with your Markdown workflow. See Mermaid vs Draw.io for more on diagram-as-code tradeoffs.

5. GitHub and GitLab — No Setup Required

Both platforms render Mermaid code blocks natively in Markdown files — README pages, issues, pull requests, and wikis. Your team sees rendered diagrams without installing anything.

The rendering is static (no zoom, no pan) and only works on their web UI. For local rendering, use MDViewer or VS Code.

Which Method to Use

Reading project docs with diagrams → MDViewer (interactive SVGs, QuickLook, opens from Finder)
Writing or editing Mermaid code → VS Code with Mermaid extension (live preview in the editor)
Exporting to images for docs or presentations → Mermaid CLI (mmdc)
Quick check or sharing a link → Mermaid Live Editor
Team visibility without setup → GitHub / GitLab

Frequently Asked Questions

Can I render Mermaid without a browser?

Yes. MDViewer and VS Code both render locally without a browser or internet. The Mermaid CLI also works offline but uses headless Chromium internally.

How do I export a Mermaid diagram to an image?

Use the Mermaid CLI: mmdc -i diagram.mmd -o diagram.png for PNG, or .svg for SVG. MDViewer can export the full document (including diagrams) to PDF. The Mermaid Live Editor also has SVG and PNG download buttons.

Which diagram types are supported?

Flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, user journey diagrams, pie charts, quadrant charts, and git graphs. See What Is Mermaid? for the full list with examples.

Can I render Mermaid in CI/CD?

Yes. The Mermaid CLI (mmdc) is designed for this — add it to your build pipeline to generate SVGs or PNGs from .mmd files automatically.

Do I need Node.js installed?

Only for the Mermaid CLI (mmdc), which is installed via npm. MDViewer and VS Code don’t require Node.js.

Try MDViewer

MDViewer renders all Mermaid diagram types as interactive SVGs — zoom, pan, and full-screen lightbox. Opens .mmd files from Finder with QuickLook preview. Free to try.

Download MDViewer

Requires macOS 13.0 or later. Intel and Apple Silicon.