TikZ Editor: editor WYSIWYG para dibujos de LaTeX

 (tikz.dev)
1 puntos por GN⁺ 4 시간 전 | 1 comentarios | Compartir por WhatsApp
  • TikZ Editor v0.4.0 es una app open source gratuita con licencia MIT para editar diagramas TikZ de LaTeX manipulándolos directamente, y puede usarse en la web y en escritorio
  • Permite abrir dibujos TikZ existentes o archivos completos de artículos .tex; al arrastrar elementos, el código TikZ se actualiza al instante y se conserva el formato existente, como saltos de línea y espacios
  • Se pueden editar visualmente componentes de TikZ de uso frecuente como nodos, rutas, flechas, formas, matrices, bucles \foreach, etiquetas, pines y etiquetas de aristas
  • El editor de código fuente ofrece resaltado de sintaxis, plegado, autocompletado, búsqueda, diagnósticos, muestras de color en línea, selector de color y ajuste de números, además de analizar errores sin compilador TeX
  • Está implementado sobre TypeScript y Tauri, y aplica solo pequeños parches en vez de reescribir todo el código TikZ, preservando la indentación y los saltos de línea del usuario

Editor para manipular directamente dibujos TikZ

  • TikZ Editor v0.4.0 es un editor WYSIWYG para diagramas TikZ de LaTeX
  • Permite crear dibujos nuevos desde cero o editar dibujos TikZ existentes, y también abrir archivos completos de artículos .tex para modificar las imágenes dentro de ellos
  • Al mover elementos, el código TikZ se actualiza de inmediato, y el formato del código existente, como los saltos de línea y los espacios, no se desordena
  • Al ajustar una posición con precisión, se puede ver el resultado al instante sin necesidad de volver a compilar
  • La app se publica como open source gratuita con licencia MIT, y el código está en GitHub
  • Puede usarse en la web, y también ofrece una app de escritorio ligera con algunas funciones adicionales

Sincronización entre edición visual y código TikZ

  • En vez de corregir coordenadas manualmente, basta con arrastrar rutas y nodos a la posición deseada y el código se actualiza de inmediato
  • La herramienta para agregar nuevos elementos permite insertar lo siguiente
    • líneas, flechas y rutas de varios segmentos
    • nodos, rectángulos y círculos
  • Los nuevos elementos se insertan al final del código, y después de agregarlos se pueden mover o redimensionar de inmediato
  • Se puede aplicar rounded corners a esquinas redondeadas y uniones de rutas, y usarlo con un valor como rounded corners=2pt

Editor de código fuente adaptado a TikZ

  • El panel de código fuente muestra siempre el código actual y ofrece resaltado de sintaxis de TikZ
  • Soporta plegado de código para ocultar detalles dentro de un scope
  • Al pasar el cursor, se pueden ver fragmentos relacionados del manual de TikZ
  • Los errores se resaltan con explicaciones para que se entienda qué está mal
    • esto es posible porque la app entiende el código sin necesidad de un compilador TeX
  • También se pueden ajustar colores y números sin escribir directamente en la vista de código
    • soporte para selector de color
    • soporte para ajuste interactivo de números

Alineación, agrupación y edición de múltiples dibujos

  • La función de ajuste permite alinear elementos en vertical y horizontal, o distribuirlos con el mismo espaciado
  • Ofrece regla, guías personalizadas, zoom y herramienta de lupa
  • Se pueden seleccionar varios objetos y agruparlos, y la agrupación se implementa como scopes de TikZ
  • En estado de selección múltiple, se pueden hacer tareas de diseño como alinear y distribuir
  • Al abrir un archivo completo de artículo .tex, se puede cambiar entre varios entornos tikzpicture desde la vista previa de dibujos en la parte inferior de la app
  • La app entiende muchas macros personalizadas del usuario

