← Back to Guides
DiagramsTikZ Diagrams in Markdown

Try this in the editor

Paste the examples from this guide into the live editor and export them to a styled PDF or HTML file — diagrams, math and syntax highlighting included. Free, no signup.

Open the editorMarkdown to PDF converter
Published on 2026-02-22

TikZ Diagrams in Markdown

How to write TikZ graphics commands in Markdown to produce high-quality LaTeX-grade technical diagrams, plots, and geometric figures.

TikZ (a recursive acronym for “TikZ ist kein Zeichenprogramm”, or “TikZ is not a drawing program”) is the standard graphics package for LaTeX. It produces beautiful, extremely precise graphs, mathematical diagrams, and scientific visualizations.

MarkdownToPrettyPDF allows you to write TikZ commands in a tikz fenced block.

Basic Syntax

To use TikZ, treat the fence block as the interior of a tikzpicture environment. Kroki handles wrapping the document appropriately.

syntax
\begin{tikzpicture}
  \coordinate (A) at (0,0);
  \coordinate (B) at (4,2);
  \coordinate (C) at (4,0);

  \draw[thick] (A) -- (B) node[midway, above left] {$c$};
  \draw[thick] (B) -- (C) node[midway, right] {$a$};
  \draw[thick] (C) -- (A) node[midway, below] {$b$};
  
  \draw (3.7,0) |- (4,0.3);
\end{tikzpicture}
TikZTikZ diagram

Advanced Examples

TikZ is extraordinarily expressive. You can define nodes, styles, and loop through repetitive commands:

syntax
\begin{tikzpicture}[
    level 1/.style={sibling distance=30mm},
    level 2/.style={sibling distance=15mm},
    every node/.style={circle, draw, minimum size=6mm, inner sep=0pt}
  ]
  \node {Root}
    child { node {1}
      child { node {1.1} }
      child { node {1.2} }
    }
    child { node {2}
      child { node {2.1} }
      child { node {2.2} }
    };
\end{tikzpicture}
TikZTikZ diagram

Mathematical Functions

You can also plot basic mathematical functions without requiring an external plotting program:

syntax
\begin{tikzpicture}[domain=0:4]
  \draw[very thin,color=gray] (-0.1,-1.1) grid (3.9,3.9);
  \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$};
  \draw[->] (0,-1.2) -- (0,4.2) node[above] {$f(x)$};
  \draw[color=red]    plot (\x,\x)             node[right] {$f(x) =x$};
  \draw[color=blue]   plot (\x,{sin(\x r)})    node[right] {$f(x) = \sin x$};
  \draw[color=orange] plot (\x,{0.05*exp(\x)}) node[right] {$f(x) = \frac{1}{20} e^x$};
\end{tikzpicture}
TikZTikZ diagram

Use the tikz language when you require the utmost precision and the aesthetic quality of LaTeX documents.

Related guides