How do I convert Markdown with Mermaid diagrams to PDF?

Paste the Markdown into md2pdf.me/mermaid-to-pdf, check that the diagrams are drawn in the preview, and click Download PDF. Code blocks named mermaid become vector diagrams in the PDF.

Why does my Mermaid diagram show up as code?

The code block must start with three backticks followed by the word mermaid. If it does, the preview shows the line of the diagram that has an error.

Mermaid diagrams to PDF

Q: Is my document uploaded to draw the diagrams?

No. Mermaid runs in your browser; nothing is uploaded.

Paste Markdown with mermaid code blocks and download a PDF with every flowchart, sequence diagram and chart drawn in place. Free, and your document never leaves your browser.

Markdown

# Release process

Every release goes through the same steps. The diagrams below are written in Mermaid inside the Markdown, and md2pdf.me draws them in the PDF.

## From pull request to production

```mermaid
flowchart LR
  PR[Pull request] --> CI{Tests pass?}
  CI -- No --> Fix[Fix and push] --> CI
  CI -- Yes --> Review[Code review]
  Review --> Merge[Merge to main]
  Merge --> Staging[(Staging)] --> Prod[(Production)]
```

## Deploying

```mermaid
sequenceDiagram
  participant Dev as Developer
  participant CI as CI server
  participant Prod as Production
  Dev->>CI: Push tag v2.4.0
  CI->>CI: Build and test
  CI->>Prod: Deploy
  Prod-->>CI: Health check OK
  CI-->>Dev: Release published
```

## Schedule

```mermaid
gantt
  title Release 2.4
  dateFormat YYYY-MM-DD
  section Build
  Feature freeze   :done, f1, 2026-11-02, 3d
  Bug fixing       :f2, after f1, 5d
  section Ship
  Staging tests    :s1, after f2, 3d
  Go live          :milestone, after s1, 0d
```

> Replace this example with your own Markdown. Any code block named `mermaid` becomes a diagram.

Preview

Download PDF opens your browser's print dialog. Choose Save as PDF as the destination.

How it works

Add your Markdown. Paste it, open a .md file, or drag one onto the page. Diagrams go in code blocks named mermaid, the same way GitHub, GitLab and Obsidian expect them.
Check the preview. Diagrams are drawn as you type. If one has a mistake, its code stays visible with the error above it.
Click Download PDF and choose Save as PDF in the print dialog. Diagrams are vector graphics, so they stay sharp at any zoom and never split across pages.

Diagrams are greyscale in the Classic style, which suits printed reports, and in color in the GitHub style, matching how they look on github.com.

Mermaid cheat sheet

The six diagram types people use most. Click Try it to load an example into the editor (it replaces what's there). The Mermaid documentation covers every option and the other diagram types, such as mind maps, timelines and state diagrams.

Flowchart

Boxes and arrows. LR lays it out left to right, TD top down. The bracket style sets the shape: [box], (rounded), {decision}, [(database)].

flowchart TD
  Start([Order received]) --> Stock{In stock?}
  Stock -- Yes --> Ship[Ship the order]
  Stock -- No --> Notify[Email the customer]
  Ship --> Done([Done])
  Notify --> Done

Sequence diagram

Messages between people or systems over time. ->> is a solid arrow, -->> a dashed reply.

sequenceDiagram
  participant U as User
  participant A as App
  participant S as Server
  U->>A: Click "Sign in"
  A->>S: POST /login
  S-->>A: 200 OK and a token
  A-->>U: Show the dashboard

Gantt chart

Project schedules. Tasks can start on a date or after another task; done and milestone change how a task is drawn.

gantt
  title Website relaunch
  dateFormat YYYY-MM-DD
  section Design
  Wireframes     :done, w1, 2026-11-02, 5d
  Visual design  :w2, after w1, 7d
  section Build
  Development    :b1, after w2, 14d
  Launch         :milestone, after b1, 0d

Class diagram

Classes with their fields and methods. <|-- means "inherits from".

classDiagram
  class Animal {
    +String name
    +speak() void
  }
  class Dog {
    +fetch() void
  }
  Animal <|-- Dog
  Animal <|-- Cat

Entity relationship diagram

Database tables and how they relate. ||--o{ reads "one to zero or more".

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : "appears in"

Pie chart

A title, then one line per slice. Mermaid works out the percentages.

pie title Where the week goes
  "Meetings" : 12
  "Building" : 20
  "Reviews" : 8

Frequently asked questions

My diagram shows up as code. What's wrong?

The code block must be named mermaid: three backticks followed by the word mermaid on the opening line. If it is, look for the red error above the code in the preview; it gives the line of the diagram Mermaid couldn't read.

Does it work with diagrams from ChatGPT or Claude?

Yes. When you ask an AI assistant for a flowchart or diagram, it usually answers with a mermaid code block. Copy the answer with the assistant's copy button and paste it here. See saving AI answers as PDF.

Can I get diagrams in color?

Choose the GitHub style. Classic draws diagrams in shades of grey to match its book-like look and to print well in black and white.

Is my document uploaded to draw the diagrams?

No. Mermaid runs inside your browser, like the rest of the converter. Nothing you type or open is sent anywhere.

A diagram is too small to read in the PDF.

Wide diagrams are shrunk to fit the page width. Switching a flowchart from LR to TD makes it taller and narrower, so it can be drawn larger.

Read the Markdown guide