A .mmd file contains Mermaid diagram code — a text-based syntax for creating flowcharts, sequence diagrams, ER diagrams, Gantt charts, and other diagrams. The .mermaid extension is also used. These files are plain text and can be opened in any text editor, but you need a Mermaid-capable viewer to see the rendered diagram.

How do I open a .mmd file on Mac?

The fastest way is MDViewer — it opens .mmd and .mermaid files directly from Finder and renders them as interactive SVG diagrams. You can also press Space on any .mmd file in Finder to see a QuickLook preview. Alternatively, open .mmd files in VS Code with a Mermaid preview extension, or paste the code into the Mermaid Live Editor at mermaid.live.

What app should I set as the default for .mmd files on Mac?

Right-click any .mmd file in Finder, select Get Info, expand 'Open with', choose MDViewer, and click 'Change All'. This makes MDViewer the default app for all .mmd files. Repeat for .mermaid files if needed.

Can I open Mermaid diagrams embedded in Markdown files?

Yes. MDViewer, VS Code (with Mermaid extensions), GitHub, and GitLab all render Mermaid code blocks inside Markdown files. MDViewer renders them as interactive SVGs with zoom and pan; GitHub and GitLab render them as static images.

How to Open Mermaid Files on Mac (.mmd, .mermaid)

Q: Can I preview Mermaid files in Finder without opening an app?

Yes. MDViewer includes a QuickLook extension for macOS. Select any .mmd, .mermaid, or .md file in Finder and press Space to see the rendered diagram instantly — no app window needed.

Mermaid files (.mmd, .mermaid) contain diagram-as-code — plain text that describes flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more. macOS doesn’t render them natively — you’ll see raw text unless you use a viewer that understands Mermaid syntax.

Here are four ways to open Mermaid files on Mac, from the fastest to the most flexible.

1. MDViewer — Open from Finder

MDViewer opens .mmd and .mermaid files directly from Finder. Double-click or drag a file onto the app icon and it renders as an interactive SVG — you can zoom, pan, and open it in a full-screen lightbox.

QuickLook Preview

MDViewer includes a QuickLook extension. Select any .mmd file in Finder and press Space to see the rendered diagram instantly — no app window needed. This also works for .md files with Mermaid code blocks and standalone .mermaid files.

Set MDViewer as the Default App

Right-click any .mmd file in Finder
Select Get Info
Expand Open with
Choose MDViewer
Click Change All

Now all .mmd files open in MDViewer by default. Repeat for .mermaid files if you use that extension.

2. VS Code with a Mermaid Extension

If VS Code is your editor, install Markdown Preview Mermaid Support (bierner.markdown-mermaid) from the Extensions marketplace. This renders Mermaid code blocks in VS Code’s built-in Markdown preview pane.

For standalone .mmd files, install the Mermaid Editor extension — it adds a preview panel for .mmd files specifically.

Tradeoff: VS Code works well for editing Mermaid while writing code, but it’s heavier than a dedicated viewer. The Mermaid rendering is not interactive (no zoom or pan). For reading project documentation with diagrams, a dedicated viewer like MDViewer is faster.

3. Mermaid Live Editor (Browser)

The official Mermaid Live Editor at mermaid.live is a browser tool where you paste Mermaid code and see the rendered diagram. Useful for quick checks and sharing via URL.

Tradeoff: requires internet, doesn’t open local files directly. You need to copy-paste the file contents.

4. Terminal — Mermaid CLI

The Mermaid CLI (mmdc) converts .mmd files to SVG, PNG, or PDF from the command line:

npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg

This is best for CI/CD pipelines and batch processing, not for everyday viewing.

Mermaid Inside Markdown Files

Most Mermaid diagrams live inside .md files as fenced code blocks, not as standalone .mmd files. If you’re looking at a README or project documentation with Mermaid diagrams:

MDViewer renders Mermaid blocks as interactive SVGs inside the Markdown preview
VS Code renders them in the Markdown preview pane (with the Mermaid extension)
GitHub / GitLab render Mermaid blocks natively in their web UI (static images)

See What Is Mermaid? for a full introduction to the syntax and supported diagram types.

Frequently Asked Questions

What is a .mmd file?

A .mmd file contains Mermaid diagram code — plain text that describes flowcharts, sequence diagrams, ER diagrams, and more. The .mermaid extension is also used. These files are plain text, but you need a Mermaid-capable viewer to see the rendered diagram.

Can I preview Mermaid files in Finder?

Yes. MDViewer adds a QuickLook extension to macOS. Select any .mmd, .mermaid, or .md file in Finder and press Space to see the rendered diagram — no app needed.

Which diagram types does Mermaid support?

Flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, user journey diagrams, pie charts, and more. See What Is Mermaid? for the full list.

Can I edit Mermaid files on Mac?

Yes. Mermaid files are plain text — any text editor works. For live preview while editing, use VS Code with a Mermaid extension, or use MDViewer’s inline edit mode (double-click to edit, ⌘S to save).

Do I need an internet connection?

Not for MDViewer or VS Code — both render Mermaid diagrams locally. The Mermaid Live Editor and GitHub/GitLab require internet access.

Try MDViewer

MDViewer opens .mmd and .mermaid files from Finder, renders all diagram types as interactive SVGs, and includes QuickLook preview. Free to try.

Download MDViewer

Requires macOS 13.0 or later. Intel and Apple Silicon.