TikZ Editor: editor WYSIWYG para diagramas LaTeX

 (tikz.dev)
1 pontos por GN⁺ 4 시간 전 | 1 comentários | Compartilhar no WhatsApp
  • TikZ Editor v0.4.0 é um app open source gratuito sob licença MIT para editar diagramas TikZ do LaTeX por manipulação direta, disponível na web e no desktop
  • É possível abrir desenhos TikZ existentes ou arquivos completos de artigos .tex, e ao arrastar elementos o código TikZ é atualizado imediatamente, mantendo a formatação existente como quebras de linha e espaços
  • Permite editar visualmente componentes comuns do TikZ como nós, caminhos, setas, formas, matrizes, loops \foreach, rótulos, pins e edge labels
  • O editor de código-fonte oferece destaque de sintaxe, folding, autocompletar, busca, diagnósticos, amostras de cor inline, seletor de cores e ajuste numérico por arraste, analisando erros sem compilador TeX
  • Foi implementado com TypeScript e Tauri, e aplica apenas pequenos patches em vez de reescrever todo o código TikZ, preservando a indentação e as quebras de linha do usuário

Um editor para manipular diretamente desenhos TikZ

  • TikZ Editor v0.4.0 é um editor WYSIWYG para diagramas TikZ do LaTeX
  • É possível criar novos desenhos do zero ou editar desenhos TikZ existentes, além de abrir arquivos completos de artigos .tex e modificar as imagens dentro deles
  • Ao mover elementos, o código TikZ é atualizado imediatamente, sem desorganizar a formatação do código existente, como quebras de linha e espaços
  • Ao ajustar posições com precisão, é possível ver o resultado na hora sem recompilar
  • O app é disponibilizado como open source gratuito sob licença MIT, e o código está no GitHub
  • Pode ser usado na web, e também há um app desktop leve com alguns recursos adicionais

Sincronização entre edição visual e código TikZ

  • Em vez de editar coordenadas manualmente, basta arrastar caminhos e nós para a posição desejada e o código é atualizado na hora
  • A ferramenta de adicionar novos elementos permite inserir os seguintes itens
    • linhas, setas e caminhos com vários segmentos
    • nós, retângulos e círculos
  • Novos elementos são inseridos no fim do código, e depois podem ser movidos ou redimensionados imediatamente
  • É possível aplicar rounded corners em cantos arredondados e junções de caminho, incluindo com valores como rounded corners=2pt

Editor de código-fonte adaptado ao TikZ

  • O painel de código sempre mostra o código atual e oferece destaque de sintaxe do TikZ
  • Suporta folding de código para ocultar detalhes de escopos
  • Ao passar o mouse, é possível ver snippets relacionados do manual do TikZ
  • Erros são destacados com explicações para mostrar o que está errado
    • Isso é possível porque o app entende o código sem depender de um compilador TeX
  • Também é possível ajustar cores e números sem digitar diretamente na visualização do código
    • suporte a seletor de cores
    • suporte a ajuste numérico por arraste

Alinhamento, agrupamento e edição de múltiplos desenhos

  • Recursos de snap permitem alinhar elementos vertical e horizontalmente ou distribuí-los com espaçamento igual
  • Oferece régua, guias personalizadas, zoom e ferramenta de lupa
  • É possível selecionar vários objetos e agrupá-los, com o agrupamento implementado como escopos TikZ
  • Em seleção múltipla, são possíveis operações de layout como alinhar e distribuir
  • Ao abrir um artigo completo .tex, é possível alternar entre vários ambientes tikzpicture pela prévia de desenhos na parte inferior do app
  • O app entende muitas macros personalizadas do usuário

Recursos e ferramentas TikZ suportados

  • O app foi projetado para criar desenhos TikZ idiomáticos
  • Caminhos podem ser desenhados facilmente para se prender a âncoras de nós
  • Suporta edição de node labels, pins e edge labels
  • As ferramentas oferecidas são as seguintes
    • Select: mover objetos, redimensionar, rotacionar, editar caminhos e edição com seleção múltipla
    • Magnify: lupa virtual semelhante à do TeXstudio
    • Node: adicionar texto com TikZ \node
    • Shape: adicionar nós baseados na biblioteca de shapes, com suporte a losangos, polígonos, estrelas, nuvens, setas e mais
    • Matrix: inserir matriz de nós especificando número de linhas e colunas
    • Line, Arrow, Bezier, Path, Freehand: criar linhas retas, setas, curvas, caminhos com múltiplos segmentos e curvas livres suavizadas
    • Grid, Rectangle, Ellipse, Circle: criar grades e caminhos de formas básicas
    • Bucket: aplicar cor de preenchimento a uma área fechada existente

