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.

TikZ's own baseline rules are reproduced rather than approximated, so a snippet lines up in the browser the way it would in a document.

The default puts the bottom of the picture on the baseline, which is what does here. [baseline] puts the picture's own origin there instead, so the same circle straddles the line: . A dimension moves it anywhere, and [baseline=-0.5ex] is the usual choice for something meant to sit like a letter: . Naming a node's anchor lines its text up with the surrounding text, which is what makes look like a numbered thing in a sentence rather than a bubble floating past it.

\tikz \draw (0,0) circle (3pt);                    % bottom on the baseline
\tikz[baseline] \draw (0,0) circle (3pt);          % picture origin on the baseline
\tikz[baseline=-0.5ex] \draw (0,0) circle (3pt);   % half an ex below it
\tikz[baseline=(n.base)] \node ... (n) {3};        % the node's own baseline

None of this is configured or measured. dvisvgm leaves the DVI reference point at y=0 in the SVG it writes, so the bottom edge of the viewBox is exactly how far the picture hangs below the baseline, in a unit CSS agrees with; the plugin reads that number back out of its own output and writes it as vertical-align. A picture that clears the baseline gets a positive value and rides above the line, which is why sits where a rule should.

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.

Tables and list items take them as readily as paragraphs do:

• a swatch in a list
• an arrow in a list
• inside bold and inside italics

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 is what makes the alignment work. Crop mode moves the content into the corner of the page and the depth below the baseline goes with it; preview mode leaves it sitting on the reference point, which is the whole reason the viewBox can be read the way it is above.

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}

\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.

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:

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.

\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:

! 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:

texrender: the render was killed after 5 seconds

Both results are cached, so a broken figure costs one render, not one per page view.