TikZ Editor: LaTeX çizimleri için WYSIWYG düzenleyici

 (tikz.dev)
1 puan yazan GN⁺ 4 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • TikZ Editor v0.4.0, LaTeX’in TikZ diyagramlarını doğrudan manipüle ederek düzenlemeye yarayan, ücretsiz MIT lisanslı açık kaynak bir uygulama; web ve masaüstünde kullanılabiliyor
  • Mevcut TikZ çizimlerini veya tüm .tex makale dosyalarını açıp öğeleri sürüklediğinizde TikZ kodu anında güncelleniyor ve satır sonlarıyla boşluklar gibi mevcut biçim korunuyor
  • Düğümler, yollar, oklar, şekiller, matrisler, \foreach döngüleri, etiketler, pinler ve kenar etiketleri gibi sık kullanılan TikZ bileşenleri görsel olarak düzenlenebiliyor
  • Kaynak düzenleyici; sözdizimi vurgulama, katlama, otomatik tamamlama, arama, tanılama, satır içi renk örnekleri, renk seçici ve sayı sürükleme desteği sunuyor; ayrıca TeX derleyicisi olmadan hataları analiz ediyor
  • TypeScript ve Tauri tabanlı olarak geliştirildi; tüm TikZ kodunu yeniden yazmak yerine yalnızca küçük yamalar uygulayarak kullanıcının girintilerini ve satır sonlarını koruyor

TikZ çizimlerini doğrudan manipüle eden düzenleyici

  • TikZ Editor v0.4.0, LaTeX için TikZ diyagramlarına yönelik bir WYSIWYG düzenleyicidir
  • Sıfırdan yeni çizimler oluşturabilir veya mevcut TikZ çizimlerini düzenleyebilir; ayrıca tüm bir makale .tex dosyasını açıp içindeki görselleri değiştirebilirsiniz
  • Öğeleri taşıdığınızda TikZ kodu anında güncellenir ve mevcut koddaki satır sonları ve boşluklar gibi biçim bozulmaz
  • Konumu ince ayarlarken yeniden derleme yapmadan sonucu hemen görebilirsiniz
  • Uygulama, ücretsiz MIT lisanslı açık kaynak olarak sunuluyor ve kodları GitHub üzerinde yer alıyor
  • Web’de kullanılabiliyor; ayrıca bazı ek özellikler içeren hafif bir masaüstü uygulaması da sunuluyor

Görsel düzenleme ile TikZ kodunun senkronizasyonu

  • Koordinatları elle düzeltmek yerine yolları ve düğümleri istediğiniz konuma sürüklediğinizde kod hemen güncellenir
  • Yeni öğe ekleme araçlarıyla şunlar eklenebilir
    • Çizgiler, oklar, çok bölümlü yollar
    • Düğümler, dikdörtgenler, daireler
  • Yeni öğeler kodun sonuna eklenir; ekledikten sonra hemen taşınabilir veya boyutları ayarlanabilir
  • Yuvarlatılmış köşeler ve yol birleşimleri için rounded corners uygulanabilir; rounded corners=2pt gibi bir değerle de kullanılabilir

TikZ’e uyarlanmış kaynak düzenleyici

  • Kaynak paneli mevcut kaynağı her zaman gösterir ve TikZ sözdizimi vurgulaması sunar
  • Scope ayrıntılarını gizlemek için kod katlamayı destekler
  • Üzerine gelindiğinde TikZ kılavuzundaki ilgili snippet’ler görülebilir
  • Hatalar, neyin yanlış olduğunu anlamayı sağlayacak açıklamalarla birlikte vurgulanır
    • Bu, uygulamanın TeX derleyicisi olmadan kodu anlayabilmesi sayesinde mümkündür
  • Renkler ve sayılar, kaynak görünümünde doğrudan yazmadan da ayarlanabilir
    • Renk seçici desteği
    • Sayı sürükleme desteği

Hizalama, gruplama ve çoklu çizim düzenleme

  • Snap özelliğiyle öğeler dikey/yatay hizalanabilir veya eşit aralıklarla yerleştirilebilir
  • Cetvel, özel kılavuz çizgileri, yakınlaştırma/uzaklaştırma ve büyüteç aracı sunulur
  • Birden fazla nesne seçilip gruplanabilir; gruplama TikZ scope’larıyla uygulanır
  • Çoklu seçim durumunda hizalama ve dağıtma gibi yerleşim işlemleri yapılabilir
  • Tüm bir .tex makale dosyası açıldığında, uygulamanın alt kısmındaki çizim önizlemesiyle birden fazla tikzpicture ortamı arasında geçiş yapılabilir
  • Uygulama, kullanıcının pek çok özel makrosunu anlayabilir

