Draw it, then paste the LaTeX.

Get started

1. Pick a tool and draw. The rail on the left holds every tool; press L for a line, R for a rectangle, T for text.
2. Type maths in labels. Anything between $…$ is LaTeX maths and renders as you type: $\vec F = m\vec a$.
3. Copy the TikZ. Press CtrlE to open the code. The comment at the top lists the packages it needs.
4. Paste and compile. Put the code in your document, load the listed packages, and build with pdfLaTeX.

The first time you open DiagramTeX it shows a Welcome file: an introduction, two diagrams with one example of almost everything it can draw, and a short manual. Open any of its objects to see how it was made. To keep DiagramTeX on your computer, install it from the browser (the install icon in the address bar, or Add to Home Screen); it then runs without a connection.

The window

1 cm in TikZ is 40 px on the canvas at 100%. Canvas y points down and TikZ y points up; the faint cross on the canvas marks the TikZ origin. The app follows your system's light or dark appearance, or the choice at the right end of the top bar. The drawing sheet stays light in both, so colours look as they will on paper.

Four modes

The top bar's main switch is Classic | Page | Whiteboard | Quick. Each of the first three is its own kind of file; the sidebar lists only files of the current kind, and New makes one of that kind.

Drawing

Tools

• Select (V), Maths (M, a text object that starts in $…$) and Text (T; drag for a paragraph box).
• Lines: line, curve, arrow, curved arrow, polyline, smooth closed blob, arc (an angle mark) and spring. Click a polyline point to pick it, drag a + to add one, double-click to remove one.
• Shapes: rectangles (plain, rounded, snipped), 33 basic shapes and 28 flowchart symbols. Library symbols export as exact TikZ paths and can hold centred text.
• Electrical: the circuit editor, common symbols (resistor, capacitor, sources, diode, transistor, logic gates, ground) and waveforms (sine, square, pulse, triangle, sawtooth, rectified, chopped…).
• Physics: mechanics (ground, wall, block, incline, cart, pulley, pendulum) and optics (lenses, mirrors, prism, screen, slits, rays, source, eye).
• Misc: axes, wave, brace, ruler, grid, ball and dot; Arrows: 27 block arrows; Image (I) and Pencil (N, freehand, smoothed into Bézier curves).

Detailed shapes keep their detail size when you resize them: stretching a wave adds periods, a spring or coil adds loops, a ruler adds ticks. The panel holds the detail sizes (period, loop pitch, tick spacing, cell size).

Snapping and precision

• The grid is 0.25 cm. Shapes snap to it and to other shapes' points; hold Alt to place freely.
• Hold Shift to keep angles to 15° steps and to draw squares and circles.
• Arrow keys nudge the selection. The panel shows every coordinate in TikZ centimetres, ready to type.
• Rotate by hovering just outside a corner of the selection until the cursor turns, then drag (Shift for 15°). CtrlR turns 90°.

Arranging

