I am trying to generate a pdf from an HTML file that utilized mermaid.js. (see attached).

I used the following command line:

prince --javascript --verbose mm.html


The PDF file only contains the Mermaid code, not the resultant diagram.

Has anyone gotten Mermaid to work with Prince?

THANKS

1. mm.html‎ 0.4 kB ‎
   the html file
2. mm.pdf‎ 18.0 kB ‎
   the pdf file

Pre-rendering the mermaid diagrams into PNGs with mermaid-cli (mmdc) https://github.com/mermaid-js/mermaid-cli is the only way I got it working.

Then I replaced all mermaid blocks with a PNG <img>. I had a Markdown--remark-->HTML--prince-->PDF flow, so it was easy. But I think you could achieve this even through a JavaScript on the page.

There is an alternative mermaid library can be used with any JavaScript runtime, including Prince, to generate SVG.

https://www.npmjs.com/package/beautiful-mermaid

However, due to a CSS feature (color-mix) is missing in Prince, the generated SVG cannot by rendered properly.

Tracking the feature request at https://www.princexml.com/forum/topic/5219/css-color-mix-function?p=1#26199.