I am having two problems with diagram converting a tikz figure within a quarto document:

1. The font of the html output is too small (but is of normal size in pdf output)
2. The reference does not work for both html and pdf output (it is expected for \ref, but not for @fig-...)

Here is a MWE:

---
title: "A tikz diagram extension test"
filters:
  - diagram
---

## Test section

Hello, please see \ref{fig-delta} and @fig-delta

```tikz
%%| label: fig-delta
%%| caption: A test
\begin{tikzpicture}
    \node (a) at (0, 0) {a};
    \node (b) at (2, 0) {b};
    \draw (a) -- (b);
\end{tikzpicture}
```

And here is the output (I am using firefox)

Note: I also posted an issue on GitHub

I am having two problems with diagram converting a tikz figure within a quarto document:

1. The font of the html output is too small (but is of normal size in pdf output)
2. The reference does not work for both html and pdf output (it is expected for \ref, but not for @fig-...)

Here is a MWE:

---
title: "A tikz diagram extension test"
filters:
  - diagram
---

## Test section

Hello, please see \ref{fig-delta} and @fig-delta

```tikz
%%| label: fig-delta
%%| caption: A test
\begin{tikzpicture}
    \node (a) at (0, 0) {a};
    \node (b) at (2, 0) {b};
    \draw (a) -- (b);
\end{tikzpicture}
```

And here is the output (I am using firefox)

Note: I also posted an issue on GitHub

• quarto
• tikz

1 Answer 1

I've experienced similar problems with tikz figures. Here are my workarounds:

1. Diagram size in HTML output.

I found no way to alter the svg scaling in the conversion. What worked however, was to increase zoom for img elements in style.css:

.img-fluid {
  zoom: 150%;
}

This assumes that the style file is included in front matter or _quarto.yaml:

format:
  html:
    css: style/style.css

(If you have different kinds of figure images, a more precise CSS selector might be needed.)

2. Figure references

I've made the experience that life in Quarto is a lot easier if one uses div syntax for everything, including the tikz figures.

In your example, this would read:

Please see @fig-delta.

:::{#fig-delta}
```tikz
\begin{tikzpicture}
    \node (a) at (0, 0) {a};
    \node (b) at (2, 0) {b};
    \draw (a) -- (b);
\end{tikzpicture}
```

A test
:::

To see it in action, here's what a similar snippet generates in my thesis document. (Feel free to copy other workarounds from the linked repo!)