How to Open Mermaid Files on Mac

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.

Quick Comparison

Mermaid File Extensions

Before choosing a tool, it helps to understand the three ways Mermaid diagrams are stored:

• .mmd — the most common extension for standalone Mermaid files. Contains pure Mermaid syntax with no Markdown wrapper.
• .mermaid — identical content, longer extension. Some tools and projects prefer it for clarity.
• .md with Mermaid code blocks — most Mermaid diagrams live inside Markdown files (READMEs, project docs, wikis) as fenced code blocks. This is the most common format in practice.

All four methods below handle all three formats, though the browser-based Mermaid Live Editor requires copy-pasting the code rather than opening files directly.

1. MDViewer — Open from Finder

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

MDViewer handles all Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, pie charts, git graphs, and quadrant charts.

QuickLook Preview

MDViewer includes a QuickLook extension for macOS. 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.

QuickLook is the fastest way to check a diagram on Mac — you can browse through a folder of .mmd files and press Space on each to preview without opening any app.

Set MDViewer as the Default App

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

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

Opening Mermaid Inside Markdown

Most Mermaid diagrams live inside .md files as fenced code blocks, not as standalone .mmd files. Open any .md file in MDViewer and every ```mermaid block renders as an interactive SVG inline with the rest of the document. This is how most developers encounter Mermaid — inside READMEs, architecture docs, and project wikis.

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 (⌘⇧V).

For standalone .mmd files, install the Mermaid Editor extension — it adds a dedicated preview panel for .mmd files with syntax highlighting and live reload as you type.

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), and VS Code uses more resources for what is a read-only task. 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 on the left and see the rendered diagram on the right. It’s the fastest way to prototype syntax and share diagrams via URL.

You can also export diagrams to SVG or PNG directly from the editor — useful when you need an image for a presentation or document that doesn’t support Mermaid natively.

Tradeoff: requires internet, doesn’t open local files directly (you need to copy-paste the file contents), and doesn’t integrate with your Finder workflow. For a deeper comparison of diagram tools, see Mermaid vs Draw.io.

4. Terminal — Mermaid CLI

The Mermaid CLI (mmdc) converts .mmd files to SVG, PNG, or PDF from the command line. Install it via 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

Process all Mermaid files in a directory:

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

The CLI uses Puppeteer (headless Chromium) internally. It’s the right tool for CI/CD pipelines, documentation builds, and batch conversion — not for everyday previewing. You need Node.js installed.

For more on rendering Mermaid diagrams on Mac, including export options and automation, see our dedicated guide.

Which Diagram Types Can You Open?

Mermaid supports a wide range of diagram types. All of them can appear in .mmd files or inside Markdown code blocks:

• Flowcharts — process flows, decision trees, system architecture. The most common type.
• Sequence diagrams — API calls, authentication flows, message passing between services.
• Class diagrams — object-oriented design, class relationships and inheritance.
• ER diagrams — database schemas, entity relationships.
• Gantt charts — project timelines, task dependencies.
• State diagrams — state machines, lifecycle transitions.
• Pie charts — simple data distribution visualizations.
• Git graphs — branch and merge visualizations for Git workflows.

MDViewer renders all of these as interactive SVGs. VS Code renders them in its preview pane (static). The Mermaid CLI exports any type to SVG, PNG, or PDF.

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.

What is the difference between .mmd and .mermaid?

Nothing — both extensions contain identical Mermaid syntax. The .mmd extension is shorter and more widely used. Some projects prefer .mermaid for clarity. Any viewer that opens one will open the other.

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 with examples.

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.

Can I convert .mmd files to images?

Yes. Use the Mermaid CLI: mmdc -i diagram.mmd -o diagram.svg for SVG, or change the extension to .png or .pdf. MDViewer exports the full document (with diagrams) to PDF. The Mermaid Live Editor also has SVG and PNG download buttons. See Render Mermaid Diagrams on Mac for more export options.

Try MDViewer

MDViewer opens .mmd and .mermaid files from Finder, renders all diagram types as interactive SVGs with zoom and pan, and includes QuickLook preview for browsing diagrams without opening the app. Free to try.

Requires macOS 13.0 or later. Intel and Apple Silicon.