TikZ Editor: Editor WYSIWYG untuk gambar LaTeX

 (tikz.dev)
1 poin oleh GN⁺ 5 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • TikZ Editor v0.4.0 adalah aplikasi open source gratis berlisensi MIT untuk mengedit diagram TikZ di LaTeX dengan memanipulasinya secara langsung, dan dapat digunakan di web maupun desktop
  • Gambar TikZ yang sudah ada atau seluruh file makalah .tex dapat dibuka, lalu saat elemen diseret, kode TikZ langsung diperbarui sambil tetap mempertahankan format yang sudah ada seperti pergantian baris dan spasi
  • Berbagai komponen TikZ yang sering digunakan dapat diedit secara visual, termasuk node, path, panah, bentuk, matriks, loop \foreach, label, pin, dan edge label
  • Editor sumber menyediakan penyorotan sintaks, pelipatan kode, pelengkapan otomatis, pencarian, diagnostik, swatch warna inline, pemilih warna, dan scrubbing angka, serta menganalisis kesalahan tanpa compiler TeX
  • Dibangun dengan TypeScript dan Tauri, serta menerapkan patch kecil alih-alih menulis ulang seluruh kode TikZ sehingga indentasi dan pergantian baris pengguna tetap terjaga

Editor untuk memanipulasi gambar TikZ secara langsung

  • TikZ Editor v0.4.0 adalah editor WYSIWYG untuk diagram TikZ di LaTeX
  • Bisa digunakan untuk membuat gambar baru dari nol atau mengedit gambar TikZ yang sudah ada, dan juga dapat membuka seluruh file makalah .tex untuk memodifikasi gambar di dalamnya
  • Saat elemen dipindahkan, kode TikZ langsung diperbarui, dan format seperti pergantian baris dan spasi pada kode yang sudah ada tidak berantakan
  • Saat menyetel posisi secara halus, hasilnya bisa langsung dilihat tanpa perlu kompilasi ulang
  • Aplikasi ini dirilis sebagai open source gratis berlisensi MIT, dan kodenya tersedia di GitHub
  • Tersedia untuk digunakan di web, dan juga ada aplikasi desktop ringan dengan beberapa fitur tambahan

Sinkronisasi antara pengeditan visual dan kode TikZ

  • Alih-alih mengubah koordinat secara langsung, cukup seret path dan node ke posisi yang diinginkan maka kodenya akan langsung diperbarui
  • Dengan alat penambahan elemen baru, item berikut bisa disisipkan
    • garis, panah, path dengan beberapa segmen
    • node, persegi panjang, lingkaran
  • Elemen baru disisipkan di akhir kode, dan setelah ditambahkan bisa langsung dipindahkan atau diubah ukurannya
  • Untuk sudut membulat dan sambungan path, rounded corners dapat diterapkan, dan bisa digunakan bersama nilai seperti rounded corners=2pt

Editor sumber yang disesuaikan untuk TikZ

  • Panel sumber selalu menampilkan sumber saat ini dan menyediakan penyorotan sintaks TikZ
  • Mendukung pelipatan kode untuk menyembunyikan detail scope
  • Saat kursor diarahkan, cuplikan terkait dari manual TikZ dapat dilihat
  • Kesalahan ditandai beserta penjelasannya agar jelas apa yang salah
    • Fitur ini dimungkinkan karena aplikasi memahami kode tanpa compiler TeX
  • Warna dan angka dapat disesuaikan tanpa harus mengetik langsung di tampilan sumber
    • dukungan pemilih warna
    • dukungan scrubbing angka

Perataan, pengelompokan, dan pengeditan banyak gambar

  • Dengan fitur snap, elemen dapat disejajarkan secara vertikal atau horizontal, atau ditempatkan dengan jarak yang sama
  • Menyediakan penggaris, guideline kustom, zoom, dan alat kaca pembesar
  • Beberapa objek dapat dipilih lalu dikelompokkan, dan pengelompokan diimplementasikan sebagai scope TikZ
  • Dalam kondisi multi-select, pekerjaan layout seperti perataan dan distribusi dapat dilakukan
  • Saat membuka seluruh file makalah .tex, pratinjau gambar di bagian bawah aplikasi memungkinkan perpindahan antar lingkungan tikzpicture
  • Aplikasi memahami banyak macro kustom milik pengguna

