Include Tikz figures
The best way to include TikZ figures is to compile them with LaTeX, and import the resulting file in a presentation.
We need to use the standalone class as we are only interested in the TikZ figure, not a full page. See this resource for details. A minimal .tex file containing a standalone TikZ figure looks like:
\documentclass[tikz]{standalone}
% \usetikzlibrary{...} % tikz package already loaded by 'tikz' option
\begin{document}
\begin{tikzpicture}
% Your TikZ code here
\end{tikzpicture}
\end{document}
If the image is static and we don’t need to execute actions on some of its
elements, then the easiest is to compile the file in .pdf format.
$ pdflatex file.tex
Integrating it in your slipshow presentation is then just a matter of including the pdf, which syntax is:
Reveal a TikZ figure bit by bit
If you want to have specific part of your figure to be the target of actions (for instance, to reveal part of it, bit by bits), you’ll need two things:
First, you’ll need to be able to assign ids to parts of your image
Then, you’ll need to compile in a format under which Slipshow is able to access the identifiers. We will use the svg format.
In order to assign ids, one can define the following environment at the beginning of the file:
\newenvironment{svggroup}[1]
{\special{dvisvgm:raw <g id="#1">}}
{\special{dvisvgm:raw </g>}}
Then, consider the following simple picture of a triangle:
\begin{tikzpicture}
\node[dot] (A) at (0,1) {};
\node[dot] (B) at (1,0) {};
\node[dot] (C) at (2,1) {};
\draw (A) -- (B);
\draw (B) -- (C);
\draw (C) -- (A);
\end{tikzpicture}
And suppose you want the node C to appear at a later step. Enclose the node and the edges in groups with an id. Here is the final complete file:
\documentclass[tikz]{standalone}
\newenvironment{svggroup}[1]
{\special{dvisvgm:raw <g id="#1">}}
{\special{dvisvgm:raw </g>}}
\begin{document}
\begin{tikzpicture}[dot/.style={circle, fill=black, inner sep=2pt}]
\node[dot] (A) at (0,1) {};
\node[dot] (B) at (1,0) {};
\begin{svggroup}{c}
\node[dot] (C) at (2,1) {};
\end{svggroup}
\draw (A) -- (B);
\begin{svggroup}{c-edges}
\draw (B) -- (C);
\draw (C) -- (A);
\end{svggroup}
\end{tikzpicture}
\end{document}
Then, we need to compile the file with svg output. Here we use latex and
dvisvgm. The --no-fonts improve the precision of text layouts, and
--exact-bbox improves the precision of the bounding box.
$ latex triangle.tex
$ divsvgm --no-fonts --exact-bbox triangle.dvi
We now just need to include the svg file in a slipshow input, and write the dynamics with actions:
---
toplevel-attributes: slip enter=~duration:0 unreveal="c c-edges"
external-ids: c c-edges
---
{style="width:75%"}
{reveal=c}
{reveal=c-edges}
The external-ids field of the frontmatter tells the compiler not to warn you
that it cannot find the given ids. Here is the final result!
TikZ and auto-refresh
On serve mode, slipshow will automatically refresh when the svg file (eg triangle.svg) has changed. However, it will not handle the recompilation of the .tex file.
One way to fix this is to use a file watcher general tool, to recompile the .tex file on change. For instance, with the entr command line tool:
$ echo "triangle.tex"| entr sh -c "latex triangle.tex && dvisvgm -n -e triangle.dvi"