TikZ Editor: WYSIWYG-Editor für LaTeX-Grafiken

 (tikz.dev)
1 Punkte von GN⁺ 4 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • TikZ Editor v0.4.0 ist eine kostenlose Open-Source-App unter MIT-Lizenz zum direkten Bearbeiten von TikZ-Diagrammen in LaTeX und kann im Web sowie auf dem Desktop verwendet werden
  • Vorhandene TikZ-Grafiken oder ganze .tex-Paper-Dateien lassen sich öffnen; zieht man Elemente per Drag-and-drop, wird der TikZ-Code sofort aktualisiert, wobei bestehende Formatierung wie Zeilenumbrüche und Leerzeichen erhalten bleibt
  • Häufig verwendete TikZ-Bestandteile wie Knoten, Pfade, Pfeile, Formen, Matrizen, \foreach-Schleifen, Labels, Pins und Edge-Labels lassen sich visuell bearbeiten
  • Der Source-Editor bietet Syntax-Highlighting, Code-Folding, Autovervollständigung, Suche, Diagnosen, Inline-Farbmuster, Farbwähler und Number Scrubbing und analysiert Fehler ohne TeX-Compiler
  • Implementiert auf Basis von TypeScript und Tauri; statt den gesamten TikZ-Code neu zu schreiben, werden nur kleine Patches angewendet, sodass die Einrückungen und Zeilenumbrüche der Nutzer erhalten bleiben

Editor zum direkten Bearbeiten von TikZ-Grafiken

  • TikZ Editor v0.4.0 ist ein WYSIWYG-Editor für TikZ-Diagramme in LaTeX
  • Man kann neue Grafiken von Grund auf erstellen oder vorhandene TikZ-Grafiken bearbeiten; außerdem lässt sich eine vollständige .tex-Paper-Datei öffnen, um darin enthaltene Bilder zu ändern
  • Wenn Elemente verschoben werden, wird der TikZ-Code sofort aktualisiert, und die bestehende Formatierung des Codes wie Zeilenumbrüche und Leerzeichen bleibt erhalten
  • Bei feinen Positionsanpassungen lässt sich das Ergebnis sofort sehen, ohne erneut zu kompilieren
  • Die App ist als kostenlose Open Source unter MIT-Lizenz veröffentlicht, der Code liegt auf GitHub
  • Sie ist im Web nutzbar, außerdem gibt es eine schlanke Desktop-App mit einigen zusätzlichen Funktionen

Synchronisierung von visueller Bearbeitung und TikZ-Code

  • Statt Koordinaten direkt zu ändern, zieht man Pfade und Knoten an die gewünschte Position, und der Code wird sofort aktualisiert
  • Mit Werkzeugen zum Hinzufügen neuer Elemente lassen sich folgende Dinge einfügen
    • Linien, Pfeile, Pfade mit mehreren Segmenten
    • Knoten, Rechtecke, Kreise
  • Neue Elemente werden am Ende des Codes eingefügt und können danach sofort verschoben oder in der Größe verändert werden
  • Für abgerundete Ecken und Pfadverbindungen kann rounded corners verwendet werden, auch mit Werten wie rounded corners=2pt

Auf TikZ zugeschnittener Source-Editor

  • Das Source-Panel zeigt den aktuellen Source immer an und bietet TikZ-Syntax-Highlighting
  • Unterstützt Code-Folding, um Details von Scopes auszublenden
  • Beim Darüberfahren mit der Maus lassen sich relevante Snippets aus dem TikZ-Handbuch anzeigen
  • Fehler werden hervorgehoben und mit Erklärungen versehen, damit klar ist, was falsch ist
    • Möglich ist das, weil die App den Code auch ohne TeX-Compiler versteht
  • Farben und Zahlen lassen sich anpassen, ohne direkt in der Source-Ansicht zu tippen
    • Unterstützung für Farbwähler
    • Unterstützung für Number Scrubbing

