Diagrams that compile: TikZ on a Quartz site

Every diagram on this site is real TikZ. Not a screenshot, not a hand-drawn SVG — the same source you would paste into a LaTeX document, compiled during the site build and inlined as SVG. This post is partly an explanation and partly a test page: if the pictures below render, the pipeline works.

A commutative diagram

The naturality square from the Yoneda lemma, written with tikz-cd:

The source for that is exactly what you see: a fenced block tagged tikz, containing the \usepackage lines you need, then a full \begin{document} … \end{document}.

Ordinary TikZ, too

tikz-cd is not special — anything TikZ can draw, the build can draw. A wiring diagram for a monoidal preorder:

Formulas around the diagrams

Prose math is KaTeX by default, so the usual LaTeX works inline — the Yoneda lemma says $\mathrm{Nat}(\mathrm{Hom}(X,-),F)\cong F(X)$, naturally in both and — and in display mode:

$${\int }_{x\in \mathcal{C}}[\mathcal{C}(a,x),Fx]\cong Fa$$

If you would rather write a formula in Typst, you can do that on any page without switching the whole page over:

That block is compiled by Typst; the $…$ around it is LaTeX. In fact this whole site decides formula by formula, so the two can sit in the same sentence — see the mixed note. My colleague’s next post covers the stricter option: a page pinned to Typst.

Why build-time rendering

Three reasons, in order of how much they matter:

1. Nothing ships to the reader but SVG. No TikZJax bundle, no client-side LaTeX, no layout shift while a diagram appears.
2. Failures are loud and early. A malformed picture breaks the build log rather than silently showing nothing in someone’s browser.
3. It is cached. Each diagram is keyed by a hash of its source, so a rebuild only recompiles the pictures that actually changed. The cache lives in site/.tikz-cache and is committed, which keeps CI builds quick.

Caveats

• Dark mode inverts the SVG rather than recolouring it. For line art this is invisible; if you use strong colours, check both themes.
• Not every LaTeX package is available — the renderer is a TeX build compiled to WebAssembly. tikz, tikz-cd, circuitikz and pgfplots all work.
• Very large pictures are slow to compile the first time. That is a one-off cost per diagram.

Writing in Obsidian

The vault has the Inline TikZ plugin enabled, so these blocks render live while you edit. What you see locally is what the build produces.