TikZ Editor: LaTeX図向けWYSIWYGエディタ

 (tikz.dev)
1 ポイント 投稿者 GN⁺ 4 시간 전 | 1件のコメント | WhatsAppで共有
  • TikZ Editor v0.4.0は、LaTeXのTikZダイアグラムを直接操作して編集できる無料のMITライセンスのオープンソースアプリで、Webとデスクトップで利用可能
  • 既存のTikZ図や完全な.tex論文ファイルを開いて要素をドラッグすると、TikZコードが即座に更新され、改行・空白など既存の書式は維持される
  • ノード、パス、矢印、図形、行列、\foreachループ、ラベル、ピン、エッジラベルなど、よく使われるTikZ構成要素を視覚的に編集できる
  • ソースエディタは、構文ハイライト、折りたたみ、自動補完、検索、診断、インラインのカラースウォッチ、カラーピッカー、数値スクラビングを提供し、TeXコンパイラなしでエラーを解析する
  • TypeScriptとTauriを基盤に実装されており、TikZコード全体を書き直さず小さなパッチだけを適用して、ユーザーのインデントと改行を保持する

TikZ図を直接操作するエディタ

  • TikZ Editor v0.4.0は、LaTeX向けTikZダイアグラム用のWYSIWYGエディタ
  • 新しい図をゼロから作成することも、既存のTikZ図を編集することもでき、完全な論文.texファイルを開いてその中の画像を修正することも可能
  • 要素を移動するとTikZコードが即座に更新され、既存コードの改行と空白のような書式は崩れない
  • 位置を微調整する際に再コンパイルせず、その場で結果を確認できる
  • アプリは無料のMITライセンスのオープンソースとして公開されており、コードはGitHubにある
  • Webで利用でき、一部の追加機能を含む軽量なデスクトップアプリも提供される

ビジュアル編集とTikZコードの同期

  • 座標を直接修正する代わりに、パスとノードを目的の位置へドラッグするとコードがすぐ更新される
  • 新規要素追加ツールで次の項目を挿入できる
    • 線、矢印、複数区間からなるパス
    • ノード、長方形、円
  • 新しい要素はコード末尾に挿入され、追加後すぐに移動やサイズ調整ができる
  • 角丸やパスの結合にはrounded cornersを適用でき、rounded corners=2ptのように値付きでも使用できる

TikZ向けに最適化されたソースエディタ

  • ソースパネルは現在のソースを常に表示し、TikZ構文ハイライトを提供する
  • スコープの詳細を隠すコード折りたたみに対応
  • マウスオーバーするとTikZマニュアルの関連スニペットを確認できる
  • エラーは何が問題か分かるよう説明付きで強調表示される
    • アプリがTeXコンパイラなしでコードを理解するため実現できる機能
  • ソースビューで直接入力しなくても色と数値を調整できる
    • カラーピッカー対応
    • 数値スクラビング対応

整列、グループ化、複数図の編集

  • スナップ機能により、要素を縦・横に揃えたり等間隔に配置したりできる
  • ルーラー、カスタムガイドライン、ズーム、拡大鏡ツールを提供
  • 複数のオブジェクトを選択してグループ化でき、グループ化はTikZスコープとして実装される
  • 複数選択時には整列や分配などのレイアウト作業が可能
  • 完全な.tex論文ファイルを開くと、アプリ下部の図プレビューで複数のtikzpicture環境を切り替えられる
  • アプリはユーザーの多くのカスタムマクロを理解する

対応するTikZ機能とツール

  • アプリは、慣用的なTikZ図を作れるよう設計されている
  • パスはノードアンカーに接続する形で簡単に描画できる
  • ノードラベル、ピン、エッジラベルの編集に対応
  • 提供ツールは次のとおり
    • Select: オブジェクト移動、サイズ変更、回転、パス編集、複数選択編集
    • Magnify: TeXstudioに似た仮想拡大鏡
    • Node: TikZ \nodeでテキストを追加
    • Shape: shapeライブラリベースのノード追加、ダイヤモンド・多角形・星・雲・矢印などに対応
    • Matrix: 行数と列数を指定してノード行列を挿入
    • Line, Arrow, Bezier, Path, Freehand: 直線、矢印、曲線、複数区間パス、平滑化された自由曲線を作成
    • Grid, Rectangle, Ellipse, Circle: グリッドと基本図形のパスを作成
    • Bucket: 既存の閉じた領域に塗りつぶし色を適用