Desteklenen TikZ özellikleri ve araçlar

  • Uygulama, deyimsel TikZ çizimleri oluşturmayı kolaylaştıracak şekilde tasarlanmıştır
  • Yollar, düğüm anchor’larına yapışacak şekilde kolayca çizilebilir
  • Düğüm etiketleri, pin’ler ve kenar etiketleri düzenlenebilir
  • Sunulan araçlar şunlardır
    • Select: nesne taşıma, yeniden boyutlandırma, döndürme, yol düzenleme, çoklu seçim düzenleme
    • Magnify: TeXstudio benzeri sanal büyüteç
    • Node: TikZ \node ile metin ekleme
    • Shape: shape kütüphanesi tabanlı düğüm ekleme; elmas, çokgen, yıldız, bulut, ok vb. destekler
    • Matrix: satır ve sütun sayısını belirleyerek düğüm matrisi ekleme
    • Line, Arrow, Bezier, Path, Freehand: düz çizgi, ok, eğri, çok bölümlü yol ve yumuşatılmış serbest çizgi oluşturma
    • Grid, Rectangle, Ellipse, Circle: ızgara ve temel şekil yolları oluşturma
    • Bucket: mevcut kapalı alana dolgu rengi uygulama

Dosya, dışa aktarma ve panel özellikleri

  • Dosya ve dışa aktarma özellikleri şunları içerir
    • .tex ve .tikz dosyalarını açma ve düzenleme
    • SVG, Ipe .ipe, PowerPoint .pptx üzerinden çizim içe aktarma
    • SVG, PNG, PDF, bağımsız LaTeX olarak dışa aktarma
    • Sekmelerle aynı anda birden fazla belge üzerinde çalışma
  • Makale ve çizim düzenleme özellikleri şunları içerir
    • Birden çok çizim içeren tam makaleleri açma
    • Küçük önizlemelerle çizimler arasında gezinme
    • Düğüm, şekil, matris, ok, yol, eğri, ızgara, dikdörtgen, elips ve daire çizme
    • Çizim içindeki metin ve formülleri doğrudan düzenleme
  • Doğrudan düzenleme özellikleri şunları içerir
    • Taşıma, yeniden boyutlandırma, döndürme, çoğaltma, gruplama, hizalama, dağıtma, çevirme, sıralamayı değiştirme
    • Nokta tutamaçlarıyla yol düzenleme
    • Bölme/birleştirme, ters çevirme, açma/kapama, köşe ve yumuşak nokta komutları
    • Izgara, kılavuz, nesne noktaları ve nesneler arası boşluklara snap
  • Panel özellikleri şunları içerir
    • Inspector’da çizgi, dolgu, ok, metin, dönüşüm, şekil ve stil düzenleme
    • Objects panelinde nesne görünürlüğü, gruplar, yeniden adlandırma ve katman sırasını yönetme
    • Styles panelinde, tarayıcı geliştirici araçlarındaki CSS düzenlemeye benzer biçimde TikZ stillerini düzenleme

Döngüler, yapı ve yapay zeka desteği

  • Repeat iletişim kutusuyla seçili alanı birden fazla satır ve sütunda kopyalayan \foreach döngüleri eklenebilir
  • Zaten \foreach kullanan çizimler de açılıp düzenlenebilir; buna iç içe döngüler de dahildir
  • Ağaç diyagramları, çocuk ekleme yöntemiyle düzenlenebilir
  • Matrisler, satır/sütun komutları ve transpoz komutuyla değiştirilebilir
  • Masaüstü sürümünde OpenAI Codex yüklüyse, uygulama içinden çizim düzenleme isteğinde bulunabilirsiniz
    • Asistan, TikZ’e özel birden fazla araca erişebilir
    • Kullanım, kullanıcının ChatGPT hesabından düşülür
    • Görsel ekleme dahil düzenleme yardımı da desteklenir

İç uygulama yapısı

  • Uygulama TypeScript ile yazılmıştır
  • Masaüstü sürümü Tauri kullanır ve hafif bir Rust backend içerir
  • İlk kod tabanı, Codex tarafından 3 ay boyunca yazıldı; kullanılan modeller gpt-5-3-codex, gpt-5-4, gpt-5-4-mini ve gpt-5-5 oldu
  • Claude’un bazı katkıları da bulunuyor
  • TeX kodunu parse etmek çok zordur; ancak TikZ Editor, rastgele tüm TeX’i değil, TikZ çizimi üretiminde sık kullanılan komutları parse eder
    • Oldukça “hacky” kodlar doğru yorumlanmayabilir
    • Destek kapsamı oldukça iyidir ve zamanla genişlemektedir
  • Uygulama, TikZ kodunu parse ederek bir iç temsil oluşturur; bu temsil üzerinden koordinatlar, stiller, dönüşümler, döngüler, düğümler, yollar ve metin düzenlenebilir sahne öğelerine dönüştürülür
  • İç temsil, satır ve karakter aralığı etiketleriyle sözdizimsel girdiye sıkı şekilde bağlıdır
  • Tüm kodu standart bir biçimde yeniden yazmak yerine küçük yamalarla yalnızca bazı bölümleri değiştirdiği için kullanıcının girintilerini ve satır sonlarını sadakatle koruyabilir
  • Sahne SVG olarak render edilir

