Mermaid diagrams are not rendered in the output PDF

[pawelsikora]

Is your feature request related to a problem? Please describe. I can't render Mermaid diagrams using Headless Chrome JS renderer. Everything renders correctly, except Mermaid Diagrams. Do you have any working example to check this on your side?

Describe the solution you'd like I would like to have Mermaid Diagrams rendered correctly into the output PDF.

Describe alternatives you've considered I worked with the code a bit and noticed, that the produced output HTML is working correctly and when open in the web browser e.g. firefox it renders Mermaid diagrams fine. But after generating PDF diagrams disappear.

So... I noticed that https://github.com/RelaxedJS/ReLaXed is able to render PDF correctly, so basically I am taking the output HTML and open a subprocess with 'relaxed' to do a last step with the PDF processing and I managed to get the diagrams working.

I am just wondering, why is this not working with Headless Chrome for me? Maybe I am doing something wrong.

I see that another plugin is working with the diagrams fine: https://github.com/smaxtec/mkdocs-pdf-with-js-plugin

Otherwise maybe you would consider a PR with additional option for used the 'relaxed' tool as an alternative to the Headless Chrome?

Additional context Versions: mkdocs-with-pdf: 0.7.7 python: 3.7.9 chromedriver: 86.0.4240.22 Chrome: 86.0.4240.111

[orzih]

Thanks, I will check your PR and merge it.

How can I verify it the result? Can you provide a mkdocs project for testing?

[pawelsikora]

Hi,

Example project: https://github.com/pawelsikora/example_mkdocs_with_pdf_mermaid_support

There are already generated PDFs within "site/pdf" directory.

Let me know if that works for you ;) I have some issues as you will see in the generated PDFs, that for example changes in the additional 'css' files are not applied when using ReLaXed (e.g. logo is not visible in that version).

Maybe you will have better luck why it is working differently, I am not that much experienced with webdev :(

[ghost]

Hi,

I would be very interested in this at well. Would be great to have it!

Thanks

[pawelsikora]

@bk-blo: RelaxedJs has some drawback with usage using css styles with with-pdf, so I decided to approach it different way as well.

I am extracting the mermaid diagrams from markdown and produce a temporary png files, that are attached into html and then include into pdf.

It requires mermaid.cli via npm to be installed npm install -g mermaid cli

(I am using mermaid.cli in 8.8.2-beta.8 version which has -s option for scaling the diagrams, it is helpful with gannt or other diagrams which can be too small sometimes)

Please use this plugin for mkdocs: https://pypi.org/project/mkdocs-mermaid-export-to-svg/

mermaid-export-to-svg

and please give me a feedback, it is still in testing phase, but I am successfully generating PDF with this method. Just be careful as it should be disabled for the time of generating html for the site, I am working to have it working for both and being able to adjust mermaid cli arguments with plugins arguments.

[ghost]

Thanks for your quick support and sorry for the delayed answer. I have not been able to get it to work, but had only little time. I will give it another shot and keep you updated

[ScrambledRK]

I suspect the reason it doesn't render correctly is because WeasyPrint doesn't support inline svg's. I printed the debug_html successfully using chromium, but is ofc. missing the pdf table of content and other features added by mkdocs-with-pdf.

cd /docs
mkdocs build > for_pdf_print.html
chromium --no-sandbox --headless --disable-gpu --print-to-pdf="document.pdf" file:////docs/for_pdf_print.html

Using mkdocs-export-mermaid-to-svg didn't work for me at all, neither for web nor html. I didn't get any errors, it says its creating the *.png into the tmp folder, but it doesn't get written to the /tmp folder. As a result the images are missing.

[pawelsikora]

Hi,

Did you took a look at a linked issue? Seems pretty similar to your problem:

https://github.com/pawelsikora/mkdocs-export-mermaid-to-svg/issues/1

Let me know if it work out, otherwise just write in that thread so I could help you.

[ScrambledRK]

Hi, @pawelsikora

Yes I saw this issue too and solved it forking your mkdocs-export-mermaid-to-svg project, packaging it into my container and using it instead of the published version. Unfortunatly I haven't had the time to provide my fix to you.

I had to alter the mmdc subprocess call removing some version specific parameters and passing a permissive puppet config.

subprocess.run(['mmdc', '-p', mmdc_profile, '-t', 'default`', '-b', 'transparent', '-i', tf.name, '-o', tmp_name_png])

But considering that we are on the wrong project for discussing this further I'll shoot you a PM with my changes that you may or may not want to integrate. Sorry, I am quite short on time :(

[pawelsikora]

Sure, I will have a look on it and apply this. I am aware of this 'scale' parameter, which is quite helpful, but it could be handled more gracefully :) Thanks!

[jjocram]

What about #35 and #39?

35 was merged in master but now there are no mentions in the documentation.

Are there any news about mermaid diagrams?

[KatekovAnton]

hey. what is the conclusion? does it work or not?

[StefanSchroeder]

What's the status of mermaid support in the plugin?

There was no activity in this issue for 0.5 years, but it's unclear to me if the MR #35 fixed the problem. In addition, there doesn't seem to be any documentation still.

@pawelsikora @orzih

[NickCrews]

FYI it looks like #35 was only merged to the feature/support-relaxedjs branch, not main, so that's why it's not visible. It would be great if it could be ported to main, but IDK it seems the maintainer is AWOL :|

[m5c]

Hi wanted to follow up on the issue. It seems there have been commits affecting this issue, but as of Aug 2024 mermaids are only text in the generated PDFs. Has anyone found a workaround ?

[ticapix]

Hello,

I'm our case, when we want to generate the PDF version of the doc, we use kroki like that https://gitlab.com/gaia-x/toolset/gaia-x-document-template/-/blob/main/document_template/mkdocs_base.yml.j2?ref_type=heads#L61

Best regards Pierre

-------- Message d'origine -------- Le 09/08/2024 20:04, Maximilian Schiedermeier a écrit :

Hi wanted to follow up on the issue. It seems there have been commits affecting this issue, but as of Aug 2024 mermaids are only text in the generated PDFs. Has anyone found a workaround ?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[m5c]

@ticapix : Kroki worked like a charm! Thank you!

• For those wondering what it does: it's a webservice that converts the textual mermaid blocks (and all other sorts of diagram DSLs) to png.
• You can enable it in you mkdocs.yml like this:

[...]
plugins:
  - search
  - mermaid2
  - with-pdf
  - kroki:
      FencePrefix: ''
      FileTypeOverrides:
        mermaid: png

[m5c]

One issue I still have though: This also applies kroki for the web version (aka the non PDF version). Any chance to configure kroki so it only springs into action for PDF rendering, and don't interfere with the standard website build (mkdocs build)

[ticapix]

Hi,

From my previous link, you can notice that we use jinja2 (a template engine, but any other template engine or some sed cmds could work too) to generate 2 different mkdocs.yml config: one for the web without kroki, one for the PDF with kroki.

Best regards

-------- Message d'origine -------- Le 12/08/2024 22:32, Maximilian Schiedermeier a écrit :

One issue I still have though: This also applies kroki for the web version (aka the non PDF version). Any chance to configure kroki so it only springs into action for PDF rendering, and don't interfere with the standard website build (mkdocs build)

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>