Mermaid diagrams are not rendered in the output PDF #34

pawelsikora · 2020-11-01T19:52:00Z

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

Add option to use 'ReLaXeD' JS renderer for PDF instead of Headless Chrome. option added: use_relaxed_js_renderer option changed: - output_pdf_name: default 'document' as before - output_path: contains now only directory name not a file name Issue orzih#34

orzih · 2020-11-02T21:39:59Z

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 · 2020-11-03T20:48:33Z

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 · 2020-11-25T07:31:11Z

Hi,

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

Thanks

pawelsikora · 2020-11-25T17:35:04Z

@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 · 2021-01-13T16:24:10Z

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 · 2021-03-26T21:18:36Z

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 · 2021-03-26T21:46:01Z

Hi,

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

pawelsikora/mkdocs-export-mermaid-to-svg#1

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

ScrambledRK · 2021-04-16T14:49:17Z

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 · 2021-04-16T15:17:34Z

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 · 2021-04-24T23:57:09Z

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 · 2021-11-29T02:33:17Z

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

StefanSchroeder · 2022-05-09T14:15:52Z

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 · 2023-05-03T23:50:13Z

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 :|

Add option to use 'ReLaXeD' JS renderer for PDF instead of Headless Chrome. option added: use_relaxed_js_renderer option changed: - output_pdf_name: default 'document' as before - output_path: contains now only directory name not a file name Issue orzih#34

m5c · 2024-08-09T16:04:22Z

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 · 2024-08-09T16:34:00Z

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](#34 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AAXSJ7W6YLY32UWZF5RBZHDZQTSB3AVCNFSM6AAAAABMIXP6MOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENZYGI3TONRUGQ). You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

m5c · 2024-08-12T17:21:53Z

@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 · 2024-08-12T18:31:50Z

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 · 2024-08-12T21:51:30Z

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](#34 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AAXSJ7T2UC4GAFRNBKBPCOLZRD5S3AVCNFSM6AAAAABMIXP6MOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUGY3DIMBSGA). You are receiving this because you were mentioned.Message ID: ***@***.***>

pawelsikora mentioned this issue Nov 1, 2020

Support for Mermaid Diagrams using ReLaXed JS #35

Merged

ghost mentioned this issue Jan 14, 2021

no png gets created from tmp file pawelsikora/mkdocs-export-mermaid-to-svg#1

Open

orzih added the documentation Improvements or additions to documentation label Feb 15, 2021

orzih mentioned this issue Feb 15, 2021

Overlapped text in rendered PDF #52

Open

domWalters mentioned this issue Jan 27, 2024

Pre Release v0.9.4 domWalters/mkdocs-to-pdf#1

Merged

offtherailz mentioned this issue Nov 6, 2024

Improve the documentation to report the refresh token workflow part geosolutions-it/MapStore2#10655

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mermaid diagrams are not rendered in the output PDF #34

Mermaid diagrams are not rendered in the output PDF #34

pawelsikora commented Nov 1, 2020

orzih commented Nov 2, 2020

pawelsikora commented Nov 3, 2020

ghost commented Nov 25, 2020

pawelsikora commented Nov 25, 2020 •

edited

Loading

ghost commented Jan 13, 2021 •

edited by ghost

Loading

ScrambledRK commented Mar 26, 2021

pawelsikora commented Mar 26, 2021 •

edited

Loading

ScrambledRK commented Apr 16, 2021 •

edited

Loading

pawelsikora commented Apr 16, 2021

jjocram commented Apr 24, 2021

KatekovAnton commented Nov 29, 2021

StefanSchroeder commented May 9, 2022

NickCrews commented May 3, 2023

m5c commented Aug 9, 2024

ticapix commented Aug 9, 2024 via email

m5c commented Aug 12, 2024

m5c commented Aug 12, 2024

ticapix commented Aug 12, 2024 via email

Mermaid diagrams are not rendered in the output PDF #34

Mermaid diagrams are not rendered in the output PDF #34

Comments

pawelsikora commented Nov 1, 2020

orzih commented Nov 2, 2020

pawelsikora commented Nov 3, 2020

ghost commented Nov 25, 2020

pawelsikora commented Nov 25, 2020 • edited Loading

ghost commented Jan 13, 2021 • edited by ghost Loading

ScrambledRK commented Mar 26, 2021

pawelsikora commented Mar 26, 2021 • edited Loading

ScrambledRK commented Apr 16, 2021 • edited Loading

pawelsikora commented Apr 16, 2021

jjocram commented Apr 24, 2021

KatekovAnton commented Nov 29, 2021

StefanSchroeder commented May 9, 2022

NickCrews commented May 3, 2023

m5c commented Aug 9, 2024

ticapix commented Aug 9, 2024 via email

m5c commented Aug 12, 2024

m5c commented Aug 12, 2024

ticapix commented Aug 12, 2024 via email

pawelsikora commented Nov 25, 2020 •

edited

Loading

ghost commented Jan 13, 2021 •

edited by ghost

Loading

pawelsikora commented Mar 26, 2021 •

edited

Loading

ScrambledRK commented Apr 16, 2021 •

edited

Loading