Every figure on this page is written directly into the wiki source. Nothing is uploaded, nothing is pre-rendered, and there are no image files anywhere: the texrender plugin hands each piece of LaTeX to latex, converts the DVI with dvisvgm, and embeds the result as inline SVG. Design notes and the security reasoning are in texrender Plugin Plan.
There are two syntaxes for it. A \documentclass{standalone} ... \end{document} block is a figure and gets a line of its own; the point of that one is that a standalone document is already a complete figure, so LaTeX found anywhere — a paper, a StackExchange answer, a package manual — can be pasted in unchanged and simply appear, with nothing wrapped around it and no preamble injected. \tikz ... ; is the small counterpart that stays in the run of text, and comes first below.
A picture that belongs in a sentence should not be given a line of its own, so TikZ's own shorthand for a small one renders inline: \tikz ... ; for a single path, \tikz{ ... } when there is more than one. It is the same pipeline as the figures further down, only the packaging differs — an arrow reads as an arrow, a swatch names a colour without spelling it, and beats writing “yes” in a table cell.
An arrow \tikz \draw[->] (0,0) -- (1em,0); reads as an arrow.
The semicolon that ends a TikZ path ends the snippet, and it is found properly rather than by scanning: a semicolon inside a node label is part of the label, so is one picture and not half of one. When a snippet needs more than one path, brace it — is two paths, and the matching brace ends it.
\tikz{\draw[gray!60] (0,0) rectangle (4em,0.9ex); \fill[green!55!black] (0,0) rectangle (2.6em,0.9ex);}
Nothing is added to the snippet, so \tikzset and \tikzstyle are left alone and a \tikz with no terminator is left as text rather than swallowing the paragraph.
A snippet rests on the text baseline, the way an image in a line of text does: here, here.
TikZ's baseline option has no effect, so and look exactly like the first circle above. The reason is that the SVG is cropped to the ink, and baseline moves the picture relative to a reference point the crop then discards — two snippets differing only in baseline come out the same size, pixel for pixel.
An earlier version did honour it, by reading the depth back out of the SVG and writing it as vertical-align. It was exact and it looked wrong: exact means exact against a 10pt Computer Modern document, and the offset then landed in this page's 10pt sans-serif text with the figure already scaled 1.2×. Small marks moved a point or two, which nobody could see; a boxed node picked up 31pt of depth and was dragged three lines below its own paragraph. The design notes have the numbers.
So position a snippet from inside the picture — coordinates, yshift, a \raisebox around whatever the node contains — rather than with baseline.
The unglamorous use, and the one worth having. A legend that draws its own key: measured, predicted. A yes and a no . A bullet in whatever colour the point calls for, or a shape when the colour is already taken.
| Status | Key | Meaning |
|---|---|---|
| renders | ||
| fails and says why | ||
| renders, but empty |
Tables and list items take them as readily as paragraphs do:
That last one is why the inline syntax is wired into DokuWiki as a substitution rather than a protected block: emphasis is the one place a small figure most obviously belongs, and a figure that stopped working the moment it was emphasised would not be much of an inline figure.
The ceiling is higher than a mark. Two nodes and an arrow, , needs no more ceremony than that. A bend, . An angle mark, . A sparkline, , or a whole little plot with its axes, .
A progress bar reads better than “65%”. A resistor can be drawn by hand when loading CircuiTikZ for one symbol would be silly. A die is three lines. \foreach and calc both work, so is fine too.
A snippet is not a document, so one is built around it — the smallest that will render it:
\documentclass[preview]{standalone} \usepackage{tikz} \usetikzlibrary{arrows.meta,calc,positioning,shapes.geometric} \begin{document} ... the snippet ... \end{document}
The library line is the inlinepreamble setting and is the only part that can be changed; the four in it cost about 20 ms a render between them. A snippet cannot load anything else, which is the deliberate limit of the form: CircuiTikZ, chemfig, forest and pgfplots figures are written as \documentclass blocks, and every one of them further down this page is.
standalone's preview mode rather than its usual crop mode: crop mode reshapes the page around the content, preview mode leaves the snippet alone on the reference point, which is what material set inline wants. The two render the same to within a rounding step here, since the SVG is cropped to the ink either way.
Fenced blocks, <code> tags and indented blocks are all inert, which is how every source listing on this page is written. In running text, %% wraps a literal: \tikz \draw[->] (0,0) -- (1em,0); stays as it is.
Note that DokuWiki's ''…'' is not a way to escape it, because that is a formatting mode and formatting is exactly where inline figures are meant to work. Use %%.
An inline failure has to stay inside the sentence — a block of log where a word should be would break the paragraph around it — so it collapses to the one line that says what went wrong, with the rest of the log on the element's title for hovering: \tikz error: Undefined control sequence. is what an undefined control sequence looks like.
The \documentclass figures further down get the full treatment instead, since they have a line of their own to put it on.
Everything below is a \documentclass{standalone} block. Source is shown for the first example of each package. The rest are just as visible: use the page's edit view to read the source of any figure here.
\documentclass[border=5pt]{standalone} \usepackage{tikz} \begin{document} \begin{tikzpicture} \draw[thick] (0,0) rectangle (2,1.4); \draw[thick,fill=blue!15] (3,0.7) circle (0.7); \draw[thick,fill=orange!30] (4.6,0) -- (6,0) -- (5.3,1.4) -- cycle; \draw[thick,rounded corners=4pt] (6.8,0) rectangle (8.8,1.4); \end{tikzpicture} \end{document}
Positioning, node labels on paths, and bent connections.
\documentclass[border=5pt]{standalone} \usepackage{tikz} \usetikzlibrary{arrows.meta,positioning} \begin{document} \begin{tikzpicture}[node distance=18mm,>={Stealth[round]}] \node[draw,circle] (a) {$a$}; \node[draw,circle,right=of a] (b) {$b$}; \node[draw,circle,right=of b] (c) {$c$}; \draw[->,thick] (a) -- node[above]{$f$} (b); \draw[->,thick] (b) -- node[above]{$g$} (c); \draw[->,thick,bend right=40] (a) to node[below]{$g\circ f$} (c); \end{tikzpicture} \end{document}
\foreach with polar coordinates and an arithmetic expression driving the colour.
Snake, coil and zigzag path decorations, plus two fill patterns.
Overlapping fills at 55% opacity. Opacity is an SVG attribute, so it survives the trip; the shadings that look similar do not, for reasons in the last section.
TikZ's xyz coordinates, drawn as ordinary two-dimensional paths.
The plugin's own pipeline, drawn with shapes.geometric.
The automata library: initial and accepting states, loops, bent edges.
tikz-cd, for the category theorists.
Three plots on one axis with a legend, sampled at 120 points each.
\documentclass[border=5pt]{standalone} \usepackage{pgfplots} \pgfplotsset{compat=1.18} \begin{document} \begin{tikzpicture} \begin{axis}[ width=9cm, height=6.5cm, grid=major, legend pos=north west, xlabel=$x$, ylabel=$y$, axis lines=middle, enlargelimits] \addplot[blue,thick,domain=-3:3,samples=120]{x^2}; \addlegendentry{$x^2$} \addplot[red,thick,domain=-3:3,samples=120]{3*sin(deg(x))}; \addlegendentry{$3\sin x$} \addplot[teal,thick,dashed,domain=-3:3,samples=120]{exp(x)/4}; \addlegendentry{$e^x/4$} \end{axis} \end{tikzpicture} \end{document}
Symbolic x coordinates with values printed above the bars. The numbers are this plugin's own measured render times in milliseconds — cold, warm from cache, a failed render, and a figure killed by the timeout.
A shaded region under a curve, using \closedcycle rather than a shading.
A 3D surface at 22 samples per axis with the viridis colormap. This is the heaviest figure on the page: about 2.4 seconds to render and 140 KB of SVG, both well inside the plugin's limits, and free on every view afterwards.
\documentclass[border=5pt]{standalone} \usepackage{circuitikz} \begin{document} \begin{circuitikz}[american,scale=1.1,transform shape] \draw (0,0) to[V=$V_s$] (0,3) to[R=$R_1$] (3,3) to[L=$L_1$] (6,3) to[C=$C_1$] (6,0) to[short] (0,0); \draw (3,3) to[R=$R_2$] (3,0); \node[ground] at (0,0) {}; \end{circuitikz} \end{document}
quantikz is a TikZ library, so it arrives through the same door everything else does: \usetikzlibrary{quantikz2} and a quantikz environment. It brings its own \ket and \bra, which is why none of these load braket.
Two gates and two meters, which is the whole of entanglement preparation.
\documentclass[border=3pt]{standalone} \usepackage{tikz} \usetikzlibrary{quantikz2} \begin{document} \begin{quantikz} \lstick{$\ket{0}$} & \gate{H} & \ctrl{1} & \meter{} \\ \lstick{$\ket{0}$} & & \targ{} & \meter{} \end{quantikz} \end{document}
\setwiretype{c} turns a wire classical after its measurement and \vcw runs the classical control down to the gate it conditions, so the double lines are real double lines rather than a drawing of some.
Three qubits, controlled phase rotations and the swap that reverses the output order. \swap and \targX are the two ends of one gate.
\gate[4] makes one box cover four wires, and \gateinput / \gateoutput label its edges. This is Deutsch–Jozsa, with the phase-kickback ancilla on the bottom wire.
\gategroup draws the dashed box and its caption around a range of columns, which is how a circuit says “and now do that a few million more times”.
\ctrl is a filled control, \octrl an open one that fires on zero, \targ the exclusive-or target. Toffoli on the left, a mixed control in the middle.
\documentclass[border=5pt]{standalone} \usepackage{chemfig} \begin{document} \chemfig{*6((-OH)=(-CH_3)-=(-NH_2)-=)} \end{document}
\schemestart with a labelled arrow, dehydration of ethanol.
\documentclass[border=5pt]{standalone} \usepackage{forest} \begin{document} \begin{forest} for tree={parent anchor=south, child anchor=north, l sep=8mm, s sep=5mm, font=\sffamily} [S [NP [Det [the]] [N [linguist]]] [VP [V [wrote]] [NP [Det [a]] [N [grammar]]]] ] \end{forest} \end{document}
phantom nodes keep the missing children from pulling the branches out of shape.
A custom edge path turning the same tree machinery into the file listing style, showing this plugin's own layout.
skak typesets boards from FEN or from a game score, in figurine algebraic notation, using the chess fonts — which dvisvgm --no-fonts traces to paths like any other glyph, so a board is about 90 KB of SVG and compresses to a fifth of that.
The chessboard package does not work here, and it is worth knowing why before reaching for it: it does \ifpdf\else\RequirePackage{pst-node}\fi, and this pipeline runs latex --output-format=dvi, so \ifpdf is false and it wants PSTricks. Installing PSTricks would not help either, since its output is PostScript specials and this dvisvgm cannot execute those — the same wall the shadings hit. xskak is out for the same reason: it loads chessboard.
\documentclass[border=3pt]{standalone} \usepackage{skak} \begin{document} \newgame \showboard \end{document}
\fenboard takes the usual Forsyth–Edwards string, so any position from a database pastes straight in. This is Anderssen–Kieseritzky 1851 just before mate.
\mainline typesets the moves and plays them, so the board underneath is whatever the moves lead to rather than something entered twice and kept in sync by hand. varwidth gives the standalone document a text width to wrap in.
The move glyphs and the board come from the same font, so pieces can be set in running text.
KaTeX renders inline and display math on this wiki and is much faster, so this is the wrong tool for an equation in a sentence. It is the right tool when the equation has to be a figure — inside a diagram, or when a package KaTeX does not implement is involved.
TikZ shadings — \shade, \shadedraw, and the shadings library — produce nothing at all. Not an error: an empty page.
The reason is that PGF implements gradients as PostScript, emitted into the DVI as specials that a PostScript interpreter is expected to execute later. dvisvgm lists ps among its supported specials, but the Debian build cannot actually execute them, so the drawing operations are silently dropped and the page comes out 0×0. Going through pdflatex and dvisvgm --pdf instead gets the page geometry right and still draws nothing.
Because an empty SVG embeds perfectly happily and displays as an invisible nothing, the plugin checks for this case specifically and reports it rather than letting a figure vanish:
LaTeX rendering failed
texrender: the document typeset a page with nothing on it. The usual cause is a figure built from PostScript specials, which this dvisvgm cannot execute. TikZ shadings (\shade, \shadedraw, and the shadings library) are the common case and always come out empty.
Workarounds, in order of preference: use opacity and layered fills as in the transparency example above, which are real SVG features and work correctly; approximate the gradient with a \foreach over many thin bands; or accept a flat fill.
The shadings above are one instance of a general rule: PSTricks emits PostScript, and this dvisvgm cannot execute PostScript. A package that draws through PSTricks will either fail to load, because PSTricks is not installed, or load and draw nothing.
That catches more than it sounds like, because several packages pick their backend from \ifpdf and this pipeline runs latex --output-format=dvi, where \ifpdf is false. chessboard and xskak are the two found so far — see the chess section above. When a package offers a pgf or tikz backend explicitly, use it.
\write18 is disabled, so packages that shell out mid-compile — minted for syntax highlighting, gnuplottex, anything invoking inkscape or python — will not work. This is not a configuration oversight, it is the boundary that keeps a figure from being a way to run commands on the server.
\input, \include and \includegraphics cannot reach the filesystem: LaTeX runs with openin_any=p, so every read outside its own scratch directory fails. A figure has to be self-contained, which is the same property that makes the syntax worth having.
Errors do not fail silently and do not fail invisibly. The LaTeX log is filtered through texfot, stripped of server paths, truncated, and shown in place of the figure, so whoever wrote it can see what happened:
LaTeX rendering failed
! Undefined control sequence. <recently read> \drawx l.5 \drawx No pages of output.
The same applies to a figure that takes too long. This one is an expansion loop, killed by the timeout:
LaTeX rendering failed
texrender: the render was killed after 5 seconds
Both results are cached, so a broken figure costs one render, not one per page view.