Funciones y herramientas de TikZ compatibles

  • La app está diseñada para crear dibujos TikZ idiomáticos
  • Las rutas se pueden dibujar fácilmente para que se unan a anclas de nodos
  • Soporta edición de etiquetas de nodo, pines y etiquetas de aristas
  • Las herramientas disponibles son las siguientes
    • Select: mover objetos, redimensionar, rotar, editar rutas y editar selección múltiple
    • Magnify: lupa virtual similar a TeXstudio
    • Node: agrega texto con TikZ \node
    • Shape: agrega nodos basados en la librería de shapes, con soporte para diamantes, polígonos, estrellas, nubes, flechas y más
    • Matrix: inserta una matriz de nodos especificando número de filas y columnas
    • Line, Arrow, Bezier, Path, Freehand: crean líneas rectas, flechas, curvas, rutas de varios segmentos y curvas libres suavizadas
    • Grid, Rectangle, Ellipse, Circle: crean rutas de cuadrícula y formas básicas
    • Bucket: aplica color de relleno a una región cerrada existente

Archivos, exportación y funciones de panel

  • Las funciones de archivo y exportación incluyen lo siguiente
    • abrir y editar archivos .tex y .tikz
    • importar dibujos desde SVG, Ipe .ipe y PowerPoint .pptx
    • exportar a SVG, PNG, PDF y LaTeX independiente
    • trabajar con varios documentos al mismo tiempo mediante pestañas
  • Las funciones para editar artículos y dibujos incluyen lo siguiente
    • abrir un artículo completo con varios dibujos
    • moverse entre dibujos con vista previa en miniaturas
    • dibujar nodos, formas, matrices, flechas, rutas, curvas, cuadrículas, rectángulos, elipses y círculos
    • editar directamente texto y fórmulas dentro del dibujo
  • Las funciones de edición directa incluyen lo siguiente
    • mover, redimensionar, rotar, duplicar, agrupar, alinear, distribuir, voltear y cambiar el orden
    • editar rutas con manijas de puntos
    • comandos para dividir y unir, invertir, abrir y cerrar, esquinas y puntos suaves
    • ajuste a cuadrícula, guías, puntos de objetos y espaciado entre objetos
  • Las funciones de panel incluyen lo siguiente
    • en Inspector, edición de línea, relleno, flecha, texto, transformación, forma y estilo
    • en el panel Objects, control de visibilidad, grupos, cambio de nombre y orden de capas
    • en el panel Styles, edición de estilos TikZ de forma parecida a la edición de CSS en herramientas de desarrollador del navegador

Bucles, estructura y asistencia con IA

  • Con el cuadro de diálogo Repeat se pueden agregar bucles \foreach para copiar una selección en varias filas y columnas
  • También se pueden abrir y editar dibujos que ya usan \foreach, incluidos bucles anidados
  • Los diagramas de árbol se pueden editar agregando hijos
  • Las matrices se pueden modificar con comandos de filas, columnas y transposición
  • Si OpenAI Codex está instalado en la versión de escritorio, se pueden pedir ediciones del dibujo desde dentro de la app
    • el asistente tiene acceso a varias herramientas especializadas en TikZ
    • el uso se descuenta de la cuenta de ChatGPT del usuario
    • también soporta ayuda de edición con imágenes adjuntas

Cómo está implementado internamente

  • La app está escrita en TypeScript
  • La versión de escritorio usa Tauri e incluye un backend ligero en Rust
  • La base de código inicial fue escrita por Codex durante 3 meses, y los modelos usados fueron gpt-5-3-codex, gpt-5-4, gpt-5-4-mini y gpt-5-5
  • También incluye algunas contribuciones de Claude
  • Analizar código TeX es muy difícil, pero TikZ Editor no analiza TeX arbitrario completo, sino solo los comandos más usados para crear dibujos TikZ
    • es posible que código muy “hacky” no se interprete correctamente
    • la cobertura es bastante buena y sigue creciendo con el tiempo
  • La app analiza el código TikZ para crear una representación interna, y con ella interpreta coordenadas, estilos, transformaciones, bucles, nodos, rutas y texto como elementos editables de la escena
  • La representación interna está estrechamente vinculada a la entrada sintáctica mediante etiquetas de líneas y rangos de caracteres
  • Como cambia solo partes del código mediante pequeños parches en vez de reescribirlo entero en un formato estándar, puede preservar fielmente la indentación y los saltos de línea del usuario
  • La escena se renderiza como SVG

