ReddRadar
Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/bityoungjae/tikzjax-diagramming
SKILL.md
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:
blackbecomeswhite(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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?