Quiver - editor moderno de diagramas conmutativos

 (github.com/varkor)
1 puntos por GN⁺ 2024-12-28 | 1 comentarios | Compartir por WhatsApp
  • Quiver es un editor para crear gráficamente diagramas conmutativos y diagramas de pegado, con renderizado de alta calidad para pantalla y exportación a LaTeX y Typst
  • Crear y modificar diagramas es mucho más rápido que escribir LaTeX o Typst a mano y, una vez que te acostumbras, se puede trabajar a una velocidad cercana a la de papel y lápiz
  • Puede manejar diagramas complejos como pullbacks, pushouts, adjunctions y higher cells, y ofrece una cuadrícula flexible que se ajusta según el tamaño de las etiquetas, además de estilos de flechas combinables
  • Se puede trabajar tanto con arrastrar y soltar del mouse como con atajos de teclado, y admite selección múltiple, deshacer y rehacer, macros personalizadas, exportación de diagramas incrustables en HTML, paneo y zoom
  • Al exportar a LaTeX o Typst, se puede insertar junto con el diagrama un enlace para volver a abrirlo más adelante, editarlo o compartirlo con otras personas

Qué hace Quiver

Funciones para crear diagramas

  • Ofrece una interfaz eficiente e intuitiva para crear diagramas conmutativos complejos y diagramas de pegado
  • Algunos ejemplos compatibles son:
    • diagramas con pullbacks y pushouts
    • adjunctions
    • higher cells
  • La colocación de objetos se basa en una cuadrícula flexible que se ajusta según el tamaño de las etiquetas
  • Las flechas pueden combinar distintos estilos
  • Se pueden usar colores en etiquetas y flechas
  • Está diseñado para que se vea bien en capturas de pantalla y para que lo exportado a LaTeX y Typst se parezca lo más posible al diagrama original

Métodos de entrada y flujo de edición

  • Los diagramas se pueden crear y modificar haciendo clic y arrastrando con el mouse
  • Incluye un conjunto de atajos de teclado para realizar todas las acciones, por lo que también permite edición basada en teclado
  • Se pueden seleccionar varios elementos a la vez para hacer cambios masivos de forma fácil y rápida
  • Su sistema de historial permite deshacer y rehacer el trabajo
  • Admite paneo y zoom para poder trabajar con diagramas grandes
  • Ofrece alineación inteligente de etiquetas y edge offset

Exportación y reutilización

  • Los diagramas se pueden exportar a LaTeX o Typst
  • El resultado exportado incluye un enlace para volver a ese diagrama
    • se puede reabrir más adelante si hace falta editarlo
    • se puede compartir con otras personas
  • También admite exportar diagramas que se pueden incrustar en HTML
  • Las macros personalizadas se pueden usar pegando la URL de un archivo que contenga \newcommand
  • La integración con editores se puede consultar en Editor integration y en la wiki de Quiver

