Repository navigation
In graphviz, including images via node attributes or html labels does not work #7368
Description
Bug description
Graphviz supports using an image (for instance a .png image file) as a node background ( image attribute) or in HTML labels. In both cases, the SVG rendered by the dot engine in Quarto removes the image.
Steps to reproduce
Please see https://github.com/tverbeiren/quarto-graphviz/tree/quarto-issue for an example Quarto document. The comp.png file is added both as a node attribute and inside the HTML IMG. Both the quarto versions and the dot CLI versions are available in the graphviz.qmd and resulting graphviz.html files.
Expected behavior
The expected behavior is the one generated by the dot CLI tool. Please see repo branch for more information.
Actual behavior
The images are stripped from the generated SVGs by Quarto. Please refer to the repository for more information.
Your environment
MacOS Ventura 13.4
Quarto check output
Quarto 1.4.449
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.8: OK
Dart Sass version 1.55.0: OK
Deno version 1.33.4: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.4.449
Path: /Applications/quarto/bin
[✓] Checking tools....................OK
TinyTeX: v2023.03.21
Chromium: 869685
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/toni/Library/TinyTeX/bin/universal-darwin
Version: 2023
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.11.5
Path: /opt/homebrew/opt/python@3.11/bin/python3.11
Jupyter: 5.2.0
Kernels: python3
(|) Checking Jupyter engine render....0.00s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
(-) Checking Jupyter engine render....0.00s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.3.1
Path: /opt/homebrew/Cellar/r/4.3.1/lib/R
LibPaths:
- /Users/toni/Library/R/arm64/4.3/library
- /opt/homebrew/lib/R/4.3/site-library
- /opt/homebrew/Cellar/r/4.3.1/lib/R/library
knitr: 1.43
rmarkdown: 2.23
[✓] Checking Knitr engine render......OK
Activity
cscheid commentedon Oct 26, 2023
Yes, that's a known limitation of the graphviz library we use (which is a webassembly compilation), and unfortunately there's nothing we can do about that.
tverbeiren commentedon Oct 27, 2023
I see.
I think this is related: hpcc-systems/hpcc-js-wasm#145
cscheid commentedon Oct 27, 2023
That's exactly right, but we'll leave this open in case someone else writes a
graphvizport that does the right thing. It's "merely" very hard as opposed to impossible.GuentherE commentedon Jul 18, 2024
There is an easy workaround in case you have a local installation of graphviz on your computer.
Instead of letting quarto render the diagram you can delegate this to the command line in a code chunk and include the resulting svg in your document. You have to use the
-Tsvg:cairo:cairorenderer of graphviz as-Tsvgdefaults to thesvg:svg:corerenderer which produces weird svg files not compatible with most image readers and quarto. Of course you can replace dot by neato, osage ...I'm on a linux system. If you are using Windows or a Mac your command line will have to be modified.
I don't know how quarto uses its internal graphviz library, but maybe the
-Tsvg:cairo:cairois also possible as an interim solution?HTH Guenther