【脱・座標調整地獄】LaTeXの図作成を爆速化するWYSIWYGエディタ「TikZ Editor」を公開しました

皆さん、こんにちは！論文執筆で図を描く際に使われるLaTeXパッケージ「TikZ」ですが、\draw[->] (0,0) -- (1,2); のようなコードを書いて図を作るのは、座標合わせや再コンパイルの繰り返しで非常に手間がかかりますよね。いわば「SVGのコード版」とも言える存在ですが、\foreachのようなループ処理まで扱える強力な反面、直感的な操作とは程遠いものでした。そこで、TikZのソースコードを視覚的に編集できるオープンソースのWYSIWYGエディタ（Web/デスクトップ対応）を開発しました。要素をドラッグ＆リサイズするだけでコードも自動反映され、ソースとプレビューがリアルタイムで同期します。コードとWYSIWYGをこれほど完璧に両立させたエディタは、他にはなかなかないはずです。このアプリの肝は、TikZコードをパースして各オブジェクトのソース上の位置を完全にトラッキングしている点です。これにより、ユーザーがドラッグして座標を動かしても、インデントや改行を維持したまま、該当する数値だけをピンポイントで書き換えることができます。実はこの実装には、TikZの大部分を再実装するという途方もない作業が必要でした。しかし、こうした「人間がやるにはあまりに退屈すぎる作業」こそ、現在のコーディングエージェントの力を借りる絶好のチャンスです。（ちなみに、このアプリのほぼ全てはCodexを使って構築しました）。SVG/pptx/ipeからTikZへの変換機能や、LaTeXのハイフネーションアルゴリズムの再実装、さらには red!20!black といった独特な色指定に対応したカラーピッカーなど、開発は非常にエキサイティングな「サイドクエスト」の連続でした。ぜひ使ってみてください！

めちゃくちゃいいじゃん。でも、避けては通れないことを言わせてもらうよ...cetzのサポートってどれくらい難しいの？LaTeXは極力触りたくないけど、Typstはいつも使ってるんだ。

学生時代、こういうのが本当に欲しかったんだよ。オープンソースにしてくれてありがとう。僕がいた頃の理論計算機科学の教授が、たまたまTikZの生みの親であるTill Tantauだったんだ。彼は教え方も素晴らしい人だったよ。

いいね！https://github.com/varkor による https://q.uiver.app/ も愛用してるよ。もう少し専門的なツールだけどね。

すごく良さそう。使い始めやすいように、一般的なニューラルネットワークのアーキテクチャとか、TikZの他のユースケースのプリセットを追加してみたらどうかな。

CircuitiTikZいいよね。シンプルでテキストベースの回路図を描くならこれ一択。https://ctan.org/pkg/circuitikz?lang=en https://github.com/circuitikz/circuitikz 数年前に asciidoctor-diagram と組み合わせて、Asciidocで書いた整備マニュアルに簡易回路図を入れられるようにしたんだ。技術スタッフからも大好評だったし、PDMやERPが管理する悪夢みたいなシステムじゃなくて、Gitでバージョン管理しながら共同作業できたのが最高だった。すでに優秀な WireViz (https://github.com/wireviz/WireViz) を補完するすごくいいツールだよ。

少し触ってみたよ。UIはすごくかっこいいし、プロジェクト自体もクールでおめでとう！ただ、生成されるTikZのコードは正直あまり良くないかな。すべてが絶対座標で書かれているけど、TikZでそれが必要になることはめったにないからね。例えば、ノードを1つ配置するだけで絶対座標が指定されるのはなぜ？普通に \node {Hello}; と書けば、TikZが勝手にバウンディングボックスの中心に配置してくれるのに。わざわざ (0.5,2.91) なんて指定する必要はないでしょ。あと、複数ノードを選択した時の「下揃え」みたいな機能も、TikZ本来のアライメント機能（アンカーなど）を使わずに、絶対座標を直接いじってるみたいだし。こういうコードを自動生成するのが難しいのはわかるけど、次期バージョンの課題にしてもいいんじゃないかな。

これいいじゃん！みんな好きみたいだけど、僕はTikZを手書きするのが大嫌いでね。結局、技術的な図解のほとんどは draw.io/diagrams.net に移行して、PNGで書き出してるくらいさ。不格好だとは思うけど、それなりに綺麗に作れるし十分機能するからね。基本的には「テキストで図を定義する」というアプローチは大好きなんだけど。Markdownで書く時はMermaidを使うこともあるけど、TeXで動かすところまではやってないな。とはいえ、LaTeXで図を作るならやっぱりTikZが定石だし、WYSIWYGが使えるなら興味あるな。1つ提案なんだけど、矢印がボックスに「吸着」するようにしてほしい。ボックスを動かしたら矢印の端点も一緒に動くような、draw.ioみたいな挙動ね。

わあ、素晴らしいプロジェクト！コードを少し覗いてみたんだけど（サイトの下の方に書かれている通りコーディングエージェントを使って作られたと知る前に）、本当にしっかり作られてるね。アーキテクチャの観点からどうアプローチしたのかすごく気になる。エージェントが自律的にコードを構成したのか、それともかなり手動で誘導したのかも興味があるよ（自分も antigravity cli で Gemini Flash を少し試したくらいで、この分野には少し疎いんだ）。あと、実際のTikZコードとのレンダリングの一致をどうやって担保してるの？LaTeXでレンダリングしたものと、自前のJSパイプラインでレンダリングしたものを比較して差分をチェックするようなテストがあったりするのかな？

興味がある人向けに言うと、このプロジェクトには2026年2月からずっと継続的に取り組んでるんだ。その間、Codex経由で約7億トークン分消費したよ（キャッシュ読み込みは含まず）。APIレートで計算すると1万5000ドル相当になるけど、実際はChatGPTのサブスク料金で500ドルくらいしか払ってないな。

AppleがPagesにこういう機能を組み込んでくれたら最高なんだけどな。