Fitur dan alat TikZ yang didukung

  • Aplikasi ini dirancang agar bisa membuat gambar TikZ yang idiomatis
  • Path dapat digambar dengan mudah agar menempel pada anchor node
  • Mendukung pengeditan label node, pin, dan edge label
  • Alat yang tersedia meliputi
    • Select: memindahkan objek, mengubah ukuran, memutar, mengedit path, mengedit multi-select
    • Magnify: kaca pembesar virtual mirip TeXstudio
    • Node: menambahkan teks dengan TikZ \node
    • Shape: menambahkan node berbasis library shape, mendukung berlian, poligon, bintang, awan, panah, dan lainnya
    • Matrix: menyisipkan matriks node dengan menentukan jumlah baris dan kolom
    • Line, Arrow, Bezier, Path, Freehand: membuat garis lurus, panah, kurva, path multi-segmen, dan kurva bebas yang dihaluskan
    • Grid, Rectangle, Ellipse, Circle: membuat path grid dan bentuk dasar
    • Bucket: menerapkan warna isi ke area tertutup yang sudah ada

Fitur file, ekspor, dan panel

  • Fitur file dan ekspor mencakup
    • membuka dan mengedit file .tex dan .tikz
    • mengimpor gambar dari SVG, Ipe .ipe, dan PowerPoint .pptx
    • mengekspor ke SVG, PNG, PDF, dan LaTeX mandiri
    • mengerjakan beberapa dokumen sekaligus dengan tab
  • Fitur pengeditan makalah dan gambar mencakup
    • membuka seluruh makalah dengan banyak gambar
    • berpindah antar gambar dengan pratinjau thumbnail
    • menggambar node, shape, matriks, panah, path, kurva, grid, persegi panjang, elips, dan lingkaran
    • mengedit langsung teks dan rumus di dalam gambar
  • Fitur pengeditan langsung mencakup
    • memindahkan, mengubah ukuran, memutar, menduplikasi, mengelompokkan, meratakan, mendistribusikan, membalik, dan mengubah urutan
    • mengedit path dengan point handle
    • perintah memisah/menggabung, membalik arah, membuka/menutup, corner, smooth point
    • snap ke grid, guide, titik objek, dan jarak antar objek
  • Fitur panel mencakup
    • mengedit garis, isi, panah, teks, transformasi, shape, dan style di Inspector
    • mengelola visibilitas objek, grup, penggantian nama, dan urutan layer di panel Objects
    • mengedit style TikZ di panel Styles, mirip pengeditan CSS di alat pengembang browser

Loop, struktur, dan bantuan AI

  • Melalui dialog Repeat, loop \foreach dapat ditambahkan untuk menyalin area terpilih ke beberapa baris dan kolom
  • Gambar yang sudah menggunakan \foreach juga dapat dibuka dan diedit, termasuk loop bertingkat
  • Diagram pohon dapat diedit dengan cara menambahkan child
  • Matriks dapat dimodifikasi dengan perintah baris/kolom dan perintah transpose
  • Jika OpenAI Codex terpasang pada versi desktop, pengeditan gambar dapat diminta dari dalam aplikasi
    • asisten memiliki akses ke beberapa alat khusus TikZ
    • penggunaan akan dipotong dari akun ChatGPT pengguna
    • bantuan pengeditan dengan lampiran gambar juga didukung

Cara implementasi internal

  • Aplikasi ini ditulis dengan TypeScript
  • Versi desktop menggunakan Tauri dan menyertakan backend Rust yang ringan
  • Codebase awal ditulis oleh Codex selama 3 bulan, dengan model yang digunakan yaitu gpt-5-3-codex, gpt-5-4, gpt-5-4-mini, dan gpt-5-5
  • Juga mencakup sebagian kontribusi dari Claude
  • Parsing kode TeX sangat sulit, tetapi TikZ Editor tidak mem-parsing seluruh TeX arbitrer, melainkan hanya perintah yang sering digunakan untuk membuat gambar TikZ
    • kode yang sangat “hacky” mungkin tidak diinterpretasikan dengan benar
    • cakupan dukungannya sudah cukup baik dan terus bertambah seiring waktu
  • Aplikasi mem-parsing kode TikZ untuk membuat representasi internal, lalu dari representasi ini menafsirkan koordinat, style, transformasi, loop, node, path, dan teks menjadi elemen scene yang bisa diedit
  • Representasi internal terhubung erat dengan input sintaks melalui tag rentang baris dan karakter
  • Karena yang diubah hanya sebagian kecil dengan patch kecil, bukan menulis ulang seluruh kode ke format standar, aplikasi dapat menjaga indentasi dan pergantian baris pengguna dengan sangat setia
  • Scene dirender sebagai SVG

