AI・生成AI

【AI時代の図形】数学・学術系2選 — TikZ・KaTeX/MathJax徹底比較

【AI時代の図形】数学・学術系2選 — TikZ・KaTeX/MathJax徹底比較

当サイトを閲覧いただきありがとうございます。本記事はAI時代にコード管理できる図形シリーズの第8回として、数学・学術系2種を比較解説します。シリーズ全体の一覧は完全ガイドをご覧ください。

学術論文や教科書で使われる図形・数式ツールは、ソフトウェア開発向けのダイアグラムツールとはだいぶ毛色が違います。求められるのは出版品質の出力、数式との統合、数学的な正確さです。

なお、KaTeX/MathJaxは厳密にはダイアグラムツールではないのですが、「テキストから視覚表現を生成する」という意味ではシリーズのテーマに合っているので併せて紹介します。

AI時代において、数式生成はAIが得意とするタスクの一つです。「この微分方程式をLaTeXで」「この損失関数を数式で書いて」といった依頼に対して高い精度で出力が返ってきます。論文執筆やブログでの数式表現を手動で書く必要はほとんどなく、AIに任せてKaTeX/MathJaxでレンダリングするのが効率的です。TikZについても、AIが構造的なコードを生成してくれるおかげで学習曲線の急さが緩和されています。

2種比較表

名称記法AI相性描けるもの特長
TikZ/PGFLaTeX学術論文品質のあらゆる図LaTeX環境の世界標準。分野別の専用ライブラリが膨大
KaTeX/MathJaxLaTeXWeb上の数式AIが高い精度で生成できる

TikZ/PGF — 学術品質の世界標準

TikZ/PGFはLaTeX環境で高品質なベクター図を描画するパッケージで、学術論文・教科書・技術書の図として世界標準の地位を築いています。

\foreach ループや条件分岐を使ったプログラマティックな描画が可能で、circuitikz(回路図)、pgfplots(グラフ)、forest(ツリー)など分野特化の膨大なライブラリがあります。

サンプル:ニューラルネットワーク

TikZによるニューラルネットワークの出力例

TikZ(pgfplots)による関数グラフの出力例

\begin{tikzpicture}[
  neuron/.style={circle, draw, minimum size=1cm, fill=blue!20},
  input/.style={neuron, fill=green!20},
  output/.style={neuron, fill=red!20}
]
\foreach \i in {1,...,3}
  \node[input] (i\i) at (0, -\i*1.5) {$x_\i$};
\foreach \j in {1,...,4}
  \node[neuron] (h\j) at (3, -\j*1.2+0.3) {$h_\j$};
\foreach \k in {1,...,2}
  \node[output] (o\k) at (6, -\k*1.5-0.5) {$y_\k$};
\foreach \i in {1,...,3}
  \foreach \j in {1,...,4}
    \draw[->] (i\i) -- (h\j);
\foreach \j in {1,...,4}
  \foreach \k in {1,...,2}
    \draw[->] (h\j) -- (o\k);
\end{tikzpicture}

サンプル:関数グラフ(pgfplots)

\begin{tikzpicture}
\begin{axis}[
  xlabel={$x$}, ylabel={$f(x)$},
  grid=major, legend pos=north west
]
\addplot[blue, thick, domain=-3:3, samples=100] {exp(-x^2)};
\addlegendentry{$e^{-x^2}$}
\addplot[red, thick, domain=-3:3, samples=100] {1/(1+exp(-x))};
\addlegendentry{$\sigma(x)$}
\end{axis}
\end{tikzpicture}

メリット・デメリット

学習曲線はかなり急で、LaTeXの知識が前提です。コンパイルも遅く、1つの図を仕上げるのにビルド→確認を何往復もすることになります。Web環境での利用も限定的です。

それでも学術分野でTikZが使われ続けるのは、フォント・スタイルがLaTeX文書と完全に統一された学術品質の図が出るからです。circuitikz(回路図)、pgfplots(グラフ)、forest(ツリー)など分野特化のライブラリが膨大にあり、やりたいことは大体誰かがパッケージを作ってくれています。論文の図に使うなら、今でも第一選択肢です。

AIとの相性

TeX StackExchangeの膨大なQ&Aと学術論文のおかげで、LLMの学習データにTikZコードが大量に含まれています。「ニューラルネットワークの図をTikZで描いて」と依頼すると、\foreach ループを使った構造的なコードが出力され、コンパイルも通ることが多いです。

