Markdown to PDF with Mermaid

Fenced mermaid blocks become vector diagrams inside the PDF. Sharp at any zoom, never cut across a page, text still searchable. Preview free.

Pro · preview is free

Checkout API — sequence

The payment step is asynchronous. The client polls until the order is confirmed.

ClientAPIPayment POST /orderscharge(card, amount) pending202 Accepted GET /orders/42200 confirmed

Retries use exponential backoff starting at 500 ms.

— 1 —

Converted in your browser. Your file never leaves your device.
1

Paste Markdown with a mermaid block

Use ```mermaid fences, exactly as GitHub, Obsidian and Notion render them. Flowchart, sequence, class, state, ER, Gantt and pie are supported.

2

Check the diagram in the preview

The diagram is rendered live. To change its colours, put a Mermaid init directive at the top of the block; there is no theme control in the options bar.

3

Download PDF

Diagrams are embedded as vector graphics, scaled to the page width and kept on one page.

How a Mermaid diagram ends up as vector art in the PDF

Mermaid is a text language for diagrams. GitHub, GitLab and most Markdown editors render it in the browser, which is why it feels native to Markdown. A PDF has no idea what Mermaid is. The moment you print, something has to turn the text into shapes, and how that step is done decides whether your flowchart looks like a drawing or like a screenshot.

MDtoDOCX runs the Mermaid renderer during conversion and captures its output as SVG, not as a PNG. The SVG is then embedded in the PDF as a vector object. Lines stay lines, boxes stay boxes, and the labels stay real text. Zoom to 400 % in Acrobat and the edges are still crisp. Search the PDF for a node name and it is found. A screen reader sees the labels. None of that is true of the rasterised diagrams most converters produce, which look soft at print resolution and add hundreds of kilobytes per figure.

Diagrams never split across pages

A diagram cut in half by a page boundary is unreadable, so each rendered figure is wrapped with page-break-inside: avoid. If the diagram does not fit in the space left on the current page, the whole figure moves to the next page and the text flows around the gap. Very tall diagrams, such as a Gantt chart with forty tasks, are scaled down to fit a single page rather than being sliced. The caption, taken from a %% title comment or the paragraph immediately following the block, stays with the figure.

Width and scaling

Mermaid produces diagrams of arbitrary size. MDtoDOCX scales each SVG to the printable width of the page (A4 minus 2.54 cm margins is 15.9 cm) while preserving its aspect ratio. Small diagrams are not enlarged beyond their natural size, so a three-node flowchart does not become a poster. You can force a smaller width with a directive comment such as %%{init: {"themeVariables": {"fontSize": "14px"}}}%% at the top of the block; Mermaid init directives are passed through untouched.

Fonts inside the diagram

Mermaid labels default to a generic sans-serif, which is why exported diagrams often look different from the document around them. MDtoDOCX sets the diagram font to the body font you chose in the options bar and embeds it in the PDF, so a Calibri document has Calibri labels. Because labels are text rather than pixels, they also honour the page's font embedding, so the PDF renders identically on Windows, macOS and a print shop's RIP.

Which diagram types work

Everything Mermaid 10 renders: flowchart and graph, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap and timeline. If a block has a syntax error, the PDF shows the source in a monospace box with the parser message below it, so a typo does not silently drop a figure. Fix the block and the preview updates.

Free preview, Pro download

Rendering happens in your browser, and the preview is free so you can check the layout first. Downloading a PDF with rendered Mermaid diagrams is a Pro feature; on the free tier the block is exported as highlighted source code. Pro also covers the same diagrams in Word, see Markdown to Word with Mermaid, and everything in Pricing. If you only need it once, the 7-Day Pass is $4.9.

MDtoDOCX vs Pandoc vs browser print

What mattersMDtoDOCXPandoc + mermaid-filterPrint a GitHub preview
SetupNonePandoc, Node, Puppeteer, a filterNone
Diagram format in PDFVector SVGPNG by default, SVG with flagsRaster at screen DPI
Diagram kept on one pageYesUsuallyNo
Labels searchableYesOnly with SVGNo
Fonts match the documentYesManualNo
Syntax errorsShown inlineBuild failsBlank box
Typical size per diagram10–40 KB100–400 KB (PNG)200 KB+

Frequently asked questions

Does Markdown to PDF support Mermaid?
Yes. Any fenced code block with the language mermaid is rendered to a vector diagram and embedded in the PDF. All Mermaid 10 diagram types are supported, including flowchart, sequence, class, state, ER, Gantt, pie, mindmap and timeline.
Is the diagram an image or vector graphics?
Vector. The Mermaid output is captured as SVG and embedded as vector objects, so it stays sharp when zoomed or printed and the labels remain searchable text.
Can I convert Markdown to PDF with Mermaid online for free?
The preview, including rendered diagrams, is free with no account. Downloading the PDF with vector diagrams is a Pro feature; the $4.9 7-Day Pass covers one-off use. Free downloads export the block as source code.
Will a large diagram be split across two pages?
No. Each diagram is kept on a single page. If it does not fit in the remaining space it moves to the next page, and diagrams taller than a page are scaled down to fit.
Can I change the Mermaid theme?
Yes, but from inside the block, not from the options bar — this version has no theme control. Start the block with an init directive, for example %%{init: {'theme': 'forest'}}%%. The code is passed to Mermaid untouched, so every theme and option Mermaid itself supports works here. The default is Mermaid's own, which prints legibly in black and white.
What happens if my Mermaid syntax has an error?
The PDF shows the block as monospace source with the parser's error message underneath, so nothing disappears silently. The preview updates as soon as you fix it.
Is my diagram uploaded to render it?
No. Mermaid runs inside your browser and the PDF is assembled locally. Only Pro server-side batch jobs, started explicitly, send content to our renderer, where it is deleted within 24 hours.
Can I get the same diagrams in a Word document?
Yes. Switch the output to Word (.docx) or open Markdown to Word with Mermaid. Diagrams are embedded as high-resolution images that Word can resize.