Rendering dan konverter

  • Rendering teks dan rumus ditangani oleh MathJax
  • Untuk mendukung teks multi-baris, algoritme hyphenation TeX dan algoritme line breaking Knuth-Plass diimplementasikan ulang
  • Berkat implementasi ini, teks multi-baris yang terlihat di aplikasi umumnya persis cocok dengan cara TeX merender teks yang sama
  • Pemilih warna kustom mengubah warna RGB ke warna terdekat yang bisa direpresentasikan sebagai string xcolor pendek
    • contoh: #409a40 diubah menjadi violet!88!white!45!green
    • kode terkait disediakan sebagai paket npm xcolor-rgb-convert
  • Impor berbagai format file didasarkan pada konverter yang dikembangkan terpisah
  • Aplikasi desktop dapat langsung menempelkan objek dari PowerPoint dan Keynote
    • Penempelan dari Keynote menggunakan interpreter format clipboard keynote, dan tersedia sebagai paket npm keynote-clipboard
  • Dukungan AI di aplikasi desktop disediakan melalui Codex App Server
  • Editor sumber dibangun di atas CodeMirror

Bacaan terkait

1 komentar

 
GN⁺ 5 jam lalu
Komentar Hacker News

  • Saya sempat mencobanya sedikit, dan UI-nya sangat bagus, begitu juga proyeknya secara keseluruhan. Selamat
    Tapi menurut saya kode TikZ yang dihasilkan kurang bagus. Semua hal memakai koordinat absolut, padahal di TikZ hampir tidak pernah perlu begitu
    Misalnya, bahkan kalau hanya menaruh satu node saja, koordinat absolut tetap dibuat, padahal cukup menulis \node {Hello}; dan TikZ akan menempatkannya di tengah bounding box. Tidak perlu menentukan bahwa posisinya di (0.5,2.91) seperti untuk pengujian
    Bahkan saat memilih beberapa node lalu memakai fitur seperti “align bottom”, menurut saya sebaiknya memanfaatkan fitur perataan TikZ, yaitu anchor dan semacamnya, alih-alih memanipulasi koordinat absolut. Saya paham menghasilkan kode seperti itu lebih sulit, tetapi ini bisa jadi arah yang layak dipertimbangkan untuk versi berikutnya

    • Masukan yang bagus. Menurut saya bagian sulitnya bukan pada pembuatan kode itu sendiri, melainkan dalam menentukan perilaku yang diharapkan pengguna
      Saat menekan tombol “align bottom”
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      jika kode seperti ini tiba-tiba berubah menjadi \coordinate dengan nama acak dan notasi koordinat relatif, rasanya orang akan kaget
      Sebaliknya, jika sejak awal dimulai dengan kode yang “cantik”, dalam banyak kasus aplikasi tidak akan bisa mengizinkan drag. Soalnya sering kali tidak jelas drag itu seharusnya berarti apa, atau memang tidak mungkin diketahui. Misalnya, apakah yang diubah adalah koordinat bernama itu, atau offset terhadap koordinat tersebut
      Di bagian lain diskusi ini juga dibahas metode penempatan seperti “right of”, dan ada beberapa saran bagus: https://news.ycombinator.com/item?id=48647683
    • Untuk fitur seperti itu, mungkin bisa melihat bagaimana bahasa skrip CAD menanganinya

  • Kalau ada yang penasaran, proyek ini sudah dikerjakan cukup konsisten sejak Februari 2026
    Selama itu saya menghabiskan sekitar 700 juta token untuk proyek ini lewat Codex, dan itu belum termasuk cache read. Kalau dihitung dengan tarif API mungkin sekitar 15 ribu dolar, tetapi kenyataannya saya hanya membayar sekitar 500 dolar lewat langganan ChatGPT

  • Saya sangat suka CircuitiTikZ. Ini nyaris satu-satunya cara untuk menggambar diagram rangkaian berbasis teks yang sederhana
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Beberapa tahun lalu saya menghubungkannya dengan asciidoctor-diagram supaya bisa memasukkan rangkaian sederhana ke manual perawatan Asciidoc. Para teknisi lapangan benar-benar menyukainya, dan kami bisa berkolaborasi di dalam ekosistem kontrol versi Git alih-alih memakai alat-alat neraka yang dilemparkan PDM/ERP
    Ini juga pelengkap yang sangat bagus untuk WireViz yang memang sudah luar biasa: https://github.com/wireviz/WireViz

  • Keren. https://q.uiver.app/ juga bagus, meski itu alat yang lebih khusus buatan https://github.com/varkor

  • Sangat keren, tapi kalau boleh mengajukan pertanyaan yang pada akhirnya pasti muncul: seberapa sulit dukungan cetz?
    Kalau bisa dihindari, saya tidak ingin menyentuh LaTeX, dan saya selalu memakai Typst

    • Kalau memakai coding agent, sepertinya cukup memungkinkan
      Sudah ada perangkat lunak presentasi WYSIWYG penuh berbasis Typst yang dibuat dengan vibe coding, dan beberapa di antaranya memang mengimplementasikan fungsi seperti itu
      https://codeberg.org/presenst/presenst

  • Sewaktu jadi mahasiswa saya benar-benar menginginkan hal seperti ini. Terima kasih sudah membuatnya open source
    Profesor teori ilmu komputer saya kebetulan adalah Till Tantau, pencipta TikZ. Beliau juga sangat pandai menjelaskan

    • Orang Schleswig-Holstein ada di mana-mana :) Till Tantau juga memulai paket beamer untuk membuat materi presentasi LaTeX
      beamer dan TikZ sama-sama kontribusi yang sangat penting bagi komunikasi ilmiah

  • Keren
    Saya tahu banyak orang menyukainya, tetapi saya benar-benar tidak suka menulis TikZ secara langsung, jadi kebanyakan ilustrasi teknis saya pindahkan ke draw.io/diagrams.net lalu diekspor sebagai PNG. Memang tidak terlalu elegan, tetapi cukup bekerja dengan baik, dan mudah menghasilkan sesuatu yang terlihat lumayan bagus. Secara umum saya biasanya lebih suka hal-hal yang didefinisikan dalam teks
    Kalau gambarnya akan tetap berada di dalam Markdown, sebagian saya pindahkan ke Mermaid, tetapi saya belum mencoba membuatnya berjalan di TeX
    Tetap saja, karena cara idiomatis untuk menggambar diagram di LaTeX memang dekat dengan TikZ, editor WYSIWYG seperti ini tampaknya akan berguna
    Satu usulan: akan bagus jika panah bisa “menempel” ke kotak. Jadi kalau kotaknya dipindahkan, titik ujung panah ikut bergerak. draw.io bekerja seperti itu

    • Untuk node teks ada anchor, jadi fitur menempel memang berfungsi. Saat menggambar garis baru atau memindahkan garis yang sudah ada, Anda akan melihat titik koneksi berwarna hijau
      Kalau memakai draw.io, saya sarankan mengekspor ke PDF alih-alih PNG. Dengan begitu tetap menjadi grafik vektor
    • Bukankah file draw.io bisa disimpan sebagai .drawio.svg?
      Saya pernah membuat beberapa diagram seperti itu, lalu memakai Computer Modern agar gambarnya terlihat mirip dengan teks utama. Bagi saya itu sudah cukup

  • Benar-benar enak dilihat. Mungkin bagus kalau ditambahkan beberapa preset agar lebih mudah memulai. Misalnya arsitektur jaringan saraf yang umum atau use case TikZ lainnya

    • Ide bagus. Memang sudah ada File > Open Example, tetapi jelas masih ada ruang untuk diperluas. Di desktop bahkan bisa langsung membuka makalah arXiv

  • Wah, ini benar-benar luar biasa. Saya selama ini memakai ChatGPT untuk membuat diagram TikZ, dan terus terang membuat diagram TikZ itu tidak mudah, meskipun kalau berhasil hasilnya memang sangat indah
    Tetapi menyuruh ChatGPT melakukan penyesuaian detail pada diagram juga sulit. Pengetahuan saya tentang sintaks dan perilaku TikZ tidak selalu cukup rinci, jadi kadang sulit mendapatkan hasil yang saya inginkan. Karena itu alat ini terlihat seperti jawabannya. Saya tidak sabar untuk mencobanya
    Sebagai referensi, saya juga membuat dokumen LaTeX untuk blog dengan ChatGPT lalu merendernya di sisi server. Alur kerja itu sangat cocok