Quiver - editor moderno de diagramas comutativos
(github.com/varkor)- Quiver é um editor para criar graficamente diagramas comutativos e diagramas de colagem, com suporte a renderização de alta qualidade para tela e exportação para LaTeX e Typst
- Criar e modificar diagramas é muito mais rápido do que escrever LaTeX ou Typst manualmente e, depois de se acostumar, é possível trabalhar em uma velocidade próxima à de caneta e papel
- Pode lidar com diagramas complexos como pullback, pushout, adjunction e higher cell, e oferece uma grade flexível que se ajusta ao tamanho dos rótulos e estilos de seta combináveis
- É possível trabalhar tanto com arrastar do mouse quanto com atalhos de teclado, com suporte a seleção múltipla, desfazer e refazer, macros do usuário, exportação de diagramas incorporáveis em HTML, pan e zoom
- Ao exportar para LaTeX ou Typst, também é inserido um link do diagrama para que ele possa ser reaberto depois para edição ou compartilhado com outras pessoas
O que o Quiver faz
- Quiver é um editor gráfico moderno para criar diagramas comutativos e diagramas de colagem
- Renderiza diagramas de alta qualidade, agradáveis de ver na tela, e pode exportar para LaTeX via tikz-cd e para Typst via fletcher
- Pode ser testado diretamente na web em q.uiver.app
- O uso eficiente e a forma de criar e editar diagramas usando apenas o teclado estão organizados no tutorial do Quiver
Recursos para criação de diagramas
- Oferece uma interface eficiente e intuitiva para criar diagramas comutativos complexos e diagramas de colagem
- Exemplos compatíveis incluem:
- diagramas com pullback e pushout
- adjunction
- higher cell
- O posicionamento dos objetos é baseado em uma grade flexível que se ajusta ao tamanho dos rótulos
- As setas podem combinar diversos estilos
- É possível usar cores em rótulos e setas
- Foi projetado para ficar bonito em capturas de tela e para que o resultado exportado em LaTeX e Typst se pareça o máximo possível com o diagrama original
Métodos de entrada e fluxo de edição
- Os diagramas podem ser criados e editados com cliques e arraste do mouse
- Fornece um conjunto de atalhos de teclado capaz de executar todas as ações, permitindo também uma edição baseada em teclado
- É possível selecionar vários elementos de uma vez para tornar alterações em massa mais fáceis e rápidas
- Com o sistema de histórico, é possível desfazer e refazer o trabalho
- Suporta pan e zoom para lidar com diagramas grandes
- Oferece alinhamento inteligente de rótulos e edge offset
Exportação e reutilização
- Os diagramas podem ser exportados para LaTeX ou Typst
- O resultado exportado inclui um link para voltar àquele diagrama
- Ele pode ser reaberto depois quando for necessário editar
- Pode ser compartilhado com outras pessoas
- Também oferece exportação de diagramas incorporáveis em HTML
- Macros personalizadas podem ser usadas colando a URL de um arquivo que contenha
\newcommand - A integração com editores pode ser consultada na documentação Editor integration e na wiki do Quiver
Condições de build e execução
- É possível executar
makena linha de comando e depois abrirsrc/index.htmlno navegador para verificar o resultado do build - Se a versão do Make ou do Bash não for compatível, a release mais recente do KaTeX pode ser baixada manualmente e colocada em
src/KaTeX/ - Se o caminho do KaTeX não estiver correto, ocorrerá um erro de falha ao carregar o KaTeX
- O Quiver deve ser executado via localhost
- Se o Python estiver instalado, é possível executar
make serveno diretório do Quiver e depois abrirlocalhost:8000no navegador - Se houver problemas no build, é possível abrir uma issue no GitHub com os detalhes do problema
1 comentários
Comentários do Hacker News
Essa ferramenta é realmente excelente. Consegui fazer o cubo de Fourier-Poisson [0] em uns 10 minutos, e a UI também é muito intuitiva
Em vez de um canvas livre, o fato de o design ser focado em diagramas comutativos me parece uma ótima escolha, que deixa tudo limpo e fácil de usar. Se eu tivesse isso quando estava escrevendo artigos, teria economizado muito tempo
[0] https://q.uiver.app/#q=WzAsOCxbMCwxLCJnIFxcdGV4dHsgb24gfVxcb...
Numa linha parecida, recentemente achei este editor de rede de Petri bem impressionante: https://pes.vsb.cz/petrineteditor/#/model
Redes de Petri são muito legais. É mais ou menos a sensação de pegar uma máquina de estados finitos e torná-la multithread
Conheci redes de Petri pela primeira vez ao ler textos de uma organização chamada “statebox”. A Statebox se interessava por redes de Petri, diagramas comutativos e vários conceitos de teoria das categorias; eu li alguns artigos, fiquei fascinado e passei a sonhar em trabalhar lá. Infelizmente, agora o site só tem a frase “imagine being a category theorist” e um emoji de rir chorando, então não faço ideia do que aconteceu
Usei isso há alguns dias para desenhar um diagrama simples [0] para colocar no meu livro [1]
Infelizmente, por ser voltado para teoria das categorias, não há muito suporte para estilizar os nós de forma mais bonita, mas claro que dá para resolver isso com LaTeX
[0] https://q.uiver.app/#q=WzAsNSxbMSw2LCJcXHRleHR7TmF0dXJhbCBEZ...
[1] http://abstractionlogic.com
Ontem à noite eu estava usando https://tikzcd.yichuanshen.de/ e ele parece uma versão com menos recursos desta ferramenta. Mesmo assim, é bem bom para fazer diagramas simples
Alguém poderia explicar o que são diagramas comutativos e diagramas de colagem para um desenvolvedor de software humilde e não muito talentoso?
O artigo da Wikipedia era abstrato demais para entender no nível básico [0]
[0]: https://en.wikipedia.org/wiki/Commutative_diagram
Se houver um
fsobreA → B, isso representa uma função f que recebe uma entrada de A e produz uma saída em BUm diagrama em que
A → Béf, depoisB → Cég, eA → Céhsignificag ∘ f = h, ou seja, fazer f e depois g é o mesmo que fazer h. Como o domínio e o contradomínio de cada função são escritos junto, fica fácil ver se as funções podem ser compostas, isto é, se passam na verificação de tiposComo os próprios caminhos no diagrama também se compõem como funções, essa notação se encaixa de forma muito natural. Por exemplo, a associatividade já está embutida na notação, então
A→B→C→Dé a única forma de representar a composição de três funções, e nem dá para escrever a diferença entre(f∘g)∘hef∘(g∘h)Em geral, quando você pega um multigrafo direcionado, acrescenta uma descrição de quais de seus caminhos são equivalentes entre si ou não, e essa relação de equivalência satisfaz algumas propriedades básicas, isso é chamado de categoria. Esse conceito aparece com muita frequência em matemática, lógica abstrata etc. Diagramas comutativos são úteis nesse contexto para inferir rapidamente, de forma visual, a equivalência entre caminhos
n(g(f(a))). Isso é o diagrama, e dizer que o diagrama é comutativo significa que quaisquer dois caminhos com o mesmo ponto de partida e o mesmo ponto de chegada são iguaisAssim,
n(g(f(•))),s(r(l(•)))es(m(f(•)))são todos caminhos de A até C' e também chamadas de função, e como foi dito que o diagrama é comutativo, todos esses caminhos são iguaisMorfismo injetivo, morfismo sobrejetivo e isomorfismo são propriedades importantes de funções, que permitem “cancelar” certos termos nos dois lados de uma igualdade. Por exemplo, em geral não dá para concluir
g(x)=h(x)a partir def(g(x))=f(h(x)). Se for possível “cancelar” f desse jeito, ele é chamado de morfismo injetivo. Da mesma forma, se emg(f(x))=h(f(x))for possível cancelar f e obterg(x)=h(x), então f é um morfismo sobrejetivo. Um isomorfismo satisfaz ambos. Graças a essas propriedades, em certas situações é possível “percorrer ao contrário” alguns caminhos do diagramaUma forma de teorema vista em teoria das categorias, como no exemplo do five lemma[0], é algo como: “olhe para este diagrama. Se g é um morfismo sobrejetivo e h é um morfismo injetivo, então f é um isomorfismo”. Ou seja, se você sabe que pode cancelar de um lado e do outro, então passa a saber que também pode cancelar em outro lugar
[0] https://en.wikipedia.org/wiki/Five_lemma
Para pensar de forma simples, dá para considerar os objetos como tipos e as setas como funções entre tipos
Você começa no canto superior esquerdo e percorre dois caminhos, verificando os tipos. Se o diagrama passa corretamente na verificação de tipos, ele é dito comutativo, e os dois caminhos são equivalentes em algum sentido. O significado exato disso depende de vários detalhes que foram omitidos aqui
Um exemplo de categoria é a categoria de “conjuntos e funções”. Nessa categoria, todos os conjuntos imagináveis são objetos, isto é, nós, e todas as funções imagináveis entre quaisquer dois conjuntos são setas entre eles
Então, se você pegar uma seta de A para B e outra de B para C e compô-las como funções, obtém uma função de A para C
Um diagrama comutativo pode ser visto como um subconjunto da categoria inteira, em que, ao seguir todos os caminhos desenhados entre dois conjuntos X e Y e compor as setas de cada caminho, o resultado é sempre a mesma função
Nunca li sobre categorias superiores, então não tenho certeza sobre diagramas de colagem, mas provavelmente é uma generalização dessa ideia de alguma forma
Dá para exportar em um formato amigável para a web? Imagino que SVG seja o ideal. Se você roda o quiver em localhost, compartilhar por link não é uma opção
Quando fiz uma disciplina de teoria das categorias alguns anos atrás, o Quiver foi absolutamente indispensável. A UI era limpa e intuitiva, e os recursos eram suficientes. Não tem comparação com ficar brigando com TikZ
Produto muito bom. Antigamente eu costumava escrever código TikZ à mão e era bem rápido nisso, mas agora esqueci bastante, então isso parece muito útil para diagramas comutativos
Tem uma ferramenta de geração de código esperando para ser feita aqui
Já usei o Quiver várias vezes e sempre tive uma ótima experiência. Parabéns a quem fez