Render TikZ diagrams in Quarto

[danmackinlay]

Description

This is part show-and-tell and part Q&A I guess ;-)

Announcing TikZ for quarto.

TikZ is an time-honored (i.e. old) graphics language without the hype of D2 or mermaid
However, after drawing a lot of diagrams where I needed to have specific control of the layout but where I didn't want to spend my entire time calculating the layout manually, I've decided it is the best diagram tool in the category of diagram tools that automate the right amount of stuff.

The only problem is: it is part of the TeX ecosystem and doesn't support SVG or HTML. Hence the new filter.
kitr already solved that though, and data-intuitive/quarto-d2/ showed us how to use filters to put new graphics formats in quarto.
After spending 2 days of my life getting this working, I found that there is even a worked example of a tikz filter in pandoc itself.

Anyway, this thing works now and I'm using it.

There are still outstanding problems, though; I'll open a Q&A thread about those.

[danmackinlay]

The outstanding problem is essentially that while this filter renders an image successfully, it doesn't manage to turn it into a figure, or give it an id, so it cannot be cross-referenced. see this discussion

[cscheid]

The outstanding problem is essentially that while this filter renders an image successfully, it doesn't manage to turn it into a figure, or give it an id, so it cannot be cross-referenced. #8926

That kind of thing is why we came up with the div syntax for cross-references and the new, more permissive structure of Quarto 1.4 crossref's system. What happens if you try the following?

::: {#fig-tikz}

```{.tikz ...}
...
```

This is a caption
:::

See @fig-tikz.

[mcanouil]

Were you aware of https://github.com/pandoc-ext/diagram?

[danmackinlay]

No! 🤦🏻

[danmackinlay]

Here is a pull request to list it with the other extensions: quarto-dev/quarto-web#1035

[danmackinlay]

Hmm, https://github.com/pandoc-ext/diagram is generally more powerful and capable that my paltry code except it seems to run into the problem that it emits Figure elements, which if I understand correctly will make it hard to crossref. I'll do some experiments.

[cscheid]

Hmm, https://github.com/pandoc-ext/diagram is generally more powerful and capable that my paltry code except it seems to run into the problem that it emits Figure elements, which if I understand correctly will #8926 (reply in thread). I'll do some experiments.

You have it right. The same div syntax should work in this case, but our output might be a bit funky with nested <figure> elements.

[stevengogogo]

This works for me: https://stackoverflow.com/questions/71760913/using-tikz-in-quarto-presentation

[allefeld]

Not exactly the same, but my pyTikZ project provides a Python interface to create TikZ graphics. It is a bit older, from before I started using Quarto, so it is mainly tested in Jupyter notebooks, but in should work in Quarto, too.