Prevent Mermaid charts from overflowing the page in Export to PDF

Share & showcase
,
1

I made some Mermaid templates for my team, and noticed many of them spilled off the page when included in a PDF export, so this CSS helps them print nicely, never overflowing more than one page. This make very large charts very small, but I figure if you need that much control over large format printing, Export to PDF from Markdown may not be the answer.

@media print {
  .mermaid > svg {
    max-width: 100%;
    max-height: 100%;
    page-break-inside: avoid;
  }
}

Not entirely sure I’ve done this correctly- adding the “> svg” was the only way I could get a visible result, but that may have side effects I have not seen.

Personally I’ve also got this as another CSS snippet, so that the same downscaling happens in preview mode:

.mermaid > svg {
	max-width: 100%;
}
6 Likes
2

@Jadael: thanks for this, it is a sine qua non for PDF export.

Unfortunately, it does not work for me, so I may have done something wrong.
I created a snippet with your code (the top block), then enabled the snippet, and assumed that doing a PDF export the Mermaid graph would scale to the page width.

Also, in the PDF export window, there is a %-age slider which I set to 100.

Please tell me what I did wrong.

3

If you use the slider the whole document will be scaled. In my case I have a structure gram created with mermaid:

Blockquote

graph TD
boxa[Begehung]
-->boxaa[Vor-Ort-Begehung]

boxaa[Vor-Ort-Begehung]
-->boxaaa[SFK und/oder AM]

boxaa[Vor-Ort-Begehung]
-->boxaab[SFK + TeleAM]

boxa[Begehung]
-->boxab[TeleBegehung]

boxab[TeleBegehung]
-->boxaba[SVP* + TeleSFK]

boxab[TeleBegehung]
-->boxabb[SVP* + TeleSFK* + TeleAM*]

boxab[TeleBegehung]
-->boxaab[SFK + TeleAM]

and I found that in scale 100% it will be cut on the right sight. I want only to scale this. Not the whole text in the document. Any idea how to control this?

4

Thanks for sharing your work. I often got annoyed with this, and today I really felt so bothered by it, that I took the five minutes to google ^^

This is a very simple solution and works great!