How to draw a TikZ diagram

1. Pick a tool on the left (or press its key: R box, O circle, D decision, T text, L line, A arrow). Click the canvas to place it, or drag to draw it at the size you want. You can also drag a tool straight onto the canvas.
2. Type the text right away, or double-click anything later to change it. Maths works as usual: $x^2$, $\alpha$.
3. Connect nodes by drawing an arrow from one node to another. Or select a node and drag its round ➜ handle: onto another node to connect them, or onto empty space to add a new node that is already connected. Connectors stay attached when you move nodes.
4. Click to select, shift-click or drag a box to select several, then move, align, space evenly, copy and paste them. Style the selection with the colour swatches and the line width, line style and arrow buttons on the right.
5. Zoom with the + and − buttons or Ctrl and the mouse wheel; hold Space (or use the Pan tool) and drag to move around. On a phone, pinch to zoom and drag with one finger to pan.
6. Press Copy TikZ. The Code tab shows the code as you draw, offers a standalone document that compiles as is, and SVG or PNG downloads.

Using the code

The snippet starts with a comment listing the preamble lines it needs, typically:

\usepackage{tikz}
\usetikzlibrary{arrows.meta,shapes.geometric}

Libraries are added only when the drawing uses them: arrows.meta for arrow tips such as Stealth and Latex, and shapes.geometric for diamond and ellipse nodes. Custom colours become \definecolor lines. Every element is written as one readable command, so the code is easy to adjust by hand.

What gets generated

• Nodes: \node[draw, circle, fill=blue!20] (n1) at (2,3) {$x$}; with shapes rectangle, rounded, circle, ellipse, diamond or plain text, minimum size, rotation and font size.
• Templates: flowchart, block diagram with a feedback loop, neural network, graph, tree, commutative diagram and function plot.
• Connectors: \draw[->] (n1) to[bend left=30] node[midway, above] {label} (n2);
• Lines and curves: straight lines with arrows and labels, Bézier curves (.. controls ..) and arcs.
• Shapes: rectangles (optionally rounded), circles, ellipses and polygons.
• Plots: grids with any step, x and y axes with labels, and labelled points.

Frequently asked questions

Can I edit the code and bring it back?

Code made here ends with a comment (% ebhor-tikz:…) that stores the drawing. Paste it into Reopen code made with this builder on the Code tab to keep editing. Changes you make to the code by hand are not read back; switch the comment off in the picture options (shown when nothing is selected) if you do not want it.

How do I write maths in labels?

Use normal LaTeX: $x^2$, $\alpha$, $v_1$. The preview shows a close approximation; the code is exact.

Which colours can I use?

Any xcolor expression: base names such as red or teal, tints like blue!20 and mixes like red!50!blue. Add your own colour in the picture options (shown when nothing is selected) and use it by name.

Is there a size limit?

Up to 300 elements, coordinates between −100 and 100 cm, and labels up to 300 characters.

Is my drawing uploaded?

No. Everything happens in your browser. Copy link keeps the drawing in the part of the link after #, which is not sent to our server.

Related tools

• Quantikz circuit builder for quantum circuit diagrams
• Logic gate circuit generator