mp-tikz-wasm

Diagram tags

This page contains no pre-rendered images. Every figure below is typeset on load by MetaPost, pdfTeX, LuaTeX (for graph drawing) and dvisvgm running in this tab, from a <script> or custom tag in the HTML source.

TikZ, the tikzjax way

A <script type="text/tikz"> holding just a tikzpicture. It is wrapped in a standalone document automatically; libraries come from data-libraries.

A whole document

If the body contains \documentclass, it is compiled as is — any class, any package in the bundles, pgfplots included.

Custom elements

<tikz-diagram> and <metapost-diagram> work the same way and render when they enter the page (a MutationObserver catches later additions). Inside a custom element the content is HTML, so write &lt; for <. A data-gdlibraries attribute (or any use of graphdrawing or \directlua) switches that diagram to LuaTeX.

\begin{tikzpicture}[node distance=1.4cm] \node[circle,draw,fill=blue!15] (a) {$a$}; \node[diamond,draw,fill=red!15,right=of a] (b) {$b$}; \draw[-latex,thick] (a) -- node[above] {$f$} (b); \end{tikzpicture} \graph[layered layout, nodes={draw,circle,fill=green!15,font=\small}, sibling distance=7mm, level distance=7mm] { a -> {b -> {d, e}, c -> {f, g}}; e -> g; }; draw fullcircle scaled 60 withpen pencircle scaled 1.2 withcolor (0.1,0.3,0.8); for i = 0 upto 11: draw origin -- 30 dir (30i) withcolor (i/11)[blue,red]; endfor label.top(btex $\oint_\gamma f = 2\pi i\sum \mathrm{Res}$ etex, (0,32));

MetaPost script tags

<script type="text/metapost">: a body without beginfig becomes one figure; data-tex chooses the label engine.

Errors

A broken diagram shows its diagnostics instead of failing silently.

How to use it on your page

<script type="module" src="https://your-host/mp-tikz-wasm/dist/auto.js"></script>
<script type="text/tikz" data-libraries="arrows.meta">
  \begin{tikzpicture} \draw[->] (0,0) -- (2,1); \end{tikzpicture}
</script>
<metapost-diagram>draw fullcircle scaled 50;</metapost-diagram>

Host the dist/ folder (the three .wasm files, the JS, and bundles/) anywhere static; the script finds them relative to itself. Rendered SVGs are cached in IndexedDB by content hash, so a revisit shows the figures without running TeX.