TikZ EditorはLaTeX図の座標調整をブラウザのドラッグ操作で済ませる
目次
TikZで論文図を作ると、線やノードの位置を少し動かすだけで、座標を書き換えて再コンパイルする往復が増える。
TikZ Editor は、その往復をブラウザ上のキャンバス操作に変えるツールだった。
コードと描画結果を並べ、図形をドラッグするとTikZコード側の座標も変わる。
大きいのは「TikZを書き出せる作図ツール」ではなく、既存のTikZコードを読んで、元の改行やスペースをなるべく保ったまま数値だけ書き換えるところだ。
GitHubのREADMEでも、紙の .tex ファイルを直接開いて中の図を編集できる、と説明している。
SVGやPowerPointをTikZに変換して終わりではなく、論文本文に戻す前提の編集面を作っている。
コード生成ではなく座標の上書きが中心
HNの投稿文では、実装の芯がかなりはっきり書かれていた。
TikZコードをパースし、各オブジェクトが元ソースのどこにあるかを保持する。
ユーザーが図形を動かすと、その座標の数字だけを差し替える。
これができると、既存ファイルのインデントや改行を丸ごと壊さない。
AIや変換ツールに図を作らせると、動くコードは出ても、人間があとで読みにくい整形になることがある。
TikZ Editorの狙いはそこを避けている。
Claude Codeの出力をMarkdownからHTMLに逃がす では、人間が判断する場面だけHTMLの表示面を作る話を書いた。
TikZ Editorも似た割り切りがある。
正本は .tex のTikZコードのまま残し、座標調整の瞬間だけ視覚的なUIを挟む。
既存コードをドラッグできる範囲
README上の対応範囲は広い。
図形、パス、曲線、ツリー、行列ノード、\foreach、色や線種、塗り、変形まで扱う。
出力はSVG、PDF、PNG。
入力はSVG、IPE、PPTXにも対応している。
一方で、全部のTikZ構文を処理できるツールではない。
デコレーション、グラフ、プロットは部分対応で、let 演算のような高度な構文は未実装と書かれている。
研究室や論文テンプレートで凝ったマクロを多用している図なら、最初に小さな図で読み込みを試したほうがいい。
| 対応度 | 構文・要素 |
|---|---|
| フル対応 | 図形、パス、曲線、ツリー、行列ノード、\foreach、色・線種、塗り、変形 |
| 部分対応 | デコレーション、グラフ、プロット |
| 未実装 | let 演算などの高度な構文 |
相対配置の扱いも境界がある。
HNコメントで作者は、既存コードに right of のような相対配置があれば、ドラッグ後も相対配置として編集を続けると説明している。
ただし新しくツールバーから追加した要素は絶対座標になる。
ここはTikZらしい「名前付き座標とアンカーで意味を残す」書き方と、WYSIWYGの「画面上で動かした場所をそのまま保存する」書き方が衝突する場所だ。
別のコメントでは、単純なノード配置でも絶対座標が出ることへの指摘があった。
作者は、整った相対コードへ自動変換すると、ユーザーが期待する挙動を決めるほうが難しくなる、と返している。
たとえば複数図形の下端揃えを押したとき、新しい名前付き座標を勝手に作るのか、既存座標を動かすのか、オフセットを変えるのかは一意に決まらない。
論文図の最後の数ミリを詰める道具
このツールは、TikZを知らない人向けの完全な作図アプリというより、TikZで図を持っている人が最後の位置合わせをする道具として向いている。
既存コードを壊さずに、ノード間の距離、矢印の曲がり、ラベルの逃がし方を画面で詰める。
再コンパイルを待たずに動くなら、図の微調整中の待ち時間が短くなる。
作図の意味をコードに残したい場面では、相対配置や名前付き座標を自分で書いたほうがいい。
あとで別の図に流用するテンプレート、複数要素をパラメータで並べる図、pgfplotsのようなデータ駆動の図は、視覚編集だけで扱うと保守しにくくなる。
逆に、完成直前の論文図で「このラベルを少し右」「矢印をもう少し避ける」みたいな調整なら、絶対座標で残っても困らないことが多い。
SVGで幼児向けウェブ塗り絵を作った話 では、SVGの図形要素に対してUI操作を当てる話を書いた。
SVGはDOM要素を直接触れるので実装が単純だった。
TikZ Editorはその逆で、テキストコードをパースして視覚要素へ戻し、さらに編集結果を元のテキストの一部へ戻す。
同じベクター図形でも、編集対象がDOMかソースコードかで難しさが変わる。
Codexで作った話も残っている
HN投稿では、このアプリはほぼCodexで作ったとも書かれていた。
作者コメントによると、2026年2月から継続して作り、Codex経由で約7億トークンを使ったという。
API料金換算では約15,000ドル、実際の支払いはChatGPTサブスクリプションで約500ドルだった、とも補足している。
宣伝文句に見えるが、実装の中身と並べると数字の大きさが対応する。
TikZの大部分を再実装し、ソース位置を追跡し、SVG・PPTX・IPE変換やLaTeXのハイフネーション、改行、red!20!black の色混合まで追う。
人間が手で全部書くには細かい実装が多い。
もちろん、AIで作ったから品質が保証されるわけではない。
むしろ確認する場所は増える。
README上でも一部構文は未実装で、HNコメントでも絶対座標と相対配置の扱いが議論になっている。
ただ、細かい再実装を押し切った結果として、これまで存在しにくかった「既存TikZコードを視覚的に編集して、元ソースの該当箇所だけ変える」UIが出てきた。