Ausrichtung, Gruppierung und Bearbeitung mehrerer Grafiken

  • Mit Snap-Funktionen lassen sich Elemente vertikal oder horizontal ausrichten oder mit gleichen Abständen anordnen
  • Es gibt Lineale, benutzerdefinierte Hilfslinien, Zoom und ein Lupenwerkzeug
  • Mehrere Objekte können ausgewählt und gruppiert werden; die Gruppierung wird als TikZ-Scope umgesetzt
  • Im Mehrfachauswahlmodus sind Layout-Arbeiten wie Ausrichten und Verteilen möglich
  • Öffnet man eine vollständige .tex-Paper-Datei, kann man über die Bildvorschau am unteren Rand zwischen mehreren tikzpicture-Umgebungen wechseln
  • Die App versteht viele benutzerdefinierte Makros der Nutzer

Unterstützte TikZ-Funktionen und Werkzeuge

  • Die App ist dafür ausgelegt, idiomatische TikZ-Grafiken zu erstellen
  • Pfade lassen sich leicht so zeichnen, dass sie an Node-Ankern andocken
  • Das Bearbeiten von Node-Labels, Pins und Edge-Labels wird unterstützt
  • Zu den bereitgestellten Werkzeugen gehören
    • Select: Objekte verschieben, skalieren, drehen, Pfade bearbeiten, Mehrfachauswahl bearbeiten
    • Magnify: virtuelle Lupe ähnlich wie in TeXstudio
    • Node: Text mit TikZ-\node hinzufügen
    • Shape: Nodes auf Basis der Shape-Bibliothek hinzufügen, mit Unterstützung für Diamanten, Polygone, Sterne, Wolken, Pfeile usw.
    • Matrix: Node-Matrix mit vorgegebener Anzahl an Zeilen und Spalten einfügen
    • Line, Arrow, Bezier, Path, Freehand: gerade Linien, Pfeile, Kurven, Pfade mit mehreren Segmenten und geglättete Freihandkurven erzeugen
    • Grid, Rectangle, Ellipse, Circle: Raster und grundlegende Formpfade erzeugen
    • Bucket: Füllfarbe auf vorhandene geschlossene Bereiche anwenden

Dateien, Export und Panel-Funktionen

  • Datei- und Exportfunktionen umfassen
    • .tex- und .tikz-Dateien öffnen und bearbeiten
    • Grafiken aus SVG, Ipe .ipe und PowerPoint .pptx importieren
    • Export als SVG, PNG, PDF und eigenständiges LaTeX
    • Mehrere Dokumente gleichzeitig in Tabs bearbeiten
  • Funktionen zum Bearbeiten von Papern und Grafiken umfassen
    • Vollständige Paper mit mehreren Grafiken öffnen
    • Zwischen Grafiken per Thumbnail-Vorschau wechseln
    • Knoten, Formen, Matrizen, Pfeile, Pfade, Kurven, Raster, Rechtecke, Ellipsen und Kreise zeichnen
    • Text und Formeln innerhalb der Grafik direkt bearbeiten
  • Funktionen zur direkten Bearbeitung umfassen
    • Verschieben, skalieren, drehen, duplizieren, gruppieren, ausrichten, verteilen, spiegeln, Reihenfolge ändern
    • Pfade mit Punkthandles bearbeiten
    • Befehle für Teilen/Zusammenfügen, Umkehren, Öffnen/Schließen, Ecken und glatte Punkte
    • Snap auf Raster, Hilfslinien, Objektpunkte und Objektabstände
  • Panel-Funktionen umfassen
    • Im Inspector Linien, Füllungen, Pfeile, Text, Transformationen, Formen und Stile bearbeiten
    • Im Objects-Panel Sichtbarkeit von Objekten, Gruppen, Umbenennen und Layer-Reihenfolge verwalten
    • Im Styles-Panel TikZ-Stile bearbeiten, ähnlich wie CSS-Bearbeitung in den Developer Tools des Browsers