Renderizado y convertidores

  • El renderizado de texto y fórmulas se realiza con MathJax
  • Para soportar texto multilínea, vuelve a implementar el algoritmo de separación silábica de TeX y el algoritmo de salto de línea Knuth-Plass
  • Gracias a esta implementación, el texto multilínea que se ve en la app normalmente coincide exactamente con la forma en que TeX renderiza ese mismo texto
  • El selector de color personalizado convierte colores RGB al color más cercano que pueda representarse con una cadena corta de xcolor
    • ejemplo: #409a40 se convierte en violet!88!white!45!green
    • el código relacionado se ofrece como paquete npm xcolor-rgb-convert
  • La importación de varios formatos de archivo se basa en convertidores desarrollados por separado
  • La app de escritorio permite pegar objetos directamente desde PowerPoint y Keynote
    • el pegado desde Keynote usa un intérprete del formato del portapapeles de keynote, disponible como paquete npm keynote-clipboard
  • La asistencia con IA de la app de escritorio se ofrece a través de Codex App Server
  • El editor de código fuente está construido sobre CodeMirror

Lecturas relacionadas

1 comentarios

 
GN⁺ 4 시간 전
Comentarios en Hacker News

  • Lo probé un poco, y la UI está muy bien hecha y el proyecto en sí también está muy bueno. Felicidades.
    Dicho eso, el código TikZ que genera no me convence. Todo usa coordenadas absolutas, y en TikZ casi nunca hace falta eso.
    Por ejemplo, incluso al colocar un solo nodo se generan coordenadas absolutas, cuando bastaría con \node {Hello}; y TikZ lo pondría en el centro del cuadro delimitador. No hace falta especificar algo como (0.5,2.91) solo por probar.
    Incluso al seleccionar varios nodos y usar funciones como “alinear abajo”, me parece que en vez de manipular coordenadas absolutas debería aprovechar las funciones de alineación de TikZ, como los anclajes. Entiendo que generar ese tipo de código es más difícil, pero podría ser una dirección a considerar para la próxima versión.

    • Es buen feedback. Creo que la parte difícil no es tanto la generación de código en sí, sino determinar el comportamiento que el usuario espera.
      Si al presionar el botón de “alinear abajo”
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      de repente se transformara en código con \coordinate de nombre arbitrario y notación de coordenadas relativas, creo que sorprendería a la gente.
      Por otro lado, si desde el principio se empieza con código “bonito”, en muchos casos la app ya no podría permitir arrastrar. Porque muchas veces no está claro qué significa arrastrar, o directamente no se puede saber: por ejemplo, si se está cambiando una coordenada con nombre o el offset respecto de esa coordenada.
      En otra parte de esta discusión también se habló de formas de posicionamiento como “right of”, y salieron buenas sugerencias: https://news.ycombinator.com/item?id=48647683
    • Ese tipo de funciones podría tomar ideas de cómo lo resuelven los lenguajes de script para CAD.

  • Por si a alguien le da curiosidad, este proyecto se viene trabajando de forma bastante constante desde febrero de 2026.
    En todo ese tiempo gasté alrededor de 700 millones de tokens en este proyecto a través de Codex, sin contar lecturas desde caché. En tarifas de API habrían sido unos 15 mil dólares, pero en la práctica solo pagué unos 500 dólares en suscripciones de ChatGPT.

  • Me encanta CircuitiTikZ. Es prácticamente la única forma de hacer diagramas de circuitos basados en texto de manera simple.
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Hace unos años lo conecté con asciidoctor-diagram para poder incluir circuitos simples en manuales de mantenimiento de Asciidoc. A los técnicos de campo les encantó, y podían colaborar dentro del ecosistema de control de versiones con Git en vez de depender de las herramientas infernales que te tiran PDM/ERP.
    También es un complemento muy bueno para el ya excelente WireViz: https://github.com/wireviz/WireViz

  • Está genial. https://q.uiver.app/ también me gustó mucho, aunque es una herramienta más especializada creada por https://github.com/varkor.

  • Está muy bueno, pero haciendo la pregunta que tarde o temprano tenía que salir: ¿qué tan difícil sería el soporte para cetz?
    Si puedo evitarlo, preferiría no tocar LaTeX, y siempre uso Typst.

    • Usando un agente de código, parece bastante posible.
      Ya existe software de presentaciones totalmente WYSIWYG basado en Typst, hecho con eso que llaman vibe coding, y algunos implementan exactamente ese tipo de función.
      https://codeberg.org/presenst/presenst

  • De estudiante realmente quería algo así. Gracias por hacerlo open source.
    Mi profesor de teoría de la computación fue, por casualidad, Till Tantau, el creador de TikZ. Además explicaba muy bien.

    • La gente de Schleswig-Holstein está en todas partes :) Till Tantau también inició el paquete beamer para crear presentaciones en LaTeX.
      Tanto beamer como TikZ son contribuciones muy importantes para la comunicación científica.

  • Genial.
    Sé que a mucha gente le encanta, pero realmente odio usar TikZ directamente, así que para la mayoría de mis diagramas técnicos me pasé a draw.io/diagrams.net y exporto a PNG. No es elegante, pero funciona suficientemente bien y permite producir resultados que se ven bien con facilidad. En general prefiero las cosas definidas en texto.
    Para diagramas que quedan dentro de Markdown, algunos los pasé a Mermaid, aunque no he intentado hacer que funcionen en TeX.
    Aun así, como la forma idiomática de hacer diagramas en LaTeX se parece más a TikZ, creo que un editor WYSIWYG podría ser muy útil.
    Una sugerencia: estaría bueno que las flechas pudieran “pegarse” a las cajas, de modo que al mover la caja también se mueva el extremo de la flecha. Así funciona draw.io.

    • Los nodos de texto tienen anclajes, así que pegar sí funciona. Deberías ver puntos de conexión verdes al dibujar una línea nueva o mover una existente.
      Si usas draw.io, recomiendo exportar a PDF en vez de PNG. Así se mantiene como gráfico vectorial.
    • ¿No se pueden guardar los archivos de draw.io como .drawio.svg?
      Hice así algunos diagramas, y usando Computer Modern logré que las figuras se vieran parecidas al resto del documento. Con eso me bastó.

  • Se ve realmente bien. Tal vez estaría bueno agregar algunos presets para que empezar sea más fácil. Cosas como arquitecturas neuronales comunes u otros casos de uso de TikZ.

    • Buena idea. Ya existe File > Open Example, pero claramente hay margen para ampliarlo. En escritorio incluso se pueden abrir papers de arXiv directamente.

  • Wow, esto es realmente impresionante. He estado usando ChatGPT para crear diagramas en TikZ y, siendo sincero, hacer diagramas en TikZ no es fácil, aunque cuando salen bien se ven realmente hermosos.
    Eso sí, lograr que ChatGPT haga ajustes finos a un diagrama es difícil. Mi conocimiento de la sintaxis y del funcionamiento de TikZ no siempre es lo bastante preciso como para obtener el resultado que quiero. Por eso esta herramienta parece ser la respuesta. Tengo ganas de probarla.
    Como referencia, también hago documentos LaTeX para mi blog con ChatGPT y luego los renderizo del lado del servidor. Ese flujo de trabajo me funciona muy bien.