Markdown TikZ editor

Write TikZ, the drawing language of LaTeX, and see it drawn as you type. This is real TeX compiled to WebAssembly and running in your browser, so the result looks as it would in a LaTeX document, and nothing you type leaves your computer. The code sits in your Markdown as a ```tikz block. Free, with no LaTeX install and no sign-up.

The first drawing loads TeX, about 4.5 MB, and takes a few seconds. After that each drawing takes under a second.

TikZ syntax

A drawing is a tikzpicture environment holding commands that each end with ;. You can also give just the commands, or a whole LaTeX file with \documentclass; \usepackage and \usetikzlibrary lines are read. Coordinates are in centimetres, with (0,0) at the start.

Lines and shapes

\draw joins points with --. cycle closes a shape, and circle and rectangle draw those shapes. Options in square brackets set colour, fill and line style.

You write

\begin{tikzpicture}
  \draw (0,0) -- (2,0) -- (1,1.5) -- cycle;
  \draw[fill=blue!20] (3,0.75) circle (0.75);
  \draw[thick, red, dashed] (4.5,0) rectangle (6,1.5);
\end{tikzpicture}

You get

Nodes and arrows

A \node holds text and can be named in brackets. Draw arrows between named nodes with -> in the options.

You write

\begin{tikzpicture}[every node/.style={draw, rounded corners}]
  \node (in) at (0,0) {Input};
  \node (fn) at (3,0) {Process};
  \node (out) at (6,0) {Output};
  \draw[->, thick] (in) -- (fn);
  \draw[->, thick] (fn) -- (out);
\end{tikzpicture}

You get

Maths and plots

Node text is ordinary LaTeX, so maths between $ signs is typeset by TeX. plot draws a curve from a formula.

You write

\begin{tikzpicture}
  \draw[->] (-0.2,0) -- (6.6,0) node[right] {$x$};
  \draw[->] (0,-1.2) -- (0,1.2) node[above] {$y$};
  \draw[blue, thick, domain=0:6.28, samples=60]
    plot (\x, {sin(\x r)});
  \node[blue] at (4.8,1) {$y = \sin x$};
\end{tikzpicture}

You get

Libraries and packages

Load TikZ libraries with \usetikzlibrary, such as positioning for placing nodes relative to each other. Packages built on TikZ, such as circuitikz, work too.

You write

\usepackage{circuitikz}
\begin{circuitikz}
  \draw (0,0) to[battery1, l=$V$] (0,2)
        to[R, l=$R$] (3,2)
        to[C, l=$C$] (3,0) -- (0,0);
\end{circuitikz}

You get

Cheat sheet

Write this	You get
`\draw (0,0) -- (2,1);`	A straight line
`\draw (0,0) -- (1,0) -- (0,1) -- cycle;`	A closed shape
`\draw (1,1) circle (0.5);`	A circle of radius 0.5
`\draw (0,0) rectangle (2,1);`	A rectangle
`\draw[->, thick, red] …`	An arrow, thicker and red
`\fill[blue!20] …`	A filled shape with no outline
`\node (a) at (0,0) {Text};`	A named piece of text
`\node[draw, circle] …`	Text in a circle
`\draw (a) -- (b);`	A line between two named nodes
`{$x^2$}`	Maths typeset by TeX
`\usetikzlibrary{positioning}`	Load a TikZ library

Included: all of TikZ's own libraries, amsmath, circuitikz, chemfig and tikz-3dplot, with Computer Modern and AMS fonts. Not included: pgfplots and tikz-cd, graph drawing (which needs Lua), gnuplot plots, pictures loaded from files, overlays and remember picture, other fonts, and pages after the first. Very large drawings can run out of TeX's memory.

Something not working? Let us know.