Render ve dönüştürücüler

  • Metin ve formül render etme işlemi MathJax ile yapılır
  • Çok satırlı metin desteği için TeX’in tireleme algoritması ve Knuth-Plass satır kırma algoritması yeniden uygulanmıştır
  • Bu uygulama sayesinde, uygulamada görülen çok satırlı metinler genellikle TeX’in aynı metni render etme biçimiyle birebir örtüşür
  • Özel renk seçici, RGB renklerini kısa xcolor dizeleriyle ifade edilebilecek en yakın renge dönüştürür
    • Örnek: #409a40, violet!88!white!45!green biçimine dönüştürülür
    • İlgili kod, npm paketi xcolor-rgb-convert olarak sunuluyor
  • Çeşitli dosya biçimlerinden içe aktarma, ayrı geliştirilmiş dönüştürücülere dayanır
  • Masaüstü uygulaması, PowerPoint ve Keynote’tan nesneleri doğrudan yapıştırabilir
    • Keynote yapıştırma, keynote pano biçimi yorumlayıcısını kullanır ve keynote-clipboard npm paketi olarak sunulur
  • Masaüstü uygulamasındaki yapay zeka desteği, Codex App Server üzerinden sağlanır
  • Kaynak düzenleyici, CodeMirror üzerine inşa edilmiştir

İlgili okumalar

