キャンバスに LaTeX 数式を入力する

このレッスンでは、ツールバーの fx アイコン（Math ツール）の使い方を一通り学びます。LaTeX を入力し、カーソル下に KaTeX のライブプレビューが描画される様子を確認しながら、色とサイズを変更し、SVG または PNG にエクスポートします。書き出したファイルはそのまま論文の図、スライド、Notion ページ、ブログ記事に貼れます。

Math ツールは drawtonomy の無限キャンバスの一機能なので、同じキャンバスにレーン・車両・歩行者を一緒に置けます — 数式を関連図の隣に置きたいときに便利です。ただし、これらの自動運転シェイプは使わなくても構いません。Math ツールは白紙キャンバスでも、独立した数式エディタとして問題なく動きます。

1. Math ツールを選ぶ

drawtonomy.com を開きます。下部ツールバーの fx アイコン（Text の T と Freehand の間）をクリックします。

$Math ツール (fx) が下部ツールバーでアクティブ$

キーボード派の方は / を押すだけでも切り替わります（Notion 風ショートカット）。

2. 数式を置く場所をクリック

キャンバス上の任意の場所をクリックすると、drawtonomy がその場にインライン・エディタを開きます。上半分が LaTeX 入力欄（プレーンテキスト）、下半分が KaTeX のライブプレビューです。プレースホルダとして二次方程式の解の公式が薄く表示されます。

$空の Math エディタ — 上半分が LaTeX 入力欄、下半分がライブプレビュー、プレースホルダ例つき$

下部のキーボードヒント Del: delete · Arrows: move · Esc: deselect は、編集中に使える操作を表示しています。

3. LaTeX を入力する

実際に式を打ってみましょう。まずは古典:

E = mc^2

入力するたびに下のプレビューが即座に再描画されます。「レンダー」ボタンはありません — キーストロークごとにプレビューが更新されます。

$Math エディタで E = mc^2 を入力した状態。下部プレビューに対応する KaTeX 描画$

もう少し大きな式も試します。入力をクリアして二次方程式の解の公式を入力:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\frac \sqrt \pm ^ などはすべて論文と同じように描画されます。

$Math エディタで二次方程式の解の公式。分数・平方根・± がプレビューに描画されている$

Math ツールは KaTeX のサポート関数すべて + 化学式用拡張 mhchem をサポートします — 詳細は Math リファレンスを参照してください。

4. 確定: Esc を押す

Esc を押す（またはエディタの外側をクリック）と編集が確定します。テキストエリアが消え、描画済みの数式だけがキャンバスに残ります。サイズも実寸に合わせて自動調整されます。

$確定後の数式 — レンダリング結果のみがキャンバスに残り、選択枠で囲まれている$

青い枠線は選択ボックスです。何もない場所をクリックすれば選択解除できます。

再編集したいときは、その数式をダブルクリックすればエディタが元の LaTeX で再オープンします。drawtonomy は描画結果ではなく LaTeX ソースを保持しているので、すべての数式は何度でも編集可能です。

5. 色とサイズを変える

数式を選択した状態で右上の Math (LaTeX) パネルを見ます。

Color — スウォッチをクリックして色を変更（紙印刷に安全な黒・グレー、赤・橙・黄・緑・青・紫）。ブランド指定の色がほしいときは More… で全パレットを開く。
Size — スライダーを 8 px（脚注サイズ）から 200 px（ポスター見出しサイズ）まで動かす。数式全体が比例して再スケールされる。

色を赤、サイズを 60 px に変更:

$赤色 60 px に変更した同じ数式。Math (LaTeX) パネルに赤スウォッチと 60 px のスライダー$

6. エクスポート

仕上がったら書き出します。Menu → Export から:

形式	推奨用途
SVG	LaTeX (`\includegraphics`)、Notion、Web サイト、スライド。ベクター、拡大しても綺麗。
PNG	SVG 非対応な場所すべて（Word、一部チャットアプリ）。
PDF	LaTeX ビルドが PDF 図を要求する場合。テキストはパス化されているのでフォント依存なし。
EPS	古い LaTeX ツールチェーン（`latex` + `dvips`）。同じくパス化済み。
.drawtonomy.svg	drawtonomy のネイティブ形式。普通の SVG として開けるうえ、drawtonomy で再オープンして LaTeX ソースを編集可能。

普段使いは SVG と PNG でほぼ事足ります。LaTeX 論文は PDF が最も安定です。

その他にできること

化学式 (mhchem) — \ce{2 H2 + O2 -> 2 H2O} が正規の反応式として描画されます。

$mhchem 化学式のライブプレビュー$
複数行 + 式番号付き — \begin{align} ... \end{align} で論文スタイルの式番号がつきます。大きなサイズでも式本体と式番号 (1)(2)(3) が重ならないように調整されています。

$align 環境で式番号 (1)〜(4) つきのマクスウェル方程式$
長い数式 — textarea は折り返し、プレビューは内部スクロールで対応するので、半ページ分の導出も編集可能です。
Cmd+A → Delete — キャンバス上の全シェイプ（math も含む）を選択して一括削除。
入力欄をドラッグ — 編集中にクリック＆ドラッグ（5 px しきい値）でエディタを移動。位置の調整がしやすくなっています。
Undo / Redo — Cmd+Z / Cmd+Shift+Z。色とサイズ変更は個別の undo ステップで、サイズスライダーのドラッグは 1 ステップにまとめられます。