ファイル、エクスポート、パネル機能

  • ファイルとエクスポート機能には次が含まれる
    • .texと.tikzファイルのオープンと編集
    • SVG、Ipe .ipe、PowerPoint .pptxから図をインポート
    • SVG、PNG、PDF、スタンドアロンLaTeXへエクスポート
    • タブで複数文書を同時に作業
  • 論文と図の編集機能には次が含まれる
    • 複数の図を含む完全な論文を開く
    • サムネイルプレビューで図の間を移動
    • ノード、図形、行列、矢印、パス、曲線、グリッド、長方形、楕円、円を描画
    • 図内のテキストや数式を直接編集
  • 直接編集機能には次が含まれる
    • 移動、サイズ変更、回転、複製、グループ化、整列、分配、反転、順序変更
    • ポイントハンドルによるパス編集
    • 分割・結合、反転、開く・閉じる、角、スムーズポイント命令
    • グリッド、ガイド、オブジェクトポイント、オブジェクト間隔へのスナップ
  • パネル機能には次が含まれる
    • Inspectorで線、塗り、矢印、テキスト、変換、図形、スタイルを編集
    • Objectsパネルでオブジェクト表示/非表示、グループ、名前変更、レイヤー順序を管理
    • Stylesパネルで、ブラウザ開発者ツールのCSS編集に似た形でTikZスタイルを編集

ループ、構造、AI支援

  • Repeatダイアログで、選択範囲を複数行・複数列にコピーする\foreachループを追加できる
  • すでに\foreachを使っている図も開いて編集でき、ネストしたループも含まれる
  • ツリーダイアグラムは子要素追加方式で編集できる
  • 行列は行・列コマンドと転置コマンドで修正可能
  • デスクトップ版でOpenAI Codexがインストールされていれば、アプリ内で図の編集を依頼できる
    • アシスタントはTikZ専用ツール群にアクセスする
    • 利用量はユーザーのChatGPTアカウントから差し引かれる
    • 画像添付を含む編集支援にも対応

内部実装の仕組み

  • アプリはTypeScriptで書かれている
  • デスクトップ版はTauriを使用し、軽量なRustバックエンドを含む
  • 初期コードベースはCodexが3か月かけて作成し、使用されたモデルはgpt-5-3-codex、gpt-5-4、gpt-5-4-mini、gpt-5-5
  • Claudeによる一部の貢献も含まれる
  • TeXコードのパースは非常に難しいが、TikZ Editorは任意のTeX全体ではなく、TikZ図作成でよく使われるコマンドのみをパースする
    • 非常に“hacky”なコードは正しく解釈されない可能性がある
    • 対応範囲はかなり良好で、時間とともに拡大している
  • アプリはTikZコードをパースして内部表現を作り、この表現を使って座標、スタイル、変換、ループ、ノード、パス、テキストを編集可能なシーン要素として解釈する
  • 内部表現は行と文字範囲のタグによって構文入力と密接に結び付いている
  • コード全体を標準形式で書き直さず、小さなパッチで一部だけを変更するため、ユーザーのインデントと改行を忠実に保持できる
  • シーンはSVGでレンダリングされる

レンダリングとコンバータ

  • テキストと数式のレンダリングはMathJaxで処理される
  • 複数行テキストをサポートするため、TeXのハイフネーションアルゴリズムとKnuth-Plass改行アルゴリズムを再実装している
  • この実装により、アプリで表示される複数行テキストは通常、TeXが同じテキストをレンダリングする方法と正確に一致する
  • カスタムカラーピッカーは、RGB色を短いxcolor文字列で表現可能な最も近い色に変換する
    • 例: #409a40はviolet!88!white!45!greenに変換される
    • 関連コードはnpmパッケージxcolor-rgb-convertとして提供される
  • 多様なファイル形式のインポートは、別途開発されたコンバータを基盤としている
  • デスクトップアプリではPowerPointやKeynoteからオブジェクトを直接貼り付けできる
    • Keynote貼り付けはkeynoteクリップボード形式インタプリタを使用し、keynote-clipboard npmパッケージとして提供される
  • デスクトップアプリのAI支援はCodex App Serverを通じて提供される
  • ソースエディタはCodeMirror上に構築されている

関連記事

