How to open a .mmd file

A .mmd file is a plain-text file containing a Mermaid diagram. It is not an image and not a binary format — you can open it in any text editor and read it. To see it as an actual diagram, drop it on the box below. It renders in your browser, and nothing is uploaded to a server.

Drop a .mmd file here

Also accepts .mermaid, .md and .txt. The file is read in your browser — it is never uploaded.

What is a .mmd file?

Mermaid is a text syntax for diagrams. You describe the diagram in words and the renderer draws it, the same way Markdown describes formatting and the renderer produces the page. A .mmd file holds that text and nothing else — no styling, no image data, no metadata.

That is the whole reason the format exists. Because it is text, a diagram can live in a Git repository next to the code it describes, and a change to it shows up as a readable diff rather than a replaced binary. Here is a complete, valid .mmd file:

deploy.mmd — a complete file, six lines
flowchart LR
    Commit[Push to main] --> Build[Run tests]
    Build -->|pass| Deploy[Deploy to prod]
    Build -->|fail| Notify[Notify author]
    Deploy --> Smoke[Smoke test]
    Smoke --> Done[Release complete]

What opens a .mmd file

The short version: almost nothing opens a .mmd file by double-clicking it, because the extension is not registered to any application. What you actually need is something that renders Mermaid. Below is what I have verified, and where it does not work.

This pageWorks

Renders the file directly

Drop the file on the box above and you get the diagram. There is no upload step — the file is read in your browser with the File API and rendered locally, which means it also works for diagrams you are not allowed to send to a third party.

If you want to change the diagram rather than just look at it, use the link under the preview to open it in the editor.

Any text editorWorks

Shows the source, not the diagram

Notepad, TextEdit, vim, anything. A .mmd file is UTF-8 text, so you will see the source immediately. You will not see a diagram, and nothing is broken — there is simply no image in the file to show.

This is the fastest way to check whether a file you were sent is actually Mermaid: open it and see whether the first non-blank line is a diagram keyword such as flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram or gantt.

GitHubDoes not work

Renders ```mermaid blocks in Markdown — not bare .mmd files

GitHub renders Mermaid inside fenced code blocks. Its documentation lists exactly where: GitHub Issues, GitHub Discussions, pull requests, wikis, and Markdown files. A standalone .mmd file is not in that list, and opening one in the repository file browser shows the source text.

So if you want a diagram visible on GitHub, the diagram has to be inside a ```mermaid block in a .md file, not in a .mmd file of its own. Keeping a .mmd file for the source and embedding the same content in the README is a common and reasonable duplication.

GitLabDoes not work

Renders ```mermaid blocks — not bare .mmd files, and on an older Mermaid

Same shape as GitHub: Mermaid renders inside fenced blocks in Markdown, issues, merge requests and wikis, but a standalone .mmd file is not documented as rendering.

There is a second thing worth knowing, because it causes real confusion. GitLab.com states that it supports Mermaid version 10. This site runs 11.12.2. Syntax added after version 10 will render here and fail there, which is the usual explanation for "it works in the viewer but not in our GitLab". On self-managed GitLab there is a third trap: if a Cross-Origin-Resource-Policy header is set to same-site or same-origin, Mermaid diagrams fail silently — no error, just no diagram.

.mmd vs .mermaid vs .md

.mmd and .mermaid are the same thing. Both contain nothing but Mermaid source, and every tool I know of that accepts one accepts the other. .mmd is the shorter and more common of the two; the official command-line tool defaults to it. Pick one and be consistent inside a project — the choice has no technical consequence.

.md is different in kind. A Markdown file is a document that may contain a Mermaid diagram, wrapped in a fenced block that starts with three backticks followed by the word mermaid. The diagram is a passage inside a larger text.

That difference is the single most common reason a file will not render, and it goes in both directions. Paste the contents of a .md file into a Mermaid renderer and it fails, because the fence line is not Mermaid syntax. Save a bare Mermaid diagram into a .md file without a fence and GitHub shows it as a paragraph of text. The rule is simple: a .mmd file must start with a diagram keyword, and a .md file must have the diagram inside a fence.

This viewer accepts .mmd, .mermaid, .md and .txt, but it treats whatever it reads as raw Mermaid. If you drop a Markdown file that has prose around the diagram, strip everything except the diagram first.

It won't render — what's actually wrong

Mermaid's error messages are precise but not friendly. The useful trick is to read the very end of the message: after "got", mermaid names the token it choked on, and that token identifies the problem far better than the line number does. I have reproduced every case below against mermaid 11.12.2 — the broken version really does fail and the fixed version really does render.

What you see

No diagram type detected matching given configuration for text: ```mermaid

