Graphviz figures are not treated as figures

[davidpomerenke]

Bug description

Graphviz diagrams do not behave like other types of figures, their labels do not work, captions work only partially, and positioning in the margin only works in HTML, not in PDF.

Steps to reproduce

---
title: Example
format:
  pdf:
    papersize: a4
    fontsize: 9pt
    geometry:
     - showframe
  html:
    fontsize: 9pt
---

Hello world!

```{python}
# | label: fig-test
# | fig-cap: Beautiful blue bars.
# | column: margin
# | echo: false

import matplotlib.pyplot as plt

categories = ["A", "B", "C", "D"]
values = [10, 20, 15, 25]
plt.figure(figsize=(6, 3))
plt.barh(categories, values)
plt.show()
```

```{dot}
// | fig-label: causal-graph-1
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: margin

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

```{dot}
// | fig-label: causal-graph-2
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: page

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

```{dot}
// | fig-label: causal-graph-3
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: body

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

Have a look at @causal-graph-3 and at @fig-test!

Expected behavior

Diagrams can be treated as figures the same way that images and plot output are. source

Actual behavior

Unfortunately, there are multiple problems with Graphviz diagrams:

• They do not respect the column: margin attribute for PDF, but they do for HTML.
• They are not citable for both HTML and PDF.
• The "Figure: ..." prefix is not added to the figure for both HTML and PDF.

HTML:

PDF:

Your environment

• IDE: latest VSCode, but this is with quarto-cli
• OS: MacOS 13.4

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.361
      Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.10
      Path: /Users/david/Repositories/protest-impact/.venv/bin/python
      Jupyter: 5.3.0
      Kernels: ir, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.2.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
      knitr: 1.39
      rmarkdown: 2.14

[✓] Checking Knitr engine render......OK

[cscheid]

Thanks for the report. We're aware, and I'm working on it right now, on #4944.

[cscheid]

I will note that you seem to have a bug on your dot diagram metadata:

```{dot}
// | fig-label: causal-graph-1
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: margin

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

You have fig-label: causal-graph, and you need label: fig-causal-graph.

Specifically, figure labels in quarto need to always start with fig-. We document this fairly clearly:

Note that cross reference identifiers must start with their type (e.g. fig- or tbl-).

See https://quarto.org/docs/authoring/cross-references.html

[davidpomerenke]

Thanks for pointing out!

It does not fix the bugs, unfortunately:

---
title: Example
format:
  pdf:
    papersize: a4
    fontsize: 9pt
    geometry:
     - showframe
  html:
    fontsize: 9pt
---

Hello world!

```{python}
# | label: fig-test
# | fig-cap: Beautiful blue bars.
# | column: margin
# | echo: false

import matplotlib.pyplot as plt

categories = ["A", "B", "C", "D"]
values = [10, 20, 15, 25]
plt.figure(figsize=(6, 3))
plt.barh(categories, values)
plt.show()
```

```{dot}
// | fig-label: fig-causal-graph-1
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: margin

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

```{dot}
// | fig-label: fig-causal-graph-2
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: page

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

```{dot}
// | fig-label: fig-causal-graph-3
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: body

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

Have a look at @fig-causal-graph-3 and at @fig-test!

[cscheid]

label, not fig-label. You still have // | fig-label: fig-causal-graph-1

[cscheid]

(Tagging this as lint so our future linter can point users to fig-label being a bad entry)

[cscheid]

To be clear, this label vs fig-label won't solve the problem, which is why I still have the bug open. But your figures always do need to be label: fig-... anyway.

[davidpomerenke]

🙈🙈🙈 Thank you! 👍

It's already much better now! :) (But not completely.)

---
title: Example
format:
  pdf:
    papersize: a4
    fontsize: 9pt
    geometry:
     - showframe
  html:
    fontsize: 9pt
---

Hello world!

```{python}
# | label: fig-test
# | fig-cap: Beautiful blue bars.
# | column: margin
# | echo: false

import matplotlib.pyplot as plt

categories = ["A", "B", "C", "D"]
values = [10, 20, 15, 25]
plt.figure(figsize=(6, 3))
plt.barh(categories, values)
plt.show()
```

```{dot}
// | label: fig-causal-graph-1
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: margin

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

```{dot}
// | label: fig-causal-graph-2
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: page

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

```{dot}
// | label: fig-causal-graph-3
// | fig-cap: Causal graph for observational analysis.
// | fig-width: 100px
// | fig-height: 100px
// | column: body

digraph D {
  {W,X} -> {Y} [color=blue]
}
```

Have a look at @fig-causal-graph-3 and at @fig-test!

[cscheid]

Yeah, that's what I see here as well. This bug is actually quite hard to fix correctly, but I'm literally in the middle of fixing the foundational problems. It will be several weeks until it's done: keep an eye on #4944 for progress.

[cscheid]

This bug is now fixed:

I'm going to go ahead and close it. Unfortunately, we have a separate problem with wide layouts on main so hold on tight for just a bit more and keep an eye on #6961! We appreciate the patience.

[davidpomerenke]

Very nice! 😊

[SHogenboom]

@cscheid ; was the crossreferencing issue also resolved or merely the styling? I do not seem to be able to get it working…

My cross-reference in text: zie @fig-mediatie

The code:

#| label: fig-mediatie
#| echo: FALSE
#| fig.cap: "Conceptueel mediatie model"
#| 
# Ensure 'graphiz' is installed: https://graphviz.org/download/

digraph {
  
  a [shape = box, label = "  X  "]
  c [shape = box, label = "  Y  "]
  b [shape = box, label = "  M  "]

  
  a -> b[label = " a "]
  a -> c[minlen = 5, label = " c' "]
  b -> c[label = " b "]

  
  {rank=same; a; c};
 
 
}

The dot-graph is visible, but the cross-reference does not work.

[cscheid]

@SHogenboom You need to be careful with syntax: you're using fig.cap instead of fig-cap, and using #| instead of //|.

[SHogenboom]

@cscheid ; thanks for point the fig-cap error out. It does nothing for solving the cross-reference issue however…
Not sure what you mean by the second comment - as I’m using the #| for the chunk options and a normal # for a regular comment...

[cscheid]

You're supposed to use //| for the chunk options; this is a dot code block after all, right?

To be clear, your code chunk options look like knitr options for a code block in R. Instead, you have to use the comment syntax of whatever language you're using. In dot, that's //; in mermaid, that's %%, etc.

[SHogenboom]

@cscheid ; Thanks! That works. Hadn’t for a second considered there would be different chunk styling options. Apologies!