Requisitos de compilación y ejecución

  • Se puede ejecutar make en la línea de comandos y luego abrir src/index.html en el navegador para comprobar el resultado de la compilación
  • Si la versión de Make o Bash no coincide, se puede descargar manualmente la versión más reciente de KaTeX y colocarla en src/KaTeX/
  • Si la ruta de KaTeX no es correcta, se producirá un error de carga de KaTeX
  • Quiver debe ejecutarse a través de localhost
  • Si Python está instalado, se puede ejecutar make serve en el directorio de Quiver y luego abrir localhost:8000 en el navegador
  • Si hay problemas con la compilación, se puede abrir un issue en GitHub con los detalles del problema

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-12-28
Opiniones de Hacker News

  • Esta herramienta es realmente excelente. Pude crear el cubo Fourier-Poisson [0] en unos 10 minutos, y la UI también es muy intuitiva.
    Me parece una gran decisión de diseño que se enfoque en diagramas conmutativos en vez de ser un lienzo libre; eso la hace limpia y fácil de usar. Si hubiera existido cuando escribía papers, creo que me habría ahorrado muchísimo tiempo.
    [0] https://q.uiver.app/#q=WzAsOCxbMCwxLCJnIFxcdGV4dHsgb24gfVxcb...

    • Para quien tenga curiosidad sobre esto, A First Course in Fourier Analysis de Kammler parece ser una referencia.

  • En una línea parecida, hace poco este editor de Petri nets me pareció bastante impresionante: https://pes.vsb.cz/petrineteditor/#/model
    Las Petri nets son geniales. Si haces que una máquina de estados finitos sea multithread, se siente algo parecido a esto.
    La primera vez que conocí las Petri nets fue leyendo un artículo de una organización llamada “statebox”. Statebox estaba interesada en Petri nets, diagramas conmutativos y varios conceptos de teoría de categorías; leí algunos papers, quedé fascinado y trabajar ahí se volvió mi sueño. Lamentablemente, ahora su página solo tiene la frase “imagine being a category theorist” y un emoji de risa con llanto, así que no sé qué pasó.

  • Hace unos días usé esto para dibujar un diagrama simple [0] para incluir en mi libro [1].
    Lamentablemente, como está dedicado a la teoría de categorías, no tiene mucho soporte para embellecer los nodos, aunque claro que se puede manejar con LaTeX.
    [0] https://q.uiver.app/#q=WzAsNSxbMSw2LCJcXHRleHR7TmF0dXJhbCBEZ...
    [1] http://abstractionlogic.com

  • Anoche estaba usando https://tikzcd.yichuanshen.de/, y es más o menos una versión con menos funciones de esta herramienta. Aun así, está bastante bien para crear diagramas simples.

  • ¿Podrías explicarle a un desarrollador de software humilde y no muy hábil qué son los diagramas conmutativos y los diagramas de pegado?
    El artículo de Wikipedia era demasiado abstracto para entenderlo a un nivel básico [0]
    [0]: https://en.wikipedia.org/wiki/Commutative_diagram

    • Es simplemente una forma prolija de escribir ecuaciones entre funciones, o entre otras cosas que se componen como funciones
      Si hay una f sobre A → B, representa una función f que toma una entrada de A y produce una salida de B
      Un diagrama donde A → B es f, luego B → C es g, y A → C es h, significa g ∘ f = h; es decir, hacer f y después g es lo mismo que hacer h. Como se escriben juntos el dominio y el codominio de cada función, resulta más fácil ver si las funciones se pueden componer, es decir, si pasan la verificación de tipos
      Como los propios caminos dentro del diagrama también se componen como funciones, esta notación encaja de forma muy natural. Por ejemplo, la ley asociativa está incorporada en la propia notación, de modo que A→B→C→D es la única expresión para componer tres funciones, y ni siquiera se puede escribir la diferencia entre (f∘g)∘h y f∘(g∘h)
    • Un diagrama conmutativo es una colección de aristas dirigidas entre nodos, es decir, un grafo dirigido, que además incluye la afirmación de que, en algún sentido, cualquier par de caminos que empiecen en el mismo nodo y terminen en el mismo nodo se consideran equivalentes
      En general, cuando a un multigrafo dirigido se le agrega una descripción de cuáles de sus caminos son equivalentes entre sí y cuáles no, y esa relación de equivalencia satisface algunas propiedades básicas, se lo llama categoría. Este concepto aparece con muchísima frecuencia en matemáticas, lógica abstracta, etc. En este contexto, los diagramas conmutativos son útiles para razonar visualmente y con rapidez sobre la equivalencia de caminos
    • Cada letra mayúscula es un tipo, y cada letra minúscula es una función que va de un tipo a otro. Si sigues un camino en el diagrama, puedes describir varias llamadas a funciones. Por ejemplo, si sigues f, luego g, luego n, eso representa n(g(f(a))). Eso es un diagrama, y decir que el diagrama conmuta significa que cualquier par de caminos con el mismo punto inicial y final son iguales
      Por eso n(g(f(•))), s(r(l(•))) y s(m(f(•))) son todos caminos de A a C' y también llamadas a funciones; como se dijo que el diagrama conmuta, todos esos caminos son iguales
      Los monomorfismos, epimorfismos e isomorfismos son propiedades importantes de las funciones, y permiten “cancelar” ciertos términos en ambos lados de una igualdad. Por ejemplo, en general no puedes concluir g(x)=h(x) a partir de f(g(x))=f(h(x)). Si f se puede cancelar de esta manera, se la llama monomorfismo. De forma similar, si en g(f(x))=h(f(x)) se puede cancelar f y obtener g(x)=h(x), entonces f es un epimorfismo. Un isomorfismo cumple ambas cosas. Gracias a estas propiedades, en ciertas situaciones se puede “caminar hacia atrás” por algunos caminos del diagrama
      Una forma de teorema que se ve en teoría de categorías es algo como el five lemma[0]: “mira este diagrama. Si g es un epimorfismo y h es un monomorfismo, entonces f es un isomorfismo”. Es decir, si sabes que puedes cancelar de este lado y de aquel, entonces también sabes que puedes cancelar de otro lado
      [0] https://en.wikipedia.org/wiki/Five_lemma

      El five lemma dice que, si las filas son sucesiones exactas, m y p son isomorfismos, l es un epimorfismo y q es un monomorfismo, entonces n también es un isomorfismo

    • Es una forma de mostrar que dos caminos a través de un diagrama son iguales en algún sentido. Los puntos en las esquinas son objetos y las flechas son morfismos
      Para pensarlo de forma simple, puedes ver los objetos como tipos y las flechas como funciones entre tipos
      Empiezas en la esquina superior izquierda y recorres dos caminos, verificando los tipos. Si el diagrama se verifica correctamente en tipos, se dice que conmuta, y los dos caminos son equivalentes en algún sentido. El significado concreto depende de muchos detalles que se omiten aquí
    • Leer la definición de categoría debería ayudar. Es muy abstracta, pero tiene pocos axiomas, así que es bastante simple
      Un ejemplo de categoría es la categoría de “conjuntos y funciones”. En esa categoría, todos los conjuntos que puedas imaginar son objetos, es decir, nodos, y todas las funciones imaginables entre cualquier par de conjuntos son flechas entre ellos
      Así que si tomas una flecha de A a B y una flecha de B a C, y las compones como funciones, obtienes una función de A a C
      Un diagrama conmutativo puede verse como un subconjunto de toda la categoría, donde al seguir todos los caminos dibujados entre dos conjuntos X e Y y componer las flechas de cada camino se obtiene la misma función
      No he leído sobre categorías de orden superior, así que no estoy seguro sobre los diagramas de pegado, pero probablemente sean alguna generalización de esta idea

  • ¿Se puede exportar en un formato amigable para la web? Probablemente SVG sea lo adecuado. Si ejecutas quiver en localhost, compartir mediante enlace no es una opción

  • Cuando tomé una clase de teoría de categorías hace unos años, Quiver fue realmente indispensable. La UI era limpia e intuitiva, y tenía suficientes funciones. Comparado con pelearse con TikZ, no había punto de comparación

  • Es un producto muy bueno. Antes normalmente escribía código TikZ a mano, y era bastante rápido, pero ahora ya se me olvidó bastante, así que esto me parece muy útil para diagramas conmutativos

  • Aquí hay escondida una herramienta de generación de código que valdría la pena crear

  • He usado Quiver varias veces y siempre fue una buena experiencia. Excelente trabajo de sus creadores