Checkout API — sequence
The payment step is asynchronous. The client polls until the order is confirmed.
Retries use exponential backoff starting at 500 ms.
— 1 —
Fenced mermaid blocks become vector diagrams inside the PDF. Sharp at any zoom, never cut across a page, text still searchable. Preview free.
Checkout API — sequence
The payment step is asynchronous. The client polls until the order is confirmed.
Retries use exponential backoff starting at 500 ms.
— 1 —
Use ```mermaid fences, exactly as GitHub, Obsidian and Notion render them. Flowchart, sequence, class, state, ER, Gantt and pie are supported.
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.
Diagrams are embedded as vector graphics, scaled to the page width and kept on one page.
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.
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.
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.
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.
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.
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.
| What matters | MDtoDOCX | Pandoc + mermaid-filter | Print a GitHub preview |
|---|---|---|---|
| Setup | None | Pandoc, Node, Puppeteer, a filter | None |
| Diagram format in PDF | Vector SVG | PNG by default, SVG with flags | Raster at screen DPI |
| Diagram kept on one page | Yes | Usually | No |
| Labels searchable | Yes | Only with SVG | No |
| Fonts match the document | Yes | Manual | No |
| Syntax errors | Shown inline | Build fails | Blank box |
| Typical size per diagram | 10–40 KB | 100–400 KB (PNG) | 200 KB+ |
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.%%{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.