ただし、必要なパッケージの \usepackage 宣言が抜けていることがあるので、コンパイルエラーが出たらまずそこを確認してみてください。pgfplotsのような定番パッケージなら問題ないですが、マイナーなライブラリだと構文が怪しくなることもあります。

KaTeX / MathJax — Web上の数式レンダリング

KaTeXとMathJaxは、LaTeX記法で書かれた数式をWeb上で美しくレンダリングするライブラリです。GitHub、Obsidian、Notion、Jupyter Notebookなど多くのツールで標準サポートされています。

項目KaTeXMathJax
表示速度速いやや遅い
対応する数式の範囲主要なLaTeX数式ほぼ全てのLaTeX数式 + 他の記法
読み込みサイズ軽量やや重い
開発元Khan AcademyMathJax Consortium

速度重視ならKaTeX、互換性重視ならMathJaxという使い分けです。

サンプル

% 二次方程式の解の公式
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

% オイラーの恒等式
e^{i\pi} + 1 = 0

% ニューラルネットワークの損失関数
\mathcal{L} = -\frac{1}{N} \sum_{i=1}^{N} \left[ y_i \log(\hat{y}_i) + (1 - y_i) \log(1 - \hat{y}_i) \right]

メリット・デメリット

GitHub、Obsidian、Notion、Jupyter Notebook — 今やどこでもLaTeX数式が使えるのは、KaTeXとMathJaxのおかげです。Web上の数式表現としては事実上の標準で、LaTeX記法という広く知られたフォーマットで書けるのでGit管理も自然にできます。

数式レンダリング専用なので図形は一切描けませんが、そもそも目的が違うので「デメリット」というよりは「守備範囲の違い」です。速度重視ならKaTeX、対応記法の広さ重視ならMathJaxと使い分ければ、数式に関してはこの2つで十分カバーできます。

AIとの相性

LaTeX数式の生成はLLMが高い精度で出力できるタスクです。「この微分方程式をLaTeXで書いて」のような依頼は正確な出力が得られることが多いです。数学論文や教科書のLaTeXソースが学習データに多く含まれているためでしょう。私も数式を書く必要があるときはAIに任せています。

選定ガイド

あなたの状況おすすめ
学術論文に図を入れたいTikZ
Web上で数式を表示したいKaTeX(速度重視)/ MathJax(互換性重視)
AIに数式を生成させたいKaTeX/MathJax
AIに学術品質の図を生成させたいTikZ

実践Tips:AIにTikZを生成させるときのポイント

TikZのコード生成をAIに依頼する際、精度を上げるコツがあります。

  • 使いたいライブラリを明示する「pgfplotsで」「circuitikzで」のようにパッケージ名を指定する
  • 完全なコンパイル可能なコードを要求する「\documentclassから\end{document}までの完全なコードで」と指示すると、\usepackage の抜けが防げる
  • Overleafで即確認する:OverleafにAI出力を貼り付ければ、ローカル環境なしでコンパイル結果を確認できる

特にOverleafとの組み合わせは強力で、AIが生成したTikZコードをOverleafに貼り付けてコンパイル → 修正点をAIにフィードバックというループを回すことで、LaTeX環境をローカルに構築しなくても高品質な図を仕上げられます。

導入方法

TikZ

LaTeX環境(TeX Live、MiKTeX等)に標準搭載されています。Overleafならインストール不要です。

KaTeX / MathJax

<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>

<!-- MathJax -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

この記事に関連する記事

まとめ

本記事ではAI時代のコード管理図形として、数学・学術系2種を比較解説しました。如何だったでしょうか。

学術品質の図を描くならTikZが今でも世界標準で、当面はこの地位が揺らぐことはないと思います。Web上の数式ならKaTeX/MathJaxが事実上の標準です。

AIとの相性で言えばKaTeX/MathJax(LaTeX数式)の精度が高く、LLMが得意とするタスクの一つです。TikZもTeX StackExchangeの膨大なデータのおかげで高い生成精度が期待できます。

次回はシリーズ最終回として、全種を横断的に比較するまとめ記事をお届けします。

シリーズ目次 → 『AI時代の図形』完全ガイド

各ツールの詳細は公式サイトも参考にしてください:TikZ / KaTeX / MathJax

それでは次の記事も閲覧いただけると幸いです。