mermaid blocks not showing up in PDF

[RayOffiah]

Observed vs. expected behavior

When I create a diagram using Mermaid, it renders perfectly in the preview window. I press the button get a PDF and would expect to see the same diagram show up in the PDF.

The rest of the document is there, but all I see in the mermaid block is:

https://kroki.io/mermaid/svg/eNpLL0osyFDwCeJSUEjKyU_ONtTVtQMzjGAMYwDFSQsC

What's really odd is that if I go to that URL in a web browser, I can see the diagram, so it is definitely being generated correctly.

It also works if you press the HTML button, rather than PDF.

Steps to reproduce

Create an AsciiDoc document Add the following block

[mermaid]
....
graph LR
  block1-->block2-->block3
....

Press the PDF button

Environment

Plugin Version: ____ 0.32.33

IntelliJ Details: ____ WebStorm 2021.1 RC Build #WS-211.6693.64, built on March 31, 2021. Runtime version: 11.0.10+9-b1341.35 x86_64 VM: Dynamic Code Evolution 64-Bit Server VM by JetBrains s.r.o. macOS 11.2.3 GC: G1 Young Generation, G1 Old Generation Memory: 2048M Cores: 8 Non-Bundled Plugins: com.fxiaoke.lizc8407 (2.0.0), com.jetbrains.plugins.code-notes-plugin (1.3), de.cmm.side_nodes (1.2), org.toml.lang (0.2.144.3766-211), tv.twelvetone.intellij.plugins.intellivue (1.1.0), com.intellij.lang.jsgraphql (2.9.1), org.asciidoctor.intellij.asciidoc (0.32.33), org.rust.lang (0.3.144.3766-211), com.github.shiraji.yaemoji (1.0.7)

[ahus1]

Thanks for reaching out. I assume that you've enabled Kroki in the plugin's settings.

I tried this and found that there is a warning in the IDE's event log: "allow-uri-read is not enabled"

You'll need to set this in the plugin's settings. As it is a security relevant parameter it is not sufficient to set this in the document.

Once you set this option, Asciidoctor is allowed to fetch all remote resources as needed during rendering.

Unfortunately there is a follow-on error message: "Invalid attributes on tag rect; skipping tag", and the diagram is rendered without the text, only boxes and lines.

Looking into the source of the SVG, Mermaid uses "foreignObject" to embed HTML for text inside the SVG. Asciidoctor PDF doesn't support this as the library prawn-svg doesn't support it, see https://github.com/mogest/prawn-svg. As mermaid doesn't support PNG as a secondary format, using PNG is not an option here.

There is an experimental option to render the preview as a PDF (web-pdf), see #592. As it is experimental lots of features are missing like page numbers or table-of-contents. This feature is currently hidden behind a feature flag "internal mode". See below for an example.

diagram.pdf

Another option is to open the document in a browser and print it as PDF from there. This would allow for header/footer and page numbers.

Please me know if one of these options works in your scenario. Unfortunately there is no simple way to embed Mermaid diagrams inside PDFs for now.

[RayOffiah]

I tried using ascii-diagram and ran into all kinds of problems with the path, which looks to be related to how MacOS handles the environment when running GUI apps.

However, I think I have enough options here to get past the problem. The web pdf works pretty well.

[ahus1]

Happy to hear that web-pdf works in your scenario.

If you like the browser rendered output, want more features and don't mind a command line interface, have a look at Asciidoctor Web PDF.

The contents of this issue are now part of the plugin's FAQ.