TikZJax Diagramming for Obsidian Skill

TikZJax Diagramming for Obsidian

TikZJax enables LaTeX/TikZ diagrams in Obsidian. Use for complex technical drawings where Mermaid lacks precision:

Geometric shapes and coordinate systems
Game scenes with precise positioning
Circuit diagrams (circuitikz)
Chemical structures (chemfig)
3D plots (tikz-3dplot, pgfplots)
Commutative diagrams (tikz-cd)

Basic Syntax

\begin{document}
\begin{tikzpicture}[scale=1]
  \draw[thick] (0,0) rectangle (4,2);
  \fill[cyan] (1,0.5) rectangle (3,1.5);
\end{tikzpicture}
\end{document}

Required Structure:

Code block language: tikz
Must include \begin{document} and \end{document}
Drawing code inside \begin{tikzpicture}...\end{tikzpicture}
Recommended: scale=1 (smaller values reduce text readability)

Supported Packages

Load with \usepackage{}:

| Package | Purpose | |---------|---------| | tikz | Core drawing (implicit) | | tikz-cd | Commutative diagrams | | circuitikz | Electronic circuits | | pgfplots | Data visualization, plots | | chemfig | Chemical structures | | tikz-3dplot | 3D coordinate systems | | array | Table environments | | amsmath | Math typesetting | | amsfonts | Mathematical fonts | | amssymb | Mathematical symbols |

TikZ Libraries

Load with \usetikzlibrary{}:

\usepackage{tikz}
\usetikzlibrary{decorations.pathreplacing}
\usetikzlibrary{arrows.meta}
\usetikzlibrary{calc}
\begin{document}
  % Drawing commands here
\end{document}

Dark Mode Behavior

TikZJax plugin can automatically invert black ↔ white in dark mode (configurable in plugin settings).

Text Color

Omit color specification in \node for automatic theme adaptation:

% Explicit color - fixed, won't adapt
\node[black] at (2,0) {Label};

% No color - adapts automatically (recommended)
\node at (2,0) {Label};

Black/White Inversion

When dark mode inversion is enabled:

black becomes white (and vice versa)
Other named colors remain unchanged
\definecolor{} custom colors are NOT inverted

Unsupported Features

| Feature | Status | Alternative | |---------|--------|-------------| | Color mixing (blue!30, cyan!20!white) | Not supported | Use base colors only | | Korean text | Not supported | Use English | | \definecolor{}{RGB}{} | Not inverted in dark mode | Use named colors if inversion needed | | \definecolor{}{HTML}{} | Not inverted in dark mode | Use named colors if inversion needed |

Quick Start Examples

Simple Rectangle with Fill

\begin{document}
\begin{tikzpicture}[scale=1]
  \draw[thick, gray] (0,0) rectangle (4,3);
  \fill[cyan, opacity=0.3] (0.5,0.5) rectangle (3.5,2.5);
  \node at (2,1.5) {Content Area};
\end{tikzpicture}
\end{document}

Coordinate System

\begin{document}
\begin{tikzpicture}[scale=1]
  % Axes
  \draw[thick, gray, ->] (-0.5,0) -- (4,0) node[right] {$x$};
  \draw[thick, gray, ->] (0,-0.5) -- (0,3) node[above] {$y$};

  % Point
  \fill[red] (2,1.5) circle (3pt) node[above right] {$P(2,1.5)$};

  % Dashed guides
  \draw[dashed, yellow] (2,0) -- (2,1.5);
  \draw[dashed, yellow] (0,1.5) -- (2,1.5);
\end{tikzpicture}
\end{document}

Circuit Diagram

\usepackage{circuitikz}
\begin{document}
\begin{circuitikz}[scale=1]
  \draw (0,0) to[R, l=$R_1$] (2,0)
              to[C, l=$C_1$] (4,0)
              to[short] (4,-2)
              to[battery1, l=$V$] (0,-2)
              to[short] (0,0);
\end{circuitikz}
\end{document}

Chemical Structure

\usepackage{chemfig}
\begin{document}
\chemfig{H-C(-[2]H)(-[6]H)-C(-[2]H)(-[6]H)-H}
\end{document}

Commutative Diagram

\usepackage{tikz-cd}
\begin{document}
\begin{tikzcd}
  A \arrow[r, "f"] \arrow[d, "g"'] & B \arrow[d, "h"] \\
  C \arrow[r, "k"'] & D
\end{tikzcd}
\end{document}

3D Plot

\usepackage{pgfplots}
\begin{document}
\begin{tikzpicture}
\begin{axis}[
  view={60}{30},
  colormap/cool
]
\addplot3[
  surf,
  domain=-2:2,
  domain y=-2:2
] {exp(-x^2-y^2)};
\end{axis}
\end{tikzpicture}
\end{document}

When to Use TikZJax vs Other Tools

| Use Case | Tool | |----------|------| | Flowcharts, sequences, ER diagrams | Mermaid | | Mathematical functions, interactive graphs | Desmos | | Inline math, equations | MathJax | | Precise geometry, coordinate systems | TikZJax | | Game scenes, sprites, positioning | TikZJax | | Circuit diagrams | TikZJax | | Chemical structures | TikZJax | | 3D visualizations | TikZJax |

Reference

For complete syntax reference, color tables, and advanced examples, see reference.md.

Agent Skills: TikZJax Diagramming for Obsidian

Install this agent skill to your local

Skill Files