Arquivos, exportação e recursos de painéis

  • Os recursos de arquivo e exportação incluem
    • abrir e editar arquivos .tex e .tikz
    • importar desenhos de SVG, Ipe .ipe e PowerPoint .pptx
    • exportar para SVG, PNG, PDF e LaTeX standalone
    • trabalhar com vários documentos ao mesmo tempo em abas
  • Os recursos de edição de artigos e desenhos incluem
    • abrir artigos completos com vários desenhos
    • navegar entre desenhos com prévias em miniatura
    • desenhar nós, formas, matrizes, setas, caminhos, curvas, grades, retângulos, elipses e círculos
    • editar diretamente texto e fórmulas dentro do desenho
  • Os recursos de edição direta incluem
    • mover, redimensionar, rotacionar, duplicar, agrupar, alinhar, distribuir, espelhar e alterar a ordem
    • editar caminhos com handles de pontos
    • comandos de dividir/unir, inverter, abrir/fechar, cantos e pontos suaves
    • snap em grade, guias, pontos de objetos e espaçamento entre objetos
  • Os recursos dos painéis incluem
    • no Inspector, editar linha, preenchimento, setas, texto, transformação, formas e estilo
    • no painel Objects, controlar visibilidade dos objetos, grupos, renomeação e ordem das camadas
    • no painel Styles, editar estilos TikZ de forma semelhante à edição de CSS em ferramentas de desenvolvedor do navegador

Loops, estrutura e assistência por IA

  • Pela caixa de diálogo Repeat, é possível adicionar loops \foreach que copiam a seleção em várias linhas e colunas
  • Também é possível abrir e editar desenhos que já usam \foreach, incluindo loops aninhados
  • Diagramas em árvore podem ser editados adicionando filhos
  • Matrizes podem ser modificadas com comandos de linha, coluna e transposição
  • Se o OpenAI Codex estiver instalado na versão desktop, é possível pedir edição de desenhos dentro do próprio app
    • o assistente tem acesso a várias ferramentas dedicadas ao TikZ
    • o uso é debitado da conta ChatGPT do usuário
    • também há suporte a ajuda de edição com anexos de imagem

Como funciona internamente

  • O app foi escrito em TypeScript
  • A versão desktop usa Tauri e inclui um backend leve em Rust
  • A base inicial do código foi escrita pelo Codex ao longo de 3 meses, e os modelos usados foram gpt-5-3-codex, gpt-5-4, gpt-5-4-mini e gpt-5-5
  • Também há algumas contribuições do Claude
  • Fazer parsing de código TeX é muito difícil, mas o TikZ Editor analisa não todo TeX arbitrário, e sim apenas os comandos usados com frequência na criação de desenhos TikZ
    • código muito “hacky” pode não ser interpretado corretamente
    • a cobertura de suporte já é bastante boa e continua aumentando com o tempo
  • O app faz parsing do código TikZ para criar uma representação interna, e com ela interpreta coordenadas, estilos, transformações, loops, nós, caminhos e texto como elementos de cena editáveis
  • A representação interna permanece intimamente ligada à entrada sintática por meio de tags de linha e intervalo de caracteres
  • Como altera apenas partes do código com pequenos patches em vez de reescrever tudo em formato padrão, consegue preservar fielmente a indentação e as quebras de linha do usuário
  • A cena é renderizada em SVG

Renderização e conversores

  • A renderização de texto e fórmulas é feita com MathJax
  • Para oferecer suporte a texto com múltiplas linhas, o app reimplementa o algoritmo de hifenização do TeX e o algoritmo de quebra de linha Knuth-Plass
  • Graças a essa implementação, o texto multilinha mostrado no app geralmente coincide exatamente com a forma como o TeX renderizaria o mesmo texto
  • O seletor de cores personalizado converte cores RGB para a cor mais próxima representável como uma string curta de xcolor
    • exemplo: #409a40 é convertido em violet!88!white!45!green
    • o código relacionado é fornecido como o pacote npm xcolor-rgb-convert
  • A importação de vários formatos de arquivo se baseia em conversores desenvolvidos separadamente
  • O app desktop permite colar objetos diretamente do PowerPoint e do Keynote
    • a colagem do Keynote usa um interpretador do formato de clipboard do Keynote, disponibilizado como o pacote npm keynote-clipboard
  • O suporte de IA no app desktop é oferecido via Codex App Server
  • O editor de código-fonte foi construído sobre o CodeMirror

Leituras relacionadas

