Central Documentation & Help Center

TikZ Studio Documentation

The complete guide to creating publication-ready LaTeX TikZ figures. Browse instructions, visual workflows, interactive keyboard shortcuts, and Overleaf integration across all 4 studios.

Overview Coordinate Axis & Curves Venn Diagrams Flowcharts & FSM Timelines LaTeX & Overleaf Keyboard Shortcuts

Overview & Studio Suite Architecture

All Studios

TikZ Studio translates interactive visual canvas sketching into clean, syntactically correct, and compilable PGF/TikZ code for LaTeX. Each studio is purpose-built for a specific academic and scientific domain:

📈 Coordinate Axis Studio

Draw 2D curves, Bézier splines, 14 economics & physics presets, shaded regions, and Z-index layers.

⭕ Venn & Euler Studio

2-set and 3-set Venn diagrams, boolean algebra regions ($A \cap B, A \cup B$), and probability events.

🔀 Flowcharts & Automata (FSM)

Flowcharts, computer science DFA/NFA automata, cardinal anchor snapping, and orthogonal routing.

📅 Timeline Studio

Chronological milestone charts, historical event phases, intervals, and customized time markers.

1. Coordinate Axis & Curves Studio

Coordinate.html

The Coordinate Axis Studio features a canvas-first rubberband drafting environment, 14 domain-specific model presets, multi-layer Z-index management, and mathematical notation.

Canvas Rubberband Tools

Select & Edit (V/S), Straight Lines (L), 4-Point Bézier Splines (C), Rectangles & Shaded Regions (R), Circles (O), Points (P), and Grid Snapping (G).

14 Curated Domain Presets

Pre-built microeconomics (Supply & Demand, Monopoly & DWL, Utility Maximization, Cost Curves, PPF), macroeconomics (IS-LM, Keynesian Cross, Solow Growth, AD-AS), math, and physics models.

Canvas Layers Drawer (Alt+L)

Control front-to-back render hierarchy, lock shapes to prevent unintended edits, toggle visibility, and search layers by type.

Mathematical Notation: Supports subscripts (Q_1 → $Q_1$), superscripts (Q^* → $Q^*$), Greek letters (\pi, \theta, \alpha), fractions (\frac{a}{b}), and MathML tags.

2. Venn & Euler Diagrams Studio

Venn.html

Construct 2-set and 3-set Venn diagrams with set operations, boolean algebra logic, and mathematical probability shading:

Atomic Set Partitions

Shade individual intersections ($A \cap B$), unions ($A \cup B$), differences ($A \setminus B$), or universal complement ($U \setminus (A \cup B)$).

Probability Expressions

Annotate joint probabilities $P(A \cap B)$, marginal probabilities $P(A)$, and conditional probabilities $P(A \mid B)$ directly in the sets.

TikZ Clip & Fill Output

Generates clean, native TikZ \begin{scope} \clip ... \fill ... \end{scope} blocks that compile natively.

3. Flowcharts, State Machines & Automata

Flowchart.html

Create computer science automata (DFA/NFA), algorithms, business process flows, and finite state transitions:

Standard Shape Conventions

Pill/Terminals (Start/End), Rectangles (Process), Diamonds (Decisions), Parallelograms (Data I/O), Circles (States), and Double Circles (Accept States).

Interactive Port Snapping

Hovering shapes reveals 4 cardinal connection ports (North, South, East, West). Drag from any port to snap directly into a target shape port.

Smart Routing & Loops

Switch between Direct lines, Orthogonal 90° elbows (-| and |-), and Feedback loops with custom branch labels (Yes / No, 0, 1, ε).

4. Timeline Studio

Timeline.html

Construct chronological timelines for research papers, thesis overviews, project milestones, and historical event sequences:

Milestone Markers

Place point events with dates, titles, and descriptions alternating above and below the central time axis.

Intervals & Phases

Span multi-year or multi-month historical eras with shaded range bars and category labels.

Clean LaTeX TikZ Code

Generates lightweight, scalable TikZ code ready to drop into paper preambles or presentation slides.

6. Compiling in LaTeX & Overleaf (Preamble Requirements)

Compilation

Every diagram generated by TikZ Studio is self-contained standard PGF/TikZ code. To compile in Overleaf or a local LaTeX distribution (such as TeX Live or MiKTeX), use this Minimal Working Example (MWE):

          \documentclass{article}

          \usepackage{tikz}

          % Recommended TikZ libraries for arrows, calculations, positioning and shapes:

          \usetikzlibrary{arrows.meta, calc, positioning, shapes.geometric, automata}

          \begin{document}

          % Paste the generated TikZ code from TikZ Studio here:

          \begin{tikzpicture}[scale=1.0]

            % Diagram content

          \end{tikzpicture}

          \end{document}

Recommended Compilers

All TikZ code is fully compatible with pdfLaTeX, LuaLaTeX, and XeLaTeX.

High-Resolution PNG Export

Export crisp images at 1x, 2x Retina, 3x High-Res, or 4x Ultra-Res with transparent or solid background options.

7. Master Keyboard Shortcuts Cheat Sheet

Shortcut Key	Action	Studio Availability
`V` or `S`	Select & Edit Mode	Coordinate, Flowchart
`L`	Straight Line Tool	Coordinate
`C`	Bézier Curve Tool	Coordinate
`R`	Rectangle / Region Tool	Coordinate, Flowchart
`O`	Circle / State Tool	Coordinate, Flowchart
`P`	Point / Label Tool	Coordinate
`G`	Toggle Magnetic Grid Snapping	Coordinate, Flowchart
`Alt` + `L`	Toggle Canvas Layers Manager	Coordinate
`H` or `Space`	Pan Canvas Viewport	Coordinate, Flowchart
`Ctrl` + `Z`	Undo Previous Action	All Studios
`Ctrl` + `Y`	Redo Action	All Studios
`Esc`	Cancel Draw / Close Modals	All Studios