tikzjax-diagramming
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.
Full skill instructions
TikZJax 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.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
This handles everything around building autonomous agents for Claude Code plugins.
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
This is the meta-skill for building skills themselves.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Helps you build event-driven automation for Claude Code using hooks that trigger on tool use, session events, and stop conditions.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Shows Claude Code how to build slash commands from markdown files, covering the YAML frontmatter options, dynamic arguments with $1/$2...
This is your reference when scaffolding Claude Code plugins or figuring out why components aren't loading.
Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos).
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience