Diagrams not generating text in pdf

[rserranon]

I'm generating a pdf with diagrams using asciidoctor-pdf -r asciidoctor-diagram index.adoc but diagrams are generated without text.

Here is my Gem list:

asciidoctor (2.0.18)
asciidoctor-diagram (2.2.3)
asciidoctor-diagram-ditaamini (1.0.3)
asciidoctor-diagram-plantuml (1.2022.5)
asciidoctor-pdf (2.3.4)

If I generate the HTML with asciidoctor -r asciidoctor-diagram index.adoc all diagrams are generated correctly.

[pepijnve]

Could you provide your input document (or an equivalent example) as well?

I'm not sure what could cause this right away. The generated diagrams should be identical regardless of the asciidoctor backend that's being used.

[rserranon]

Thanks, I'm working with this repository: https://github.com/chaincodelabs/onboarding-to-bitcoin-core, the particular file that have the first diagram is https://github.com/chaincodelabs/onboarding-to-bitcoin-core/blob/master/02_architecture.adoc

There is a mermaid-config.json file in the repository with the following content:

{
    "themeCSS": ".label foreignObject { font-size: 85%; overflow: visible; }"
}

this is the settings.adoc

// Position toc on left and only display 4 deep
:toc:
:toclevels: 3
:toc: left
// Use pygments.rb for source highlighting, emacs style
:source-language: cpp
:source-highlighter: pygments
:pygments-style: emacs
// Use fancy icons for admonition boxes
:icons: font
// Add section links to HTML
:sectlinks:
// Set default imagesdir
:imagesdir: images
:docinfo: shared
// mermaid.js config
:mermaid-config: ./mermaid-config.json

[pepijnve]

I tried generating the PDF locally and I'm seeing the same result. The generated SVG images look fine though. That leads me to believe that there isn't really anything going wrong in the diagram extension itself, but that something is getting lost when the SVG images get embedded in the PDF. That part of the document generation flow is handled by the https://github.com/asciidoctor/asciidoctor-pdf project. I'm not too familiar with that myself. Might be best to open an issue there referring to this one.

[pepijnve]

If I understand it correctly, SVG files are converted to native PDF drawing instructions by https://github.com/mogest/prawn-svg. My hunch is that somethings going wrong in the font handling there.

[rserranon]

Here is the open issue in asciidoctor-pdf repository asciidoctor/asciidoctor-pdf#2384

[mojavelinux]

It's not font handling. It's the fact that prawn-svg doesn't support foreignObject (which essentially just embedded HTML).

[pepijnve]

@mojavelinux thanks for taking a look! Thanks to your foreignObject pointer (I hadn't looked at the generated SVG in that much detail yet) I found mermaid-js/mermaid#2688. Seems like there's a mermaid option to disable HTML based labels. @rserranon perhaps that can be a workaround for you? Haven't tried it out myself yet.

[ghost]

Relates to:

• Mermaid 8.0.0-rc.8 creates SVG files that do not display correctly in Inkscape and Latex mermaid-js/mermaid-cli#103
• SVG export does not work properly when the exported SVG is used outside Firefox mermaid-js/mermaid#2102
• Render diagrams using non-browser-based rendering libraries mermaid-js/mermaid#2485
• SVG conformance ? mermaid-js/mermaid#1845
• Flowchart rendered differently depending on whether "htmlLabels" is enabled or not mermaid-js/mermaid#1572
• Move htmlLabells configuration out of flowchart to root mermaid-js/mermaid#1431
• htmlLabels suport And CSS single Control mermaid-js/mermaid#1395
• Label texts in flowcharts are not centered horizontally with "htmlLabels" disabled mermaid-js/mermaid#1177
• Replace foreignObject with standard SVG mermaid-js/mermaid#2688

[ghost]

Seems like there's a mermaid option to disable HTML based labels.

If you can see a way to disable HTML labels for other diagrams besides flow charts, do let us know! As far as I can tell, that option only applies to the one specific chart type.

[pepijnve]

I'm going to close this issue for now. The root cause of the problem is the fact that mermaid produces SVG with embedded HTML content. Fixing or improving that is out of scope for this project.