1 comentários

 
GN⁺ 4 시간 전
Comentários no Hacker News

  • Testei um pouco, e a UI é muito bonita e o projeto em si também é muito bom. Parabéns
    Mas acho que o código TikZ gerado não é muito bom. Tudo usa coordenadas absolutas, e no TikZ quase nunca há necessidade disso
    Por exemplo, mesmo ao colocar só um nó já aparece uma coordenada absoluta, mas bastaria escrever \node {Hello}; que o TikZ o posiciona no centro da caixa delimitadora. Não precisa especificar que está em (0.5,2.91) como no teste
    Mesmo ao selecionar vários nós e usar algo como “alinhar embaixo”, acho que seria melhor aproveitar os recursos de alinhamento do TikZ, como âncoras, em vez de manipular coordenadas absolutas. Entendo que gerar esse tipo de código é mais difícil, mas pode ser um rumo a considerar para a próxima versão

    • É um bom feedback. Acho que a parte difícil não é tanto a geração do código em si, mas determinar o comportamento que o usuário espera
      Ao apertar o botão “alinhar embaixo”, se um código como
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      de repente virasse algo com \coordinate de nome arbitrário e notação de coordenadas relativas, acho que isso surpreenderia as pessoas
      Por outro lado, se começar desde o início com código “bonito”, o app em muitos casos não consegue permitir arrastar elementos. Isso porque muitas vezes não dá para saber, ou realmente é impossível saber, o que arrastar significa. Aparecem questões como: estamos mudando uma coordenada nomeada, ou mudando o deslocamento em relação a essa coordenada?
      Em outro ponto desta discussão também falaram sobre formas de posicionamento como “right of”, e surgiram boas sugestões: https://news.ycombinator.com/item?id=48647683
    • Talvez desse para se inspirar em como linguagens de script de CAD lidam com isso

  • Caso alguém tenha curiosidade, este projeto vem sendo desenvolvido com uma certa constância desde fevereiro de 2026
    Nesse período, gastei cerca de 700 milhões de tokens neste projeto via Codex, sem contar leituras de cache. Pela cobrança de API isso teria dado algo em torno de 15 mil dólares, mas na prática paguei só cerca de 500 dólares em assinatura do ChatGPT

  • Eu realmente adoro o CircuitiTikZ. É praticamente a única forma de fazer diagramas de circuito baseados em texto de maneira simples
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    Alguns anos atrás, conectei isso ao asciidoctor-diagram para poder colocar circuitos simples em manuais de manutenção em Asciidoc. Os técnicos de campo adoraram, e isso permitiu colaborar dentro do ecossistema de versionamento com Git, em vez de depender das ferramentas infernais que PDM/ERP costumam impor
    Também é um ótimo complemento para o já excelente WireViz: https://github.com/wireviz/WireViz

  • Muito legal. https://q.uiver.app/ também era bom, mas é uma ferramenta mais especializada feita por https://github.com/varkor

  • Muito legal, mas fazendo a pergunta que inevitavelmente acaba surgindo: quão difícil seria dar suporte a cetz?
    Se eu puder evitar, prefiro não mexer com LaTeX, e sempre uso Typst

    • Usando agentes de codificação, isso parece bastante viável
      Já existe software de apresentações totalmente WYSIWYG baseado em Typst, feito no estilo vibe coding, e alguns deles implementam exatamente esse tipo de recurso
      https://codeberg.org/presenst/presenst

  • Quando eu era estudante, eu queria muito algo assim. Obrigado por fazer isso em código aberto
    Meu professor de teoria da computação, por coincidência, era o Till Tantau, criador do TikZ. Ele também explicava muito bem

    • O pessoal de Schleswig-Holstein está em todo lugar :) O Till Tantau também criou o pacote beamer para fazer apresentações em LaTeX
      Tanto o beamer quanto o TikZ foram contribuições muito importantes para a comunicação científica

  • Muito legal
    Eu sei que muita gente gosta, mas eu realmente odeio usar TikZ diretamente, então acabei migrando a maior parte dos meus desenhos técnicos para draw.io/diagrams.net e exportando em PNG. Não é sofisticado, mas funciona bem o bastante e permite criar resultados visualmente bons com facilidade. Em geral eu prefiro coisas definidas por texto
    Para diagramas que ficam dentro de Markdown, migrei alguns para Mermaid, mas nunca tentei fazer isso funcionar em TeX
    Ainda assim, como a forma idiomática de fazer diagramas em LaTeX é algo próximo de TikZ, acho que um editor WYSIWYG pode ser útil
    Uma sugestão: seria bom se setas pudessem “grudar” em caixas. Aí, ao mover a caixa, a extremidade da seta se moveria junto. É assim que o draw.io funciona

    • Nós de texto têm âncoras, então o recurso de grudar funciona. Ao desenhar uma nova linha ou mover uma já existente, você deve ver pontos de conexão verdes
      Se você usa draw.io, eu recomendaria exportar em PDF em vez de PNG. Assim o gráfico continua vetorial
    • Não dá para salvar arquivos do draw.io como .drawio.svg?
      Já fiz alguns diagramas assim, usando Computer Modern para deixar a imagem parecida com o texto principal. Para mim isso já bastava

  • Está realmente muito bonito. Talvez fosse bom adicionar alguns presets para facilitar o começo, como arquiteturas comuns de redes neurais ou outros casos de uso do TikZ

    • Boa ideia. Já existe File > Open Example, mas certamente ainda há espaço para expandir isso. No desktop, também dá para abrir artigos do arXiv diretamente

  • Uau, isso é realmente impressionante. Eu vinha usando ChatGPT para criar diagramas em TikZ e, sinceramente, fazer diagramas em TikZ não é nada fácil, embora quando fica bem feito o resultado seja realmente bonito
    O problema é que também é difícil fazer o ChatGPT ajustar um diagrama com precisão. Meu conhecimento da sintaxe e do funcionamento do TikZ nem sempre é detalhado o suficiente, então às vezes é difícil conseguir exatamente o que eu quero. Por isso, esta ferramenta parece ser a resposta. Estou animado para experimentar
    Aliás, também faço documentos LaTeX para blog com o ChatGPT e renderizo no lado do servidor. Esse fluxo de trabalho funciona muito bem