Schleifen, Struktur und KI-Unterstützung

  • Über den Repeat-Dialog lässt sich eine \foreach-Schleife hinzufügen, die eine Auswahl über mehrere Zeilen und Spalten kopiert
  • Auch Grafiken, die bereits \foreach verwenden, können geöffnet und bearbeitet werden, einschließlich verschachtelter Schleifen
  • Baumdiagramme lassen sich durch Hinzufügen von Kindern bearbeiten
  • Matrizen können mit Befehlen für Zeilen, Spalten und Transponieren geändert werden
  • Ist in der Desktop-Version OpenAI Codex installiert, kann man innerhalb der App um Bearbeitung einer Grafik bitten
    • Der Assistent hat Zugriff auf mehrere TikZ-spezifische Werkzeuge
    • Die Nutzung wird dem ChatGPT-Konto des Nutzers angerechnet
    • Unterstützung bei der Bearbeitung inklusive Anhängen von Bildern wird ebenfalls geboten

Interne Implementierung

  • Die App ist in TypeScript geschrieben
  • Die Desktop-Version verwendet Tauri und enthält ein leichtgewichtiges Rust-Backend
  • Die anfängliche Codebasis wurde drei Monate lang von Codex geschrieben; verwendet wurden die Modelle gpt-5-3-codex, gpt-5-4, gpt-5-4-mini und gpt-5-5
  • Auch einige Beiträge von Claude sind enthalten
  • Das Parsen von TeX-Code ist sehr schwierig, aber TikZ Editor parst nicht beliebiges vollständiges TeX, sondern nur Befehle, die beim Erstellen von TikZ-Grafiken häufig verwendet werden
    • Sehr „hacky“ geschriebener Code wird möglicherweise nicht korrekt interpretiert
    • Der unterstützte Umfang ist bereits ziemlich gut und wächst mit der Zeit weiter
  • Die App parst TikZ-Code, erstellt daraus eine interne Repräsentation und interpretiert damit Koordinaten, Stile, Transformationen, Schleifen, Knoten, Pfade und Text als bearbeitbare Szenenelemente
  • Die interne Repräsentation ist über Zeilen- und Zeichenbereichs-Tags eng mit dem Syntax-Input verknüpft
  • Weil nicht der gesamte Code in ein Standardformat umgeschrieben wird, sondern nur kleine Patches geändert werden, können die Einrückungen und Zeilenumbrüche der Nutzer zuverlässig erhalten bleiben
  • Die Szene wird als SVG gerendert

Rendering und Konverter

  • Das Rendern von Text und Formeln erfolgt mit MathJax
  • Um mehrzeiligen Text zu unterstützen, wurden der TeX-Silbentrennungsalgorithmus und der Knuth-Plass-Zeilenumbruchalgorithmus neu implementiert
  • Dank dieser Implementierung stimmt mehrzeiliger Text, der in der App angezeigt wird, im Allgemeinen exakt damit überein, wie TeX denselben Text rendert
  • Der benutzerdefinierte Farbwähler wandelt RGB-Farben in die nächstliegende Farbe um, die sich als kurzer xcolor-String darstellen lässt
    • Beispiel: #409a40 wird in violet!88!white!45!green umgewandelt
    • Der zugehörige Code ist als npm-Paket xcolor-rgb-convert verfügbar
  • Der Import verschiedener Dateiformate basiert auf separat entwickelten Konvertern
  • Die Desktop-App kann Objekte direkt aus PowerPoint und Keynote einfügen
    • Das Einfügen aus Keynote nutzt einen Interpreter für das Keynote-Clipboard-Format, der als npm-Paket keynote-clipboard bereitsteht
  • Die KI-Unterstützung der Desktop-App wird über den Codex App Server bereitgestellt
  • Der Source-Editor basiert auf CodeMirror

