⚡

TikZJax图表绘制 tikzjax-diagramming

TikZJax 图表绘制技能是指在 Obsidian 笔记软件中，利用 TikZJax 插件创建和渲染基于 LaTeX/TikZ 的高精度技术图表的能力。该技能核心在于使用 TikZ 宏包及其扩展（如 circuitikz, chemfig, pgfplots）来绘制几何图形、电路图、化学结构、3D 绘图和交换图等，适用于需要数学级精确定位的场景。关键词：Obsidian 插件，TikZ 绘图，LaTeX 图表，技术绘图，电路图，化学结构，3D 可视化，精确几何，数据可视化。

其他 0 次安装 0 次浏览 更新于 3/2/2026

name: tikzjax-diagramming description: 在 Obsidian 中使用 TikZJax 插件创建 TikZ 图表。适用于需要精确定位的几何形状、坐标系、游戏场景、电路图、化学结构或复杂技术图纸的可视化。

Obsidian 的 TikZJax 图表绘制

TikZJax 支持在 Obsidian 中使用 LaTeX/TikZ 绘制图表。适用于 Mermaid 缺乏精度的复杂技术绘图：

  • 几何形状和坐标系
  • 需要精确定位的游戏场景
  • 电路图 (circuitikz)
  • 化学结构 (chemfig)
  • 3D 绘图 (tikz-3dplot, pgfplots)
  • 交换图 (tikz-cd)

基本语法

\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}

必需结构：

  • 代码块语言：tikz
  • 必须包含 \begin{document} 和 \end{document}
  • 绘图代码放在 \begin{tikzpicture}...\end{tikzpicture} 内部
  • 推荐：scale=1（更小的值会降低文本可读性）

支持的包

使用 \usepackage{} 加载：

包 用途
tikz 核心绘图（隐式包含）
tikz-cd 交换图
circuitikz 电子电路
pgfplots 数据可视化，绘图
chemfig 化学结构
tikz-3dplot 3D 坐标系
array 表格环境
amsmath 数学排版
amsfonts 数学字体
amssymb 数学符号

TikZ 库

使用 \usetikzlibrary{} 加载：

\usepackage{tikz}
\usetikzlibrary{decorations.pathreplacing}
\usetikzlibrary{arrows.meta}
\usetikzlibrary{calc}
\begin{document}
  % 在此处放置绘图命令
\end{document}

深色模式行为

TikZJax 插件可以在深色模式下自动反转 black ↔ white（可在插件设置中配置）。

文本颜色

在 ode 中省略颜色指定以实现自动主题适配：

% 显式颜色 - 固定，不会适配

ode[black] at (2,0) {标签};

% 无颜色 - 自动适配（推荐）

ode at (2,0) {标签};

黑/白反转

启用深色模式反转时：

  • black 变为 white（反之亦然）
  • 其他命名颜色保持不变
  • \definecolor{} 定义的自定义颜色不会被反转

不支持的功能

功能 状态 替代方案
颜色混合 (blue!30, cyan!20!white) 不支持 仅使用基础颜色
韩语文本 不支持 使用英语
\definecolor{}{RGB}{} 深色模式下不反转 如需反转，请使用命名颜色
\definecolor{}{HTML}{} 深色模式下不反转 如需反转，请使用命名颜色

快速入门示例

带填充的简单矩形

\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);
  
ode at (2,1.5) {内容区域};
\end{tikzpicture}
\end{document}

坐标系

\begin{document}
\begin{tikzpicture}[scale=1]
  % 坐标轴
  \draw[thick, gray, ->] (-0.5,0) -- (4,0) node[right] {$x$};
  \draw[thick, gray, ->] (0,-0.5) -- (0,3) node[above] {$y$};

  % 点
  \fill[red] (2,1.5) circle (3pt) node[above right] {$P(2,1.5)$};

  % 虚线辅助线
  \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}

3D 绘图

\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}

何时使用 TikZJax 与其他工具

用例 工具
流程图、序列图、ER 图 Mermaid
数学函数、交互式图表 Desmos
行内数学、方程 MathJax
精确几何、坐标系 TikZJax
游戏场景、精灵、定位 TikZJax
电路图 TikZJax
化学结构 TikZJax
3D 可视化 TikZJax

参考

完整的语法参考、颜色表和高级示例，请参阅 reference.md。