In graphviz, including images via node attributes or html labels does not work

[tverbeiren]

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

[cscheid]

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]

I see.

I think this is related: hpcc-systems/hpcc-js-wasm#145

[cscheid]

That's exactly right, but we'll leave this open in case someone else writes a graphviz port that does the right thing. It's "merely" very hard as opposed to impossible.

[GuentherE]

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:cairo renderer of graphviz as -Tsvg defaults to the svg:svg:core renderer 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.

``` {python}
!dot -Tsvg:cairo:cairo  [PathToFile]/graphviz-diagram.gv > [PathToFile]/rendered-svg-image.svg 
``` 

![My Graphviz Diagram with embedded images]([PathToFile]/rendered-svg-image.svg)

I don't know how quarto uses its internal graphviz library, but maybe the -Tsvg:cairo:cairo is also possible as an interim solution?

HTH Guenther