Create TikZ diagrams in Obsidian using TikZJax plugin. Use when visualizing geometric shapes, coordinate systems, game scenes, circuit diagrams, chemical structures, or complex technical drawings that require precise positioning.
Creates precise technical diagrams in Obsidian using TikZJax. Use when you need exact positioning for geometric shapes, coordinate systems, circuit diagrams, chemical structures, or 3D plots that Mermaid cannot handle precisely.
/plugin marketplace add BitYoungjae/marketplace/plugin install obsidian-blocks@bityoungjae-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
reference.mdTikZJax enables LaTeX/TikZ diagrams in Obsidian. Use for complex technical drawings where Mermaid lacks precision:
\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:
tikz\begin{document} and \end{document}\begin{tikzpicture}...\end{tikzpicture}scale=1 (smaller values reduce text readability)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 |
Load with \usetikzlibrary{}:
\usepackage{tikz}
\usetikzlibrary{decorations.pathreplacing}
\usetikzlibrary{arrows.meta}
\usetikzlibrary{calc}
\begin{document}
% Drawing commands here
\end{document}
TikZJax plugin can automatically invert black ↔ white in dark mode (configurable in plugin settings).
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};
When dark mode inversion is enabled:
black becomes white (and vice versa)\definecolor{} custom colors are NOT inverted| 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 |
\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}
\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}
\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}
\usepackage{chemfig}
\begin{document}
\chemfig{H-C(-[2]H)(-[6]H)-C(-[2]H)(-[6]H)-H}
\end{document}
\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}
\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}
| 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 |
For complete syntax reference, color tables, and advanced examples, see reference.md.