Ship docs where the diagrams are in the PDF.
Mermaid made diagrams-as-code the default for engineering docs: a fenced code block becomes a flowchart, a sequence diagram, a state machine. But the moment those docs need to leave the wiki as a PDF, most exporters print the code block instead of the diagram — or rasterize it into a blurry screenshot.
Scripto renders Mermaid natively in the preview and carries the rendered diagram into the exported PDF as a crisp vector, scaled to fit the page and never split across a page break.
How to export Mermaid diagrams to PDF
Write a mermaid code block
Fence your diagram with ```mermaid — flowchart, sequenceDiagram, classDiagram, erDiagram, gantt, stateDiagram and more.
See it rendered instantly
The preview draws the diagram as you type, with syntax errors surfaced inline instead of a blank box.
Let pagination handle placement
Diagrams are kept whole: if one doesn’t fit the remaining space, it moves to the next page with its caption.
Export PDF
Diagrams export as sharp vectors — zoom to 800% in the PDF and the lines stay clean.
All the diagram types your docs use
Scripto ships current Mermaid with the full grammar set: flowcharts, sequence diagrams, class and ER diagrams, state machines, Gantt charts, git graphs, user journeys, pie charts, mind maps and timelines. There are ready-made templates for each, so a new architecture doc starts from a working diagram, not from the docs page.
Why vector output matters
Screenshot pipelines rasterize diagrams at screen resolution; on paper (or on a retina display at 150% zoom) the text inside nodes turns to mush. Scripto keeps the diagram as vector graphics through the whole pipeline, so labels stay as sharp as the body text, and the PDF stays small.
Architecture docs, RFCs, runbooks
Pair Mermaid with the rest of the technical toolkit — code blocks with highlighting, callout boxes, footnotes, a table of contents — and export design docs the whole company can read: engineers get the source in git, everyone else gets a paginated PDF with the diagrams intact.
Templates for this job
Frequently asked questions
Which Mermaid diagram types are supported?
Everything in current Mermaid: flowchart, sequence, class, ER, state, Gantt, gitgraph, journey, pie, mindmap and timeline. Scripto ships templates for each.
Are diagrams raster or vector in the PDF?
Vector. They scale losslessly in the exported file and print cleanly at any size.
What happens if a diagram is bigger than the page?
It is scaled down proportionally to fit the content width, and kept on a single page rather than being sliced by a page break.
Can I theme diagrams to match my document skin?
Mermaid’s default theme is tuned to match the document typography; per-diagram directives (%%{init: ...}%%) work for custom theming.
Does this work offline?
Yes — Mermaid runs locally like everything else. Install Scripto as a PWA and export diagram-heavy PDFs with no connection.
Related guides
Try it now — free
Export Markdown with Mermaid flowcharts, sequence and Gantt diagrams to PDF — diagrams render as crisp vectors inside the document. Free, in your browser.