TikZ Editor : éditeur WYSIWYG pour les schémas LaTeX

 (tikz.dev)
1 points par GN⁺ 5 시간 전 | 1 commentaires | Partager sur WhatsApp
  • TikZ Editor v0.4.0 est une application open source gratuite sous licence MIT qui permet d’éditer des diagrammes TikZ pour LaTeX par manipulation directe, disponible sur le web et sur desktop
  • Il peut ouvrir des figures TikZ existantes ou des fichiers d’article complets en .tex, et lorsque l’on fait glisser des éléments, le code TikZ est mis à jour immédiatement tout en conservant la mise en forme existante, comme les retours à la ligne et les espaces
  • Il permet d’éditer visuellement des composants TikZ fréquemment utilisés comme les nœuds, chemins, flèches, formes, matrices, boucles \foreach, labels, pins et labels d’arêtes
  • L’éditeur de source propose la coloration syntaxique, le pliage de code, l’autocomplétion, la recherche, les diagnostics, des aperçus de couleur intégrés, un sélecteur de couleurs et le scrub des valeurs numériques, avec analyse des erreurs sans compilateur TeX
  • Implémenté avec TypeScript et Tauri, il applique seulement de petits patchs au lieu de réécrire tout le code TikZ, ce qui préserve l’indentation et les retours à la ligne de l’utilisateur

Un éditeur pour manipuler directement les figures TikZ

  • TikZ Editor v0.4.0 est un éditeur WYSIWYG pour les diagrammes TikZ de LaTeX
  • Il permet de créer une nouvelle figure à partir de zéro ou de modifier une figure TikZ existante, et peut aussi ouvrir un fichier d’article .tex complet pour modifier les images qu’il contient
  • Quand on déplace des éléments, le code TikZ est immédiatement mis à jour, sans casser la mise en forme existante comme les retours à la ligne et les espaces
  • Il permet de vérifier instantanément le résultat lors des ajustements fins de position, sans avoir à recompiler
  • L’application est publiée en open source gratuit sous licence MIT, et son code est disponible sur GitHub
  • Elle est utilisable sur le web, avec aussi une application desktop légère incluant quelques fonctions supplémentaires

Synchronisation entre édition visuelle et code TikZ

  • Au lieu de corriger les coordonnées à la main, il suffit de faire glisser les chemins et nœuds à l’endroit voulu pour que le code soit mis à jour immédiatement
  • L’outil d’ajout de nouveaux éléments permet d’insérer les éléments suivants
    • lignes, flèches et chemins à plusieurs segments
    • nœuds, rectangles et cercles
  • Les nouveaux éléments sont insérés à la fin du code, puis peuvent être déplacés ou redimensionnés immédiatement
  • On peut appliquer rounded corners aux coins arrondis et aux jonctions de chemin, y compris avec une valeur comme rounded corners=2pt

Un éditeur de source conçu pour TikZ

  • Le panneau source affiche toujours le code courant et fournit une coloration syntaxique TikZ
  • Il prend en charge le pliage de code pour masquer les détails des scopes
  • Au survol de la souris, on peut voir des extraits pertinents du manuel TikZ
  • Les erreurs sont mises en évidence avec des explications pour indiquer ce qui ne va pas
    • Cela est possible parce que l’application comprend le code sans compilateur TeX
  • Il est possible d’ajuster les couleurs et les nombres sans saisir directement dans la vue source
    • prise en charge du sélecteur de couleurs
    • prise en charge du scrub des valeurs numériques

Alignement, groupement et édition de plusieurs figures

  • Les fonctions de snap permettent d’aligner les éléments verticalement ou horizontalement, ou de les répartir avec un espacement identique
  • L’application fournit une règle, des guides personnalisés, le zoom et un outil de loupe
  • Il est possible de sélectionner plusieurs objets pour les grouper, le groupement étant implémenté via des scopes TikZ
  • En sélection multiple, des opérations de mise en page comme l’alignement et la distribution sont possibles
  • En ouvrant un fichier d’article .tex complet, on peut basculer entre plusieurs environnements tikzpicture via l’aperçu des figures en bas de l’application
  • L’application comprend de nombreuses macros personnalisées définies par l’utilisateur

