How to Export Mermaid Diagrams to PDF

Diagrams make technical documentation clearer, but most diagramming tools require dragging and dropping shapes on a canvas. Mermaid takes a different approach: you write diagrams as plain text, and they render automatically. Here is how to create Mermaid diagrams in Markdown and export them to professional-quality PDFs.

What is Mermaid?

Mermaid is a text-based diagramming language that lets you create diagrams using simple, readable syntax inspired by Markdown. Instead of opening a drawing tool and manually positioning boxes and arrows, you describe the relationships in text and Mermaid generates the visual diagram.

Mermaid supports a wide range of diagram types:

• Flowcharts for process flows and decision trees
• Sequence diagrams for showing interactions between actors
• Class diagrams for object-oriented design
• State diagrams for finite state machines
• Entity-relationship diagrams for database schemas
• Gantt charts for project schedules
• Pie charts for proportional data

Because Mermaid syntax is plain text, your diagrams live right inside your Markdown files. They are version-controllable with Git, searchable, and easy to update without opening a separate tool.

Mermaid Diagram Types You Can Export

Flowcharts

Flowcharts are the most common Mermaid diagram type. You define nodes and the connections between them using arrows and labels.

```mermaid
graph TD
    A[Start] --> B{Is user logged in?}
    B -->|Yes| C[Show dashboard]
    B -->|No| D[Show login page]
    D --> E[User enters credentials]
    E --> F{Valid?}
    F -->|Yes| C
    F -->|No| D
    C --> G[End]
```

This simple flowchart describes a login flow. Each node gets a shape based on its definition: square brackets produce rectangles, curly braces produce diamonds (decision nodes), and parentheses produce rounded rectangles. The TD direction means top-down, but you can also use LR for left-to-right layouts.

Sequence Diagrams

Sequence diagrams show how actors interact over time. They are useful for documenting API calls, user interactions, and system-to-system communication.

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database

    User->>Browser: Click "Convert"
    Browser->>Server: POST /api/convert
    Server->>Database: Save document
    Database-->>Server: Document ID
    Server-->>Browser: PDF download link
    Browser-->>User: Download PDF
```

Arrows with solid lines (->>) represent requests, while dashed lines (-->>) represent responses. You can add labels to each arrow to describe the message being sent. The participants are listed at the top and their lifelines run vertically down the diagram.

Class Diagrams

Class diagrams show the structure of an object-oriented system, including classes, their attributes, methods, and relationships.

```mermaid
classDiagram
    class Document {
        +String title
        +String content
        +convert(format)
        +save()
    }
    class PDF {
        +pageSize
        +render()
    }
    class Markdown {
        +ast
        +parse()
    }
    Document <|-- PDF
    Document <|-- Markdown
```

Class diagrams use a familiar UML-like syntax. The <|-- operator denotes inheritance, and you can also express composition, aggregation, and association between classes.

How to Convert Mermaid Diagrams to PDF

Exporting Mermaid diagrams to PDF is straightforward with ConvertMD2PDF. Follow these steps:

Step 1: Visit ConvertMD2PDF

Open convertmd2pdf.com in your browser. No signup, no account, and no installation required. The editor loads immediately.

Step 2: Write Your Mermaid Diagram

In the Markdown editor on the left, type your Mermaid diagram inside a fenced code block with the mermaid language identifier. For example:

Here is my flowchart:

```mermaid
graph LR
    A[Input] --> B[Process]
    B --> C[Output]
```

Step 3: See the Live Preview

The right panel shows a real-time preview of your document, including the rendered Mermaid diagram. If there is a syntax error in your Mermaid code, the preview will show an error message so you can fix it immediately.

Step 4: Download as PDF

Click the "Download PDF" button. ConvertMD2PDF renders the Mermaid diagram as a crisp SVG graphic embedded in the PDF, ensuring the output looks sharp at any zoom level. Choose your preferred paper size (A4, Letter, or others) and font before exporting.

Tips for Best Diagram Output

Keep Diagrams Simple

A diagram with too many nodes and connections becomes hard to read on a printed page. Aim for 7 to 12 nodes per diagram. If your process is more complex, break it into multiple smaller diagrams, each showing a different stage or subsystem.

Use Vertical Orientation for Tall Diagrams

Flowcharts with many sequential steps tend to be tall and narrow. If your diagram has more than 8 rows of nodes, consider using the TD (top-down) direction and setting your PDF to portrait orientation. For wide diagrams with parallel branches, use LR (left-to-right) with landscape paper.

Choose Modern Theme for Color Diagrams

Mermaid supports several built-in themes. The default and forest themes produce colorful diagrams that look great on screen and in color-printed PDFs. If you expect the PDF to be printed in black and white, use the neutral theme, which uses grayscale fills that remain distinguishable without color.

Label Your Arrows Clearly

Unlabeled connections between nodes are ambiguous. Always add descriptive labels to your arrows, especially on decision branches. Use the syntax A -->|Label| B to add a label. This makes the diagram self-documenting, which is critical when the PDF is shared with people who do not have access to the source Markdown.

Why ConvertMD2PDF for Mermaid?

Real-Time Preview

You see your Mermaid diagrams rendered live as you type. There is no separate "build" or "render" step. Errors in your Mermaid syntax surface immediately in the preview panel, so you can fix them before exporting.

Proper SVG Rendering in PDF

Some converters rasterize diagrams into low-resolution images before embedding them in the PDF. ConvertMD2PDF preserves Mermaid diagrams as vector graphics, which means they stay crisp and sharp at any zoom level, whether viewed on screen or printed on paper.

Light Theme Conversion for Print Quality

Even if you use ConvertMD2PDF in dark mode, the exported PDF uses a clean light theme by default. This ensures diagrams look good when printed on standard white paper, with dark text on light backgrounds and no wasted ink on dark fills.