1 yorum

 
GN⁺ 4 시간 전
Hacker News yorumları

  • Biraz denedim; UI gerçekten çok şık ve projenin kendisi de çok iyi. Tebrikler
    Ancak üretilen TikZ kodunun pek iyi olduğunu düşünmüyorum. Her şey mutlak koordinat kullanıyor, oysa TikZ'de buna neredeyse hiç gerek yok
    Örneğin tek bir düğüm yerleştirseniz bile mutlak koordinat oluşuyor, ama sadece \node {Hello}; yazsanız TikZ bunu sınır kutusunun ortasına yerleştirir. Test amaçlı (0.5,2.91) konumunda olduğunu belirtmeye gerek yok
    Birden fazla düğümü seçip “alta hizala” gibi bir özellik kullandığınızda da mutlak koordinatlarla oynamak yerine TikZ'in hizalama özelliklerinden, yani anchor'lar gibi şeylerden yararlanmak gerektiğini düşünüyorum. Böyle kod üretmenin daha zor olduğunu anlıyorum ama bir sonraki sürüm için düşünülebilecek bir yön olabilir

    • Bu iyi bir geri bildirim. Zor kısmın kod üretiminin kendisinden çok kullanıcının beklediği davranışı belirlemek olduğunu düşünüyorum
      “Alta hizala” düğmesine basıldığında
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      gibi bir kodun bir anda rastgele isimli \coordinate'lere ve göreli koordinat gösterimine dönüşmesi insanı şaşırtabilir
      Tersine, en baştan “güzel” kodla başlanırsa uygulama çoğu durumda sürüklemeye izin veremez. Çünkü sürüklemenin ne anlama geldiği bilinmez ya da gerçekten bilinemediği çok olur. İsim verilmiş bir koordinatı mı değiştiriyorsunuz, yoksa o koordinata göre offset'i mi değiştiriyorsunuz gibi sorunlar çıkıyor
      Bu tartışmanın başka bir yerinde “right of” gibi yerleştirme biçimleri de konuşuldu ve iyi öneriler geldi: https://news.ycombinator.com/item?id=48647683
    • Böyle özellikler için CAD betik dillerinin bunu nasıl yaptığına bakılabilir

  • Merak eden olur diye yazayım, bu proje üzerinde 2026 Şubat'tan beri nispeten düzenli çalışıyorum
    Bu süreçte Codex üzerinden bu projeye yaklaşık 700 milyon token harcadım; buna cache read'ler dahil değil. API ücreti olarak yaklaşık 15 bin dolar tutardı ama gerçekte ChatGPT abonelik ücretleri için sadece yaklaşık 500 dolar ödedim

  • CircuitiTikZ'i gerçekten çok seviyorum. Basit metin tabanlı devre şemaları çizmenin neredeyse tek yolu
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Birkaç yıl önce bunu asciidoctor-diagram ile bağlayıp Asciidoc bakım kılavuzlarına basit devreler ekleyebilmiştim. Saha teknisyenleri buna gerçekten bayılmıştı ve PDM/ERP'nin önlerine attığı cehennem gibi araçlar yerine Git sürüm kontrolü ekosistemi içinde birlikte çalışabildiler
    Ayrıca zaten harika olan WireViz için de çok iyi bir tamamlayıcı: https://github.com/wireviz/WireViz

  • Harika. https://q.uiver.app/ de iyiydi; https://github.com/varkor tarafından yapılmış, biraz daha özel amaçlı bir araç

  • Çok güzel ama eninde sonunda sorulacak soruyu sorayım: cetz desteği eklemek ne kadar zor olur?
    Mümkünse LaTeX'e hiç dokunmak istemiyorum ve Typst'i sürekli kullanıyorum

    • Kodlama ajanları kullanılırsa oldukça mümkün görünüyor
      Typst tabanlı, tamamen WYSIWYG, tabiri caizse vibe coding ile yapılmış bir sunum yazılımı zaten var ve bunlardan bazıları tam olarak bu özelliği gerçekleştiriyor
      https://codeberg.org/presenst/presenst

  • Öğrenciyken buna gerçekten çok ihtiyaç duyardım. Bunu açık kaynak olarak yaptığınız için teşekkürler
    Teorik bilgisayar bilimi hocamın tesadüfen TikZ'i yapan Till Tantau olması da ayrı ilginçti. Açıklamaları da gerçekten çok iyiydi

    • Schleswig-Holstein'dan insanlar her yerde :) Till Tantau, LaTeX sunumları hazırlamak için kullanılan beamer paketini de başlatmıştı
      beamer ve TikZ, bilimsel iletişime yapılmış çok önemli iki katkı

  • Harika
    İnsanların bunu sevdiğini biliyorum ama TikZ'i doğrudan kullanmaktan gerçekten nefret ettiğim için teknik çizimlerin çoğunu draw.io/diagrams.net'e taşıyıp PNG olarak dışa aktarıyorum. Çok zarif değil ama yeterince iyi çalışıyor ve göze hoş gelen sonuçları kolayca üretmeyi sağlıyor. Normalde metinle tanımlanan şeyleri genel olarak tercih ederim
    Markdown içinde kalacak çizimler için bir kısmını Mermaid'e taşıdım ama TeX içinde çalıştırmayı denemedim
    Yine de LaTeX'te diyagram çizmenin yerleşik yolu TikZ'e daha yakın olduğu için, bir WYSIWYG düzenleyici faydalı olur gibi geliyor
    Bir öneri olarak, oklar kutulara “yapışabilse” güzel olurdu. Yani kutuyu hareket ettirdiğinizde okun uç noktası da onunla birlikte hareket eder. draw.io böyle çalışıyor

    • Metin düğümlerinde anchor'lar var, bu yüzden yapıştırma çalışıyor. Yeni bir çizgi çizerken ya da mevcut bir çizgiyi hareket ettirirken yeşil bağlantı noktalarını görebilirsiniz
      draw.io kullanıyorsanız PNG yerine PDF olarak dışa aktarmanızı öneririm. Böylece vektör grafik olarak kalır
    • draw.io dosyasını .drawio.svg olarak kaydetmek de mümkün değil mi?
      Birkaç diyagramı o şekilde yapmıştım ve Computer Modern kullanarak çizimlerin metin gövdesine benzer görünmesini sağlamıştım. Bana o kadarı yeterli olmuştu

  • Gerçekten çok iyi görünüyor. Başlamayı kolaylaştırmak için birkaç hazır şablon eklemek güzel olabilir. Yaygın sinir ağı mimarileri ya da TikZ'in diğer kullanım örnekleri gibi

    • Güzel fikir. File > Open Example zaten var ama genişletilecek alan olduğu kesin. Masaüstünde arXiv makalelerini doğrudan açmak da mümkün

  • Vay canına, gerçekten etkileyici. TikZ diyagramları oluşturmak için ChatGPT kullanıyordum ama dürüst olmak gerekirse TikZ diyagramı yapmak kolay değil ve iyi yapıldığında sonuçlar gerçekten çok güzel oluyor
    Yine de ChatGPT ile bir diyagramda ince ayar yaptırmak zor olabiliyor. TikZ sözdizimi ve davranışı hakkındaki bilgim her zaman istediğim sonucu alacak kadar ayrıntılı olmadığından, bazen istediğimi elde etmek zorlaşıyor. Bu yüzden bu araç tam da bunun cevabı gibi görünüyor. Denemeyi dört gözle bekliyorum
    Bu arada blog için LaTeX belgelerini de ChatGPT ile hazırlayıp sunucu tarafında render ediyorum. O iş akışı gerçekten çok iyi oturuyor