Tikzjax diagramming

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.