• Right-click any object for copy (also as TikZ), cut, paste, duplicate, delete, group, and the Combine, Arrange, Rotate, Align and Distribute menus.
• Groups (CtrlG; add Shift to ungroup) select and align as one piece. Click a member of a selected group again to select just it, to move or copy it on its own.
• Combine two or more closed shapes: Unite, Intersect, Subtract, Exclude or Divide. The result is a Region, which can have holes, exported with even odd rule.
• Stacking: Ctrl] and Ctrl[ move forward and backward, or drag rows in Layers.

Style

• Colour with presets, alpha and “No colour”. Fill is a colour, a gradient (linear or radial, with draggable stops; exported as pgf shadings) or a pattern (lines, grid, crosshatch, bricks, dots; exported with patterns.meta).
• Lines: width, dash presets or a custom on off pattern, 27 arrow tips, double, wavy and ticked shafts, opacity.
• Text: font family, bold and italic, size from \tiny to \Huge or a custom size, and a wrap width with left, centre, right or justified alignment.
• With nothing selected, the panel sets the default style that new shapes start with.

Text and maths

• $…$ is inline maths. $$…$$ or \[…\] is display style (full-size fractions and limits), exported as $\displaystyle …$. Math style in the panel switches every formula in the selection at once.
• Command suggestions: type \ and matching commands appear with a rendered preview, about 250 common ones first. ↑ ↓ to choose, Enter or Tab to insert, Esc to close.
• Text input (left sidebar): LaTeX to type source, or MathLive to edit maths visually. Double-clicking a label edits it in the mode you chose.
• LaTeX engine (left sidebar) changes only the preview: KaTeX looks the same in every browser; Temml covers more LaTeX and looks closer to TeX. The exported code is the same.
• Labels on lines and curves use TikZ's auto and swap placement, so they sit where LaTeX puts them.

Maths inside LaTeX source fields is shown in green, so you can see at a glance which part is maths. In maths, typing (, [ or { adds its closing partner when nothing, a space or the closing $ follows the caret (or wraps the selected text in the pair); typing the closer steps over it, and Backspace between an empty pair removes both.

Plots and 3D

2D plots (pgfplots)

Click the plot button to place one, or drag out a box. Each plot holds several series, written as expressions such as sin(x)*exp(-x/4) or as data. Kinds: function, line, scatter, area, bar, contour, heatmap, and pie chart (one label value [#color] per line). A function series can also be an inequality (shaded, dashed edge when strict), a region between two curves, x in terms of y, parametric, polar, implicit F(x, y) = 0, points, vectors, a vector field or a phase portrait. Define variables once (a = 2, b = 0.5) and use them in every series. Axis labels, ranges, grid, legend, colour maps and a colour bar are in the panel; expression errors show both there and on the canvas.

2D geometry

The last tool in the 2D plots menu, 2D Geometry, is a plain TikZ figure for vectors and coordinate geometry: drag points, add vectors, projections such as (Q |- P), angle marks and plots, and measures that print their value and update when a point moves. See Blocks.

3D

The 3D menu has eight tools; each one's variants are chosen in its panel.

• 3D plots (pgfplots): surface z = f(x, y) (or a mesh), parametric surface, space curve and 3D scatter, with pgfplots' view={az}{el} angles.
• 3D figures in plain TikZ, for calculus: solid regions over an ellipse, rectangle, polar curve or polar rectangle (with Riemann columns), solids of revolution (disks, washers, shells, cut open, with a highlighted slice) and basic solids (box, cylinder, cone, frustum, sphere, prism, pyramid, spherical wedge). Hidden edges are dashed; lower a colour's alpha to see through.
• 3D Geometry (tikz-3dplot): a picture you turn by dragging, with points, vectors, projections, planes, surfaces, spheres and angle arcs. See Blocks.

Blocks

A block is a whole figure written in one LaTeX package, edited in its own editor. Add one from the Blocks menu (the cube on the tool rail). Blocks are experimental, so check the compiled figure before you rely on it. Placing a block only selects it; double-click it, press Enter or use the Edit… button in the panel to open its editor.

All editors work the same way:

• Palette on the left: click an item and click the grid, or drag it in. Single keys place the common items.
• Code on the right, live both ways. The code follows the drawing, and typing in it updates the drawing after a short pause. Parts you didn't touch keep the code you wrote, and commands the editor can't draw are kept and exported as written (it tells you which).
• Right-click an item for its actions: insert, delete, reverse, bend, edit label. Double-click a label to edit it in place.
• Done (CtrlEnter) writes the block back and closes; CtrlS writes it back and keeps the editor open. Cancel or Esc asks before discarding changes.

Circuit circuitikz266 parts

• Parts come in searchable categories. Click a part and click the grid, or drag from start to end to set a two-terminal part's length.
• Wires (W) snap to pins and stay attached when parts move. Transistors, op amps and ICs are named for you (Q1, U1), so wires export as (Q1.B).
• The panel sets the label (maths welcome: $R_1$), annotation, voltage and current arrows, open and closed ends, rotation and mirroring.
• Exported as a scope with \usepackage{circuitikz}; Copy circuitikz Code gives a standalone environment.

Documents and pages

Classic documents

• A Classic file is a document of text blocks and diagram blocks. Text blocks take # Heading, $inline$ and $$display$$ maths, \textbf{} and \emph{}.
• Double-click a diagram block, or press Edit, to draw it on the canvas. In Diagram view, the selector in the top bar picks between diagrams.
• Page setup (right panel): paper (A4, A5, B5, US Letter, US Legal or custom), orientation, margins, font size and title. The preview marks approximate page breaks.
• Diagrams wider than the text are scaled down to fit, on screen and in the export (\resizebox{\linewidth}{!}{…}).

Page mode

• Place anything anywhere on the paper. Margins are blue dashed guides; corners, margins and centre lines are snap points.
• Several pages stack down the canvas. With nothing selected, the panel lists every page to reorder, duplicate, insert or delete; an object belongs to the page under its centre and moves with it. PgUp / PgDn move between pages.
• The LaTeX export writes one tikzpicture[remember picture, overlay] per page, anchored to the page corner, so positions are exact. Compile twice.

Getting LaTeX out

Save to (Chrome, Edge and other Chromium browsers): choose a folder for a file's exports once, such as your paper's figures/ folder, and every later export overwrites its copy there.

A typical snippet looks like this:

% Requires: \usepackage{tikz} \usetikzlibrary{arrows.meta}
\begin{tikzpicture}[x=1cm, y=1cm]
  \draw[line width=0.71pt, -{Stealth}] (0,0) -- (3,0) node[midway, above] {$\vec v$};
  \draw[line width=0.71pt] (4,0) circle (0.5);
\end{tikzpicture}

Packages by block: TikZ always; circuitikz, pgfplots, tikz-cd, xy, the quantikz2 library, forest, zx-calculus, tikz-feynman, tikz-3dplot, tikz-timing, the automata library, karnaugh-map, bytefield, chemfig and blochsphere as used. All of them are in TeX Live and on Overleaf.

quantikz2 restyles every tikz-cd diagram in the same document. When a quantum circuit shares a figure with a commutative or ZX diagram, the export adds a few preamble lines that keep those diagrams as they look on their own.

Bringing TikZ in

Import LaTeX/TikZ (top bar) takes pasted code or a .tex file and turns it into objects you can edit.

• Commands: \draw, \fill, \filldraw, \node, \coordinate.
• Paths: --, ..controls.., |-, rectangle, circle, ellipse, arc, to[bend], grid and inline nodes.
• Options: colours (including red!50), widths, dashes, arrows, scale, polar and relative coordinates; rotate, shift, xshift, yshift on paths, nodes and nested scopes.
• ZX, feynman, tikztimingtable and bytefield environments come back as blocks you can edit. Document text becomes text blocks, and \documentclass and geometry options become the page setup.
• The switch in the dialog's head chooses what TikZ that can't be read exactly becomes. As Written keeps it as code, exported unchanged and drawn in a dashed frame. Editable Shapes turns it into ordinary shapes you can edit, exported from the shapes, so some details may change.
• Insert into Diagram adds each picture as one group in the middle of the canvas, or, in the Document view, as a new diagram after the active one (⌘V there does the same); Import as New Document opens it in a new file.
• Hand-written axis and tikzcd environments are skipped, with a warning. Files DiagramTeX exported re-import exactly, plots included.

Files and saving

• Autosave: every change is saved in your browser (IndexedDB) as you work. Nothing is uploaded. A block editor's edits join the document when you press Done (or ⌘S); reloading or closing the tab before that makes the browser ask first.
• Save (CtrlShiftS) writes a .diagramtex file (JSON inside); Open (CtrlO) loads it back in the right mode.
• Export All Files… (right-click the empty part of the file list) saves every Pages, Classic and Whiteboard file into one .diagramtex bundle. Opening the bundle puts each file back in its own kind, skips ones already here unchanged, and adds “copy” to names that are taken.
• Linked files (Chromium browsers): after the first Save, the file stays linked, so CtrlS writes straight to it. An amber dot by the name means unsaved changes. Safari and Firefox download a copy each time instead.
• The installed app can open .diagramtex, .tex and .tikz files from Finder or Explorer (Open With).

Browser storage can be cleared by the browser or by you. Keep a .diagramtex copy of anything you care about.

How close to LaTeX

The canvas is drawn with each package's own geometry, so what you see is what pdflatex makes: across the test figures, 99.5 % of the ink lands within half a millimetre. The main differences you may notice:

• Fonts: the preview uses KaTeX or Temml, which are close to Computer Modern but not identical; line breaks in wrapped text can fall slightly differently.
• Fill patterns: LaTeX lines up stripes and dots with the page corner, so they can be shifted inside a shape.
• Small offsets: a circuit's curved voltage arrow on parts other than resistors and capacitors, op-amp signs, and 3D plot axis labels at unusual view angles can be up to about 1 mm off.
• Code the editor keeps but doesn't draw (an unusual option, a chemfig \subscheme) appears only in the PDF. Each editor lists such lines.

The full report, with side-by-side images and a match rate for every kind of figure, is PARITY.md.

Keyboard shortcuts

Offline and privacy

• Your work never leaves your device. Files and settings live in your browser; there is no server-side storage.
• No account, no tracking: no sign-up, analytics, cookies, ads or third-party scripts.
• Offline: after the first visit, the app, both maths engines, MathLive and every font are stored by the browser, so everything works without a connection.
• Updates: when a newer release is on the same site, an amber dot appears before the version number at the bottom of the file list; click it to reload into it. The app checks once per load and asks no other site.
• No requests to other sites, even from your exports: SVG, HTML, PNG and PDF exports embed the maths fonts instead of linking them.
• Open source under the MIT License; you can host it yourself as plain static files.

Use of generative AI

DiagramTeX was built with the help of generative AI: much of its code, tests and documentation were written with AI coding assistants, directed, reviewed and tested by the author. The app itself uses no AI: nothing you draw is sent to an AI service or anywhere else.

Questions

Can I use the output in Overleaf?

Yes. Press CtrlE, copy the code and paste it into your project; load the packages listed in the comment at the top.

Does it work on phones and tablets?

Tablets, yes, and a phone turned sideways. A phone held upright asks you to continue on a bigger screen: the editor needs the room.

How large can a drawing get?

Tens of thousands of objects. Only what is near the view is drawn, so editing stays smooth at 20,000 objects.

Where are my diagrams stored?

In your browser's IndexedDB. Use Save to keep a .diagramtex copy as a file.

Something the editor can't draw?

Type it in the editor's code. It is kept and exported as written, and the editor tells you which lines it couldn't draw.