1件のコメント

 
GN⁺ 4 시간 전
Hacker Newsのコメント

  • 少し使ってみたが、UIはとても素晴らしく、プロジェクト自体も良い。おめでとう
    ただ、生成されるTikZコードはいまひとつだと思う。すべてが絶対座標を使っているが、TikZではそうする必要はほとんどない
    例えばノードを1つ置くだけでも絶対座標が生まれるが、\node {Hello};とだけ書けばTikZが境界ボックスの中央に配置してくれる。テストのように(0.5,2.91)にあると指定する必要はない
    複数のノードを選んで「下揃え」のような機能を使うときも、絶対座標を操作するよりTikZの整列機能、つまりアンカーなどを活用すべきだと思う。こうしたコード生成のほうが難しいのは理解できるが、次のバージョンで検討する価値のある方向かもしれない

    • 良いフィードバックだ。難しい部分はコード生成そのものより、ユーザーが期待する動作を判断することにあると思う
      「下揃え」ボタンを押したとき、
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      のようなコードが突然、任意の名前の\coordinateや相対座標表記に変わったら驚くはずだ
      逆に最初から「きれいな」コードで始めると、アプリは多くの場合ドラッグを許可できない。ドラッグが何を意味するのか分からない、あるいは実際に分からないことが多いからだ。名前付き座標を変えるのか、その座標に対するオフセットを変えるのか、といった問題が生じる
      この議論の別のところでは「right of」のような配置方法についても話しており、良い提案が出ていた: https://news.ycombinator.com/item?id=48647683
    • そういう機能はCADスクリプト言語がどうやっているかを参考にできそうだ

  • 気になる人がいるかもしれないので書いておくと、このプロジェクトは2026年2月から比較的コンスタントに作業してきた
    その間、Codex経由でこのプロジェクトに約7億トークンを使っており、キャッシュ読み取りは除いた数値だ。API料金なら1万5千ドルほどになっていたはずだが、実際に払ったのはChatGPTのサブスク料金として約500ドルだけだった

  • 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

  • すごい。 https://q.uiver.app/も良かったが、https://github.com/varkorが作った、より特化したツールだ

  • とても素晴らしいが、結局出てくるに違いない質問をすると、cetz対応はどれくらい難しいだろうか？
    避けられるならLaTeXには触りたくないし、Typstはいつも使っている

    • コーディングエージェントを使えばかなり可能性はありそうだ
      Typstベースの完全なWYSIWYG、いわゆるバイブコーディングで作られたプレゼンソフトがすでにあり、その一部はまさにそういう機能を実装している
      https://codeberg.org/presenst/presenst

  • 学生のときにこういうものが本当に欲しかった。オープンソースで作ってくれてありがとう
    私の理論計算機科学の教授が、偶然にもTikZを作ったTill Tantauだった。説明も本当に上手い人だった

    • Schleswig-Holsteinの人はどこにでもいる :) Till TantauはLaTeXのプレゼン資料を作るbeamerパッケージも始めた
      beamerとTikZはどちらも科学コミュニケーションへの非常に重要な貢献だ

  • すごい
    みんなが好きなのは分かるが、TikZを直接書くのは本当に嫌いなので、技術的な図の大半はdraw.io/diagrams.netに移してPNGで書き出している。洗練されてはいないが十分によく機能するし、見栄えのいい結果を簡単に作れる。もともとテキストで定義されるものを基本的には好むほうだ
    Markdown内に残す図なら一部はMermaidに移したが、TeXで動かそうとはしていない
    それでも、LaTeXでダイアグラムを描く慣用的な方法はTikZに近いので、WYSIWYGエディタがあれば便利そうだ
    提案を1つすると、矢印をボックスに「くっつけ」られると良い。ボックスを動かすと矢印の端点も一緒に動く方式だ。draw.ioはそう動く

    • テキストノードにはアンカーがあるのでくっつけることはできる。新しい線を描くときや既存の線を動かすときに、緑色の接続点が見えるはずだ
      draw.ioを使うなら、PNGではなくPDFで書き出すことを勧める。そうすればベクターグラフィックのまま保てる
    • draw.ioファイルは.drawio.svgとして保存できなかったっけ？
      何度かダイアグラムをそうやって作って、Computer Modernを使って図が本文と似た見た目になるようにした。それで十分だった

  • 本当に見栄えがいい。始めやすくするために、プリセットをいくつか追加してもよさそうだ。よくあるニューラルネットワーク構成や、TikZの他の利用例のようなもの

    • 良いアイデアだ。File > Open Exampleはすでにあるが、拡張の余地は確かにある。デスクトップ版ではarXiv論文を直接開くこともできる

  • うわ、本当にすごい。TikZダイアグラムを作るためにChatGPTを使ってきたが、正直なところTikZダイアグラム作成は簡単ではなく、うまく作れれば結果は本当にきれいだ
    ただ、ChatGPTにダイアグラムを細かく修正させるのは難しいこともある。TikZの文法や動作についての自分の知識が、欲しい結果を得るのに十分なほど精密でないことがあるからだ。だからこのツールがその答えのように見える。試してみるのが楽しみだ
    ちなみにブログ用のLaTeX文書もChatGPTで作ってサーバー側でレンダリングしている。そのワークフローはとてもうまく合っている