Why

You copied the diagram out of a Markdown file or a chat message and brought the fence with it. The three backticks are Markdown, not Mermaid, so the parser never reaches the diagram.

Fix

Delete the opening ```mermaid line and the closing ``` line. The file must start with the diagram keyword.

Broken
```mermaid
flowchart TD
    A[Start] --> B[End]
```
Fixed
flowchart TD
    A[Start] --> B[End]

What you see

Parse error, message ends with: got 'STR'

Error ends with: got 'STR'

Why

A double quote inside a node label. The label parser treats the quote as the start of a quoted string and then finds the label bracket where it expected the closing quote.

Fix

Wrap the whole label in double quotes and use single quotes inside, or write the quote as the HTML entity #quot;.

Broken
flowchart TD
    A[He said "hello"] --> B[Done]
Fixed
flowchart TD
    A["He said 'hello'"] --> B[Done]

What you see

Parse error, message ends with: got 'PS'

Error ends with: got 'PS'

Why

An opening parenthesis inside a node label. Parentheses are shape syntax in Mermaid — A(text) is a rounded node — so a bare ( inside square brackets is read as the start of a shape.

Fix

Quote the label. Anything inside double quotes is treated as text, including brackets.

Broken
flowchart TD
    A[Call foo(bar)] --> B[Done]
Fixed
flowchart TD
    A["Call foo(bar)"] --> B[Done]

What you see

Parse error, message ends with: got 'end'

Error ends with: got 'end'

Why

You used end as a node id. Lowercase end closes a subgraph, so the parser sees a block terminator where it expected a node. This one bites often because "end" is the natural name for the last node of a flow.

Fix

Capitalise it, or give the node an id and put the word in the label. Both work; End is the smaller change.

Broken
flowchart TD
    A[Start] --> end
Fixed
flowchart TD
    A[Start] --> End

What you see

No diagram type detected matching given configuration for text: sequencediagram

Why

The diagram keyword is misspelled, or the capitalisation is wrong. Mermaid's keywords are case-sensitive: sequenceDiagram works, sequencediagram does not. The same applies to stateDiagram-v2 and erDiagram.

Fix

Fix the capitalisation. Note that graph is still accepted as a legacy alias for flowchart, so that particular old syntax is not your problem.

Broken
sequencediagram
    Alice->>Bob: Hello
Fixed
sequenceDiagram
    Alice->>Bob: Hello

What you see

Parse error on the line where you named a node

Why

A node id containing a space. The id is the token before the arrow, and a space ends that token, so the parser finds a second bare word it cannot place.

Fix

Give the node a single-word id and put the human-readable text in the label.

Broken
flowchart TD
    auth server --> database
Fixed
flowchart TD
    auth[Auth server] --> db[Database]

What you see

Parse error on an edge label between pipes

Why

Parentheses inside an edge label. The |...| label has the same restriction as a node label — brackets are syntax, not text.

Fix

Quote the edge label.

Broken
flowchart TD
    A -->|yes (always)| B
Fixed
flowchart TD
    A -->|"yes (always)"| B

What you see

Parse error in an ER diagram, message ends with: got 'NEWLINE'

Error ends with: got 'NEWLINE'

Why

A relationship with no label. Unlike a flowchart edge, an ER relationship requires the colon and a verb phrase — it is not optional, and leaving it off ends the line early.

Fix

Add a colon and a label. Use a short verb.

Broken
erDiagram
    CUSTOMER ||--o{ ORDER
Fixed
erDiagram
    CUSTOMER ||--o{ ORDER : places

What you see

Parse error reported on the last line of the diagram

Why

A block that was opened and never closed — alt, opt, loop, par and subgraph all need a matching end. Mermaid reports the failure at the point it runs out of input, so the line number points at the bottom of the file rather than at the unclosed block.

Fix

Count your block openers and your ends. When the error line is the final line, this is almost always the cause.

Broken
sequenceDiagram
    Alice->>Bob: Request
    alt success
        Bob-->>Alice: OK
Fixed
sequenceDiagram
    Alice->>Bob: Request
    alt success
        Bob-->>Alice: OK
    end

What you see

Lexical error on line 1. Unrecognized text.

Why

An invalid direction after the diagram keyword. Flowcharts accept TB, TD, BT, LR and RL, and nothing else — a typo here fails at the lexer, before any of your nodes are read.

Fix

Use one of the five valid directions. TD (top-down) and LR (left-right) cover almost every case.

Broken
flowchart XY
    A --> B
Fixed
flowchart TD
    A --> B

What you see

It renders here but not in GitLab, Confluence or an older tool

Why

A version difference. This viewer runs Mermaid 11.12.2; GitLab.com documents support for version 10, and self-hosted wikis are often years behind. Syntax introduced after the other tool's version parses here and fails there.

Fix

Ask the other renderer what version it is. Putting the single word info in a diagram makes Mermaid render its own version number, which is quicker than reading release notes.

Fixed
info

One more thing worth knowing, because it produces no error at all: on self-managed GitLab, a Cross-Origin-Resource-Policy header set to same-site or same-origin makes Mermaid diagrams fail silently. No message, no diagram, nothing in the page. If a diagram renders everywhere except one self-hosted instance, that is where to look.

Converting to PNG, SVG or PDF

Open the file in the editor and use the export buttons. SVG keeps the diagram as vector text, so it stays sharp at any size and the labels remain selectable and searchable — that is the right choice for documentation and for anything that might be re-exported later. PNG is a bitmap, exported here at two to three times the display size so it holds up on a high-density screen; use it where SVG is not accepted, which in practice means most chat clients and some wikis.

There is no PDF button, and I would rather say so than pretend. The practical route is to export SVG and either place it in the document you are already writing, or print that page to PDF from the browser. A vector SVG placed in a PDF stays vector.

For anything repeatable — a build step, a batch of files, a pre-commit hook — the official command-line renderer, @mermaid-js/mermaid-cli, takes the same .mmd file and writes the image directly without a browser.

Common questions

How do I open a .mmd file online?
Drop it on the box at the top of this page. It renders in your browser without an upload and without an account. You can also open the editor and drag the file onto the preview panel.
What program opens a .mmd file?
Any text editor will show you the source, because the file is plain text. To see the diagram you need something that renders Mermaid — this page, the editor on this site, or the mermaid-cli command-line tool. There is no desktop application that owns the .mmd extension.
Is a .mmd file the same as a .mermaid file?
Yes. The two extensions hold identical content and are interchangeable. .mmd is the more common of the two and is what the official command-line tool uses by default.
Why does my .mmd file not render on GitHub?
GitHub renders Mermaid only inside fenced ```mermaid code blocks in Markdown files, issues, discussions, pull requests and wikis. A standalone .mmd file is shown as source text. To make it visible on GitHub, put the same diagram inside a fenced block in a .md file.
Can I open a .mmd file without installing anything?
Yes — that is what this page is for. The rendering runs as JavaScript in your browser, so there is nothing to install and the file never leaves your machine.
My diagram works here but not in our wiki. Why?
Almost always a version difference. This viewer runs Mermaid 11.12.2 and many wikis run something older — GitLab.com documents version 10. Put the word info in a diagram on the other system to make it print the version it is running.

Diagram types you can open here

Written by Dominik Malsch · Last updated:

Open the editor →