Cropmark

Mermaid diagrams to PDF, drawn and centered

Put a diagram in a ```mermaid code block and Cropmark draws it in the preview and in the PDF: centered, scaled to fit the page and never split across two pages. Flowcharts, sequence, class and Gantt diagrams all print, in a restrained grayscale style that survives black-and-white printing.

Write a diagram

A fenced code block with the language mermaid:

Markdown
```mermaid
flowchart TD
  A[Draft] --> B{Reviewed?}
  B -->|yes| C[Publish]
  B -->|no| A
```

How diagrams print

  • Centered and scaled

    A diagram narrower than the page is centered; a wider one is scaled down to fit.

  • Never split

    A diagram always stays on one page.

  • Readable text

    Labels are real text in the PDF, so they stay sharp and searchable.

  • Errors do not block you

    A diagram with a syntax error shows Mermaid’s message and its source; the rest of the document exports.

Questions

Which Mermaid version is used?

Mermaid 12, in the preview and on the server, with the same settings. Both draw the same diagram; only text widths can differ by a few pixels, because your computer and the server do not have exactly the same fonts.

Why is my diagram small?

Wide diagrams are scaled down to the page width. On a portrait page, a top-to-bottom layout (flowchart TD) usually reads better than left-to-right.

Which diagram types work?

Flowcharts, sequence, class and Gantt diagrams are tested; the other Mermaid 12 types render the same way.

Can I use colors?

Diagrams use Mermaid’s neutral theme so they print well in black and white.

Updated .