How to change the image quality while rendering mermaid diagram in docx format

[selvavm]

Description

Thanks for contribution and support.

I have a complex diagram which looks blurry in docx while the same is clear (when zoomed in) in HTML. How can get high resolution png from mermaid diagram?

I tried %%| fig-width: 6.5 but it crashes with exception in mermaid

[cscheid]

try %%| deviceScaleFactor: 2 to render at twice the usual resolution, etc. Do note that your image files will become large fairly quickly.

[selvavm]

Thanks cscheid. I am also seeing my image is cropped (in pdf as well). I think I am facing the issue mentioned in #2438.

Is it possible to adjust width and height of puppeteer viewport?

I tried fig-width and fig-height but the image still looks same.

[selvavm]

Hi @cscheid.

Since I was facing issue with cropping, I tried Graphviz and it worked like a charm in docx. However, in pdf, I was getting dimension too large because my graph is big. Anyway, I wrote the below code to convert the graph into png and then refer in Markdown which worked

from graphviz import Source
dot = Source(dotter)
_ = dot.render(r"res\tree-full", format='png')
Markdown(r"![Tree diagram](res\tree-full){#fig-tree-full}")

For this to work I need dot.exe and was wondering if there is any in quarto. I tried quarto run dot which failed.

[cscheid]

We don't package dot or any of the graphviz binaries. You need to install them yourself if you want to use them.

[mcanouil]

FYI:

• https://github.com/pandoc/lua-filters/tree/master/diagram-generator

This Lua filter is used to create images with or without captions from code blocks. Currently PlantUML, Graphviz, TikZ and Python can be processed. This document also serves as a test document, which is why the subsequent test diagrams are integrated in every supported language.

[selvavm]

Thanks @cscheid and @mcanouil for response.

Sorry for my lack of understanding on quarto architecture. Does this mean, by default, quarto calls pandoc which in turn runs this filter to convert graphviz to png format?

If yes, I am wondering why the png image generated by quarto is so big (approx. 20000 x 3000) but the image generated by dot.exe dotter.dot -Tpng is nominal size although the lua code looks similar.

[mcanouil]

What I shared is a Lua filter which extends Pandoc/Quarto features, especially to turns diagrams into images, see https://quarto.org/docs/extensions/filters.html.

Regarding the size of your file between your dot.exe command and Quarto, or more accurately Puppeteer which convert SVG/HTML to PNG based on the view port dimensions.
I don't know exactly what are the default settings for it in Quarto though, but it might depends on the computer.