Verwandte Beiträge

1 Kommentare

 
GN⁺ 4 시간 전
Hacker-News-Kommentare

  • Ich habe es kurz ausprobiert; die UI ist wirklich großartig und das Projekt an sich ebenfalls. Glückwunsch
    Allerdings finde ich den erzeugten TikZ-Code nicht besonders gut. Alles verwendet absolute Koordinaten, obwohl das in TikZ fast nie nötig ist
    Zum Beispiel entsteht schon beim Platzieren eines einzelnen Knotens eine absolute Koordinate, obwohl \node {Hello}; ausreichen würde; dann platziert TikZ ihn in der Mitte der Bounding Box. Es muss nicht testweise als (0.5,2.91) angegeben werden
    Auch wenn man mehrere Knoten auswählt und Funktionen wie „unten ausrichten“ verwendet, sollte man meiner Meinung nach statt absoluter Koordinaten eher die Ausrichtungsfunktionen von TikZ nutzen, also Anker und Ähnliches. Ich verstehe, dass diese Art der Code-Erzeugung schwieriger ist, aber vielleicht wäre das eine Richtung für die nächste Version

    • Das ist gutes Feedback. Ich denke, der schwierige Teil ist weniger die Code-Erzeugung selbst als vielmehr zu entscheiden, welches Verhalten der Nutzer erwartet
      Wenn man auf den Button „unten ausrichten“ klickt und ein Code wie
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      plötzlich in willkürlich benannte \coordinate-Anweisungen und relative Koordinaten umgewandelt wird, wäre das wohl überraschend
      Umgekehrt kann die App in vielen Fällen kein Drag-and-Drop mehr erlauben, wenn man von Anfang an mit „schönem“ Code startet. Denn oft ist nicht klar, was das Ziehen bedeuten soll, oder es lässt sich tatsächlich nicht bestimmen. Etwa ob man eine benannte Koordinate ändern möchte oder den Offset relativ zu dieser Koordinate. Solche Probleme tauchen dann auf
      An anderer Stelle in dieser Diskussion ging es auch um Platzierungsarten wie „right of“, und dabei kamen gute Vorschläge auf: https://news.ycombinator.com/item?id=48647683
    • Vielleicht könnte man sich dafür ansehen, wie CAD-Skriptsprachen so etwas lösen

  • Falls es jemanden interessiert: An diesem Projekt wird seit Februar 2026 relativ kontinuierlich gearbeitet
    In dieser Zeit habe ich dafür über Codex ungefähr 700 Millionen Token verbraucht, ohne Cache-Reads mitzurechnen. Über API-Gebühren wären das etwa 15.000 Dollar gewesen, tatsächlich habe ich aber nur rund 500 Dollar für ChatGPT-Abos bezahlt

  • Ich mag CircuitiTikZ wirklich sehr. Es ist fast die einzige Möglichkeit, einfache textbasierte Schaltpläne zu zeichnen
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Vor ein paar Jahren habe ich es mit asciidoctor-diagram verbunden, sodass wir einfache Schaltungen in Asciidoc-Wartungshandbücher einfügen konnten. Die Servicetechniker vor Ort fanden das wirklich gut, und wir konnten im Git-versionierten Ökosystem zusammenarbeiten statt mit den höllischen Tools, die uns das PDM/ERP vorwirft
    Es ist außerdem eine sehr gute Ergänzung zu dem ohnehin großartigen WireViz: https://github.com/wireviz/WireViz

  • Cool. https://q.uiver.app/ fand ich auch gut, aber das ist ein stärker spezialisiertes Tool von https://github.com/varkor

  • Sehr cool, aber um die unvermeidliche Frage zu stellen: Wie schwierig wäre cetz-Unterstützung?
    Wenn ich es vermeiden kann, möchte ich LaTeX nicht anfassen, und ich nutze immer Typst

    • Mit einem Coding-Agenten scheint das ziemlich machbar zu sein
      Es gibt bereits eine vollständige WYSIWYG-Präsentationssoftware auf Typst-Basis, per Vibe Coding gebaut, und einige davon implementieren genau solche Funktionen
      https://codeberg.org/presenst/presenst

  • Als Student hätte ich mir so etwas wirklich gewünscht. Danke, dass du es als Open Source veröffentlicht hast
    Mein Professor für theoretische Informatik war zufällig Till Tantau, der TikZ erfunden hat. Er konnte auch wirklich gut erklären

    • Leute aus Schleswig-Holstein sind überall :) Till Tantau hat auch das beamer-Paket für LaTeX-Präsentationen ins Leben gerufen
      Sowohl beamer als auch TikZ sind enorm wichtige Beiträge zur Wissenschaftskommunikation

  • Cool
    Ich weiß, dass viele Leute es mögen, aber ich hasse es wirklich, TikZ direkt zu benutzen, und habe deshalb die meisten technischen Zeichnungen zu draw.io/diagrams.net verlagert und exportiere sie als PNG. Das ist nicht elegant, funktioniert aber gut genug, und man bekommt leicht ansehnliche Ergebnisse. Eigentlich bevorzuge ich meist Dinge, die als Text definiert sind
    Einige Grafiken, die in Markdown bleiben sollten, habe ich stattdessen auf Mermaid umgestellt, aber ich habe nicht versucht, das in TeX zum Laufen zu bringen
    Trotzdem ist die idiomatische Art, in LaTeX Diagramme zu zeichnen, eher TikZ, daher scheint ein WYSIWYG-Editor dafür nützlich zu sein
    Ein Vorschlag wäre, dass Pfeile an Boxen „andocken“ können. Wenn man eine Box verschiebt, sollten sich die Endpunkte der Pfeile mitbewegen. draw.io funktioniert so

    • Für Textknoten gibt es Anker, daher funktioniert Andocken bereits. Wenn du eine neue Linie zeichnest oder eine bestehende verschiebst, solltest du grüne Verbindungspunkte sehen
      Wenn du draw.io verwendest, würde ich empfehlen, statt PNG als PDF zu exportieren. Dann bleibt es eine Vektorgrafik
    • Kann man draw.io-Dateien nicht als .drawio.svg speichern?
      Ich habe ein paar Diagramme so erstellt und Computer Modern verwendet, damit die Abbildungen dem Fließtext ähneln. Das war für mich völlig ausreichend

  • Sieht wirklich gut aus. Vielleicht wäre es gut, ein paar Presets hinzuzufügen, damit der Einstieg leichter fällt. Etwa gängige neuronale Netzarchitekturen oder andere Anwendungsfälle von TikZ

    • Gute Idee. Es gibt zwar File > Open Example, aber da ist eindeutig noch Luft nach oben. Auf dem Desktop kann man sogar direkt arXiv-Paper öffnen

  • Wow, wirklich beeindruckend. Ich habe bisher ChatGPT benutzt, um TikZ-Diagramme zu erstellen, und ehrlich gesagt ist das Erstellen von TikZ-Diagrammen nicht einfach, auch wenn die Ergebnisse, wenn es gut gemacht ist, wirklich schön sind
    Allerdings ist es auch schwierig, ChatGPT dazu zu bringen, ein Diagramm fein abzustimmen. Mein Wissen über TikZ-Syntax und -Verhalten ist nicht immer präzise genug, um das gewünschte Ergebnis zu bekommen. Deshalb wirkt dieses Tool wie genau die Antwort darauf. Ich freue mich darauf, es auszuprobieren
    Zur Einordnung: Ich erstelle auch LaTeX-Dokumente für meinen Blog mit ChatGPT und rendere sie serverseitig. Dieser Workflow funktioniert für mich ausgezeichnet