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.