Fonctions et outils TikZ pris en charge

  • L’application est conçue pour produire des figures TikZ idiomatiques
  • Les chemins peuvent être dessinés facilement pour s’attacher aux ancres de nœuds
  • Elle prend en charge l’édition des labels de nœud, pins et labels d’arêtes
  • Les outils fournis sont les suivants
    • Select : déplacement, redimensionnement, rotation, édition de chemin et édition en sélection multiple
    • Magnify : loupe virtuelle similaire à celle de TeXstudio
    • Node : ajout de texte avec TikZ \node
    • Shape : ajout de nœuds basés sur la bibliothèque de shapes, avec prise en charge des losanges, polygones, étoiles, nuages, flèches, etc.
    • Matrix : insertion de matrices de nœuds en définissant le nombre de lignes et de colonnes
    • Line, Arrow, Bezier, Path, Freehand : création de lignes droites, flèches, courbes, chemins à plusieurs segments et courbes libres lissées
    • Grid, Rectangle, Ellipse, Circle : création de grilles et de chemins de formes de base
    • Bucket : application d’une couleur de remplissage à une zone fermée existante

Fichiers, export et panneaux

  • Les fonctions de fichier et d’export comprennent notamment
    • ouverture et édition de fichiers .tex et .tikz
    • import de figures depuis SVG, Ipe .ipe et PowerPoint .pptx
    • export en SVG, PNG, PDF et LaTeX autonome
    • travail simultané sur plusieurs documents via des onglets
  • Les fonctions d’édition d’articles et de figures comprennent notamment
    • ouverture d’un article complet contenant plusieurs figures
    • navigation entre les figures via des aperçus miniatures
    • dessin de nœuds, formes, matrices, flèches, chemins, courbes, grilles, rectangles, ellipses et cercles
    • édition directe du texte et des formules dans la figure
  • Les fonctions d’édition directe comprennent notamment
    • déplacement, redimensionnement, rotation, duplication, groupement, alignement, distribution, symétrie et changement d’ordre
    • édition de chemin avec des poignées de point
    • commandes de division/fusion, inversion, ouverture/fermeture, angle et points lissés
    • snap sur la grille, les guides, les points d’objet et l’espacement entre objets
  • Les fonctions des panneaux comprennent notamment
    • dans l’Inspector, l’édition des traits, remplissages, flèches, texte, transformations, formes et styles
    • dans le panneau Objects, la gestion de l’affichage des objets, des groupes, du renommage et de l’ordre des calques
    • dans le panneau Styles, l’édition des styles TikZ d’une manière proche de l’édition CSS dans les outils de développement du navigateur

Boucles, structure et assistance IA

  • La boîte de dialogue Repeat permet d’ajouter des boucles \foreach qui copient une sélection sur plusieurs lignes et colonnes
  • Il peut aussi ouvrir et modifier des figures qui utilisent déjà \foreach, y compris des boucles imbriquées
  • Les diagrammes en arbre peuvent être modifiés en ajoutant des enfants
  • Les matrices peuvent être modifiées via des commandes sur les lignes, les colonnes et la transposition
  • Si OpenAI Codex est installé dans la version desktop, on peut demander des modifications de figure depuis l’application
    • l’assistant a accès à plusieurs outils spécialisés pour TikZ
    • l’utilisation est décomptée du compte ChatGPT de l’utilisateur
    • une aide à l’édition avec pièces jointes d’image est également prise en charge

Fonctionnement interne

  • L’application est écrite en TypeScript
  • La version desktop utilise Tauri et inclut un backend Rust léger
  • Le code initial a été écrit par Codex pendant 3 mois, avec les modèles gpt-5-3-codex, gpt-5-4, gpt-5-4-mini et gpt-5-5
  • Elle inclut aussi certaines contributions de Claude
  • Parser du code TeX est très difficile, mais TikZ Editor ne parse pas tout TeX arbitraire : il se concentre sur les commandes les plus utilisées pour créer des figures TikZ
    • du code très « hacky » peut ne pas être interprété correctement
    • la couverture est déjà assez bonne et continue de s’élargir avec le temps
  • L’application parse le code TikZ pour produire une représentation interne, qui interprète coordonnées, styles, transformations, boucles, nœuds, chemins et texte comme des éléments de scène modifiables
  • Cette représentation interne reste étroitement liée à l’entrée syntaxique via des tags de ligne et de plage de caractères
  • Comme elle modifie seulement certaines parties via de petits patchs au lieu de réécrire tout le code dans un format standard, elle peut préserver fidèlement l’indentation et les retours à la ligne de l’utilisateur
  • La scène est rendue en SVG

Rendu et convertisseurs

  • Le rendu du texte et des formules est assuré par MathJax
  • Pour prendre en charge le texte sur plusieurs lignes, l’application réimplémente l’algorithme de césure de TeX ainsi que l’algorithme de coupure de ligne de Knuth-Plass
  • Grâce à cela, le texte multilignes affiché dans l’application correspond généralement exactement à la manière dont TeX rendrait le même texte
  • Le sélecteur de couleurs personnalisé convertit une couleur RGB vers la couleur la plus proche exprimable sous forme de chaîne xcolor courte
    • exemple : #409a40 est converti en violet!88!white!45!green
    • le code associé est publié sous forme de paquet npm xcolor-rgb-convert
  • L’import de différents formats de fichier repose sur des convertisseurs développés séparément
  • L’application desktop permet aussi de coller directement des objets depuis PowerPoint et Keynote
    • le collage depuis Keynote utilise un interpréteur du format de presse-papiers Keynote, publié sous forme de paquet npm keynote-clipboard
  • L’assistance IA de l’application desktop est fournie via Codex App Server
  • L’éditeur de source est construit sur CodeMirror

À lire aussi

1 commentaires

 
GN⁺ 5 시간 전
Avis sur Hacker News

  • Je l’ai un peu essayé, et l’UI est très réussie, le projet lui-même est aussi très bien. Félicitations
    En revanche, je trouve que le code TikZ généré n’est pas terrible. Tout utilise des coordonnées absolues, alors qu’en TikZ ce n’est presque jamais nécessaire
    Par exemple, même poser un seul nœud crée une coordonnée absolue, alors qu’on peut simplement écrire \node {Hello}; et TikZ le place au centre de la boîte englobante. Pas besoin de préciser qu’il est en (0.5,2.91) comme dans un test
    Même lorsqu’on sélectionne plusieurs nœuds pour utiliser une fonction comme « aligner en bas », il vaudrait mieux exploiter les mécanismes d’alignement de TikZ, comme les ancres, plutôt que de manipuler des coordonnées absolues. Je comprends que ce type de génération de code soit plus difficile, mais ce pourrait être une piste à envisager pour une prochaine version

    • C’est un bon retour. La difficulté vient selon moi moins de la génération de code elle-même que de la détermination du comportement attendu par l’utilisateur
      Quand on appuie sur le bouton « aligner en bas »
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      si un code comme celui-ci se transformait soudainement en une écriture avec \coordinate arbitrairement nommés et des coordonnées relatives, ce serait surprenant
      À l’inverse, si l’on part d’emblée d’un code « propre », l’application ne peut souvent plus autoriser le glisser-déposer. Parce qu’il devient impossible de savoir ce que signifie ce déplacement, ou bien on ne peut tout simplement pas le savoir. Par exemple, faut-il modifier une coordonnée nommée, ou l’offset par rapport à cette coordonnée ?
      Ailleurs dans cette discussion, on a aussi parlé de modes de placement comme « right of », et de bonnes suggestions ont été proposées : https://news.ycombinator.com/item?id=48647683
    • Pour ce genre de fonctionnalité, il pourrait être utile de regarder comment s’y prennent les langages de script CAD

  • Au cas où certains se poseraient la question, ce projet est développé de façon assez régulière depuis février 2026
    Entre-temps, j’ai dépensé environ 700 millions de tokens sur ce projet via Codex, sans compter les lectures en cache. En facturation API, cela aurait représenté environ 15 000 dollars, mais en pratique je n’ai payé qu’environ 500 dollars en abonnements ChatGPT

  • J’adore vraiment CircuitiTikZ. C’est presque la seule façon de faire des schémas de circuits textuels simples
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Il y a quelques années, je l’ai relié à asciidoctor-diagram, ce qui m’a permis d’insérer de petits circuits dans des manuels de maintenance Asciidoc. Les techniciens sur le terrain ont vraiment apprécié, et cela permettait de collaborer dans l’écosystème de gestion de versions Git au lieu des outils infernaux imposés par le PDM/ERP
    C’est aussi un très bon complément à l’excellent WireViz : https://github.com/wireviz/WireViz

  • Super. https://q.uiver.app/ était aussi très bien, mais c’est un outil plus spécialisé créé par https://github.com/varkor

  • C’est très impressionnant, mais posons la question inévitable : à quel point serait-il difficile d’ajouter la prise en charge de cetz ?
    Si je peux l’éviter, je préfère ne pas toucher à LaTeX, et j’utilise Typst en permanence

    • Avec un agent de code, cela semble tout à fait possible
      Il existe déjà un logiciel de présentation WYSIWYG complet basé sur Typst, développé en vibe coding, et certains implémentent précisément ce type de fonctionnalité
      https://codeberg.org/presenst/presenst

  • Quand j’étais étudiant, j’aurais vraiment voulu avoir ça. Merci d’en avoir fait un projet open source
    Mon professeur d’informatique théorique était, par hasard, Till Tantau, le créateur de TikZ. Il expliquait vraiment très bien

    • Les gens du Schleswig-Holstein sont partout :) Till Tantau est aussi à l’origine du package beamer pour créer des présentations LaTeX
      beamer et TikZ sont tous deux des contributions très importantes à la communication scientifique

  • Très sympa
    Je sais que beaucoup de gens aiment ça, mais j’ai horreur d’écrire directement en TikZ, donc j’ai déplacé la plupart de mes schémas techniques vers draw.io/diagrams.net puis je les exporte en PNG. Ce n’est pas très élégant, mais ça marche suffisamment bien, et il est facile d’obtenir un résultat correct visuellement. En général, je préfère pourtant les choses définies sous forme de texte
    Pour les schémas qui restent dans du Markdown, j’en ai déplacé une partie vers Mermaid, mais je n’ai pas essayé de les faire fonctionner dans TeX
    Malgré tout, comme la manière idiomatique de dessiner des diagrammes en LaTeX reste proche de TikZ, un éditeur WYSIWYG serait utile
    Une suggestion toutefois : ce serait bien si les flèches pouvaient « s’accrocher » aux boîtes. Ainsi, si l’on déplace une boîte, l’extrémité de la flèche se déplacerait aussi. C’est comme ça que draw.io fonctionne

    • Les nœuds de texte ont des ancres, donc l’accrochage fonctionne. Vous devriez voir des points de connexion verts quand vous tracez une nouvelle ligne ou déplacez une ligne existante
      Si vous utilisez draw.io, je recommande d’exporter en PDF plutôt qu’en PNG. Ainsi, cela reste en graphique vectoriel
    • On ne peut pas enregistrer les fichiers draw.io en .drawio.svg ?
      J’ai déjà fait quelques schémas comme ça, en utilisant Computer Modern pour que les illustrations ressemblent au corps du texte. C’était largement suffisant

  • C’est vraiment très réussi. Ce serait peut-être bien d’ajouter quelques préréglages pour faciliter la prise en main. Par exemple, des architectures de réseaux neuronaux courantes ou d’autres cas d’usage de TikZ

    • Bonne idée. Il y a déjà File > Open Example, mais il y a clairement de la marge pour l’étoffer. Sur desktop, on peut aussi ouvrir directement des articles arXiv

  • Waouh, c’est vraiment impressionnant. J’utilise ChatGPT pour créer des diagrammes TikZ, et honnêtement ce n’est pas simple, même si le résultat peut être vraiment magnifique quand c’est bien fait
    En revanche, faire affiner un diagramme en détail par ChatGPT est difficile. Ma connaissance de la syntaxe et du fonctionnement de TikZ n’est pas toujours assez précise pour obtenir exactement le résultat voulu. Du coup, cet outil ressemble à une vraie réponse à ce problème. J’ai hâte de l’essayer
    À titre d’information, je crée aussi des documents LaTeX pour mon blog avec ChatGPT, puis je les rends côté serveur. Ce workflow me convient très bien