Quiver – Moderner Editor für kommutative Diagramme

 (github.com/varkor)
1 Punkte von GN⁺ 2024-12-28 | 1 Kommentare | Auf WhatsApp teilen
  • Quiver ist ein Editor, mit dem sich kommutative Diagramme und Pasting-Diagramme grafisch erstellen lassen; er unterstützt hochwertige Renderings für die Bildschirmdarstellung sowie den Export nach LaTeX und Typst
  • Diagramme lassen sich deutlich schneller erstellen und bearbeiten als durch manuelles Schreiben von LaTeX oder Typst; mit etwas Übung erreicht man eine Arbeitsgeschwindigkeit, die Stift und Papier nahekommt
  • Es können komplexe Diagramme wie Pullbacks, Pushouts, Adjunctions und Higher Cells bearbeitet werden; außerdem bietet Quiver ein flexibles Grid, das sich an die Labelgröße anpasst, sowie kombinierbare Pfeilstile
  • Die Bedienung ist sowohl per Maus-Drag als auch über Tastenkürzel möglich; unterstützt werden Mehrfachauswahl, Undo/Redo, Benutzer-Makros, Export von in HTML einbettbaren Diagrammen sowie Panning und Zoom
  • Beim Export nach LaTeX oder Typst wird ein Diagramm-Link mit eingefügt, sodass es später erneut geöffnet, bearbeitet oder mit anderen geteilt werden kann

Was Quiver macht

Funktionen zum Erstellen von Diagrammen

  • Quiver bietet eine effiziente und intuitive Oberfläche zum Erstellen komplexer kommutativer Diagramme und Pasting-Diagramme
  • Unterstützte Beispiele sind unter anderem:
    • Diagramme mit Pullbacks und Pushouts
    • Adjunctions
    • Higher Cells
  • Die Platzierung von Objekten basiert auf einem flexiblen Grid, das sich an die Größe der Labels anpasst
  • Pfeile können aus verschiedenen Stilen kombiniert werden
  • Labels und Pfeile können farbig dargestellt werden
  • Quiver ist so gestaltet, dass Diagramme auch in Screenshots gut aussehen und die nach LaTeX oder Typst exportierten Ergebnisse dem ursprünglichen Diagramm möglichst nahekommen

Eingabemethoden und Bearbeitungs-Workflow

  • Diagramme können per Mausklick und Drag-and-drop erstellt und bearbeitet werden
  • Ein Satz von Tastenkürzeln für alle Aktionen ermöglicht auch tastaturbasierte Bearbeitung
  • Mehrere Elemente können gleichzeitig ausgewählt werden, um Änderungen in größerem Umfang einfach und schnell vorzunehmen
  • Über ein History-System lassen sich Arbeitsschritte rückgängig machen und wiederholen
  • Für große Diagramme werden Panning und Zoom unterstützt
  • Quiver bietet intelligente Label-Ausrichtung und Edge Offset

Export und Wiederverwendung

  • Diagramme können nach LaTeX oder Typst exportiert werden
  • Das exportierte Ergebnis enthält einen Link, der zurück zum jeweiligen Diagramm führt
    • Es kann später erneut geöffnet werden, wenn Änderungen nötig sind
    • Es kann mit anderen Personen geteilt werden
  • Auch der Export von Diagrammen, die in HTML eingebettet werden können, wird unterstützt
  • Benutzerdefinierte Makros können verwendet werden, indem die URL einer Datei eingefügt wird, die \newcommand enthält
  • Informationen zur Editor-Integration finden sich in der Dokumentation Editor integration und im Quiver-Wiki

Build und Laufzeitbedingungen

  • Nach dem Ausführen von make auf der Kommandozeile kann src/index.html im Browser geöffnet werden, um das Build-Ergebnis zu prüfen
  • Wenn die Versionen von Make oder Bash nicht passen, kann die neueste KaTeX-Version manuell heruntergeladen und unter src/KaTeX/ abgelegt werden
  • Ist der KaTeX-Pfad nicht korrekt, tritt ein Fehler beim Laden von KaTeX auf
  • Quiver muss über localhost ausgeführt werden
  • Wenn Python installiert ist, kann im Quiver-Verzeichnis make serve ausgeführt und anschließend im Browser localhost:8000 geöffnet werden
  • Bei Build-Problemen kann ein GitHub-Issue mit einer Beschreibung des Problems erstellt werden

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-12-28
Hacker-News-Kommentare

  • Dieses Tool ist wirklich hervorragend. Ich konnte den Fourier-Poisson-Würfel [0] in etwa 10 Minuten erstellen, und die UI ist sehr intuitiv.
    Dass es nicht als freie Zeichenfläche konzipiert ist, sondern sich auf kommutative Diagramme konzentriert, halte ich für eine ausgezeichnete Entscheidung, die es aufgeräumt und leicht bedienbar macht. Wenn es das gegeben hätte, als ich meine Arbeiten geschrieben habe, hätte ich wohl enorm viel Zeit gespart.
    [0] https://q.uiver.app/#q=WzAsOCxbMCwxLCJnIFxcdGV4dHsgb24gfVxcb...

    • Für alle, die daran interessiert sind: Kammlers A First Course in Fourier Analysis scheint die passende Referenz zu sein.

  • In einem ähnlichen Zusammenhang fand ich kürzlich diesen Petri-Netz-Editor ziemlich beeindruckend: https://pes.vsb.cz/petrineteditor/#/model
    Petri-Netze sind cool. Wenn man endliche Automaten multithreaded macht, kommt es diesem Gefühl ziemlich nahe.
    Zum ersten Mal bin ich auf Petri-Netze gestoßen, als ich Texte einer Organisation namens „statebox“ gelesen habe. Statebox interessierte sich für Petri-Netze, kommutative Diagramme und verschiedene Konzepte der Kategorientheorie; nachdem ich ein paar Papers gelesen hatte, war ich fasziniert, und dort zu arbeiten wurde zu meinem Traum. Leider zeigt die Homepage heute nur noch den Satz „imagine being a category theorist“ und ein lachendes-bis-weinendes Emoji, daher weiß ich nicht, was passiert ist.

  • Vor ein paar Tagen habe ich es benutzt, um ein einfaches Diagramm [0] für mein Buch [1] zu zeichnen.
    Leider ist es auf Kategorientheorie spezialisiert und bietet daher nicht viel Unterstützung dafür, Nodes hübsch zu gestalten; natürlich kann man das aber mit LaTeX erledigen.
    [0] https://q.uiver.app/#q=WzAsNSxbMSw2LCJcXHRleHR7TmF0dXJhbCBEZ...
    [1] http://abstractionlogic.com

  • Gestern Abend habe ich https://tikzcd.yichuanshen.de/ benutzt; das ist eher eine Version dieses Tools mit weniger Funktionen. Für einfache Diagramme ist es aber trotzdem ziemlich ordentlich.

  • Könntest du einem bescheidenen und auch nicht besonders guten Softwareentwickler erklären, was kommutative Diagramme und Pasting-Diagramme sind?
    Der Wikipedia-Artikel war zu abstrakt, um ihn auf grundlegendem Niveau zu verstehen [0]
    [0]: https://en.wikipedia.org/wiki/Commutative_diagram

    • Es ist im Grunde nur eine übersichtliche Schreibweise für Gleichungen zwischen Funktionen oder anderen Dingen, die sich wie Funktionen zusammensetzen lassen.
      Wenn über A → B ein f steht, bedeutet das: eine Funktion f, die eine Eingabe aus A nimmt und eine Ausgabe in B erzeugt.
      Ein Diagramm, in dem A → B die Funktion f ist, von dort B → C die Funktion g und A → C die Funktion h, bedeutet g ∘ f = h, also dass erst f und dann g auszuführen dasselbe ist wie h auszuführen. Da Definitionsbereich und Zielbereich jeder Funktion mitgeschrieben werden, sieht man leicht, ob die Funktionen zusammensetzbar sind, also ob sie den Type-Check bestehen.
      Weil auch die Pfade im Diagramm selbst wie Funktionen zusammengesetzt werden, passt diese Notation sehr natürlich. Zum Beispiel ist das Assoziativgesetz praktisch in die Schreibweise eingebaut: A→B→C→D ist die einzige Darstellung für die Komposition von drei Funktionen, und den Unterschied zwischen (f∘g)∘h und f∘(g∘h) kann man gar nicht erst hinschreiben.
    • Ein kommutatives Diagramm ist eine Sammlung gerichteter Kanten zwischen Knoten, also ein gerichteter Graph, zusammen mit der Behauptung, dass beliebige zwei Pfade, die am selben Knoten beginnen und am selben Knoten enden, in einem bestimmten Sinn als gleich betrachtet werden.
      Allgemein nennt man einen gerichteten Multigraphen zusammen mit einer Beschreibung, welche seiner Pfade einander gleich sind und welche nicht, eine Kategorie, sofern diese Äquivalenzrelation einige grundlegende Eigenschaften erfüllt. Dieses Konzept taucht in der Mathematik, in abstrakter Logik usw. sehr häufig auf. Kommutative Diagramme sind in diesem Kontext nützlich, um Gleichheiten von Pfaden visuell schnell herzuleiten.
    • Jeder Großbuchstabe ist ein Typ, und jeder Kleinbuchstabe ist eine Funktion von einem Typ zu einem anderen. Wenn man einem Pfad im Diagramm folgt, kann man damit mehrere Funktionsaufrufe ausdrücken. Folgt man zum Beispiel erst f, dann g, dann n, steht das für n(g(f(a))). Das ist ein Diagramm, und zu sagen, dass das Diagramm kommutiert, bedeutet: Beliebige zwei Pfade mit demselben Start- und Endpunkt sind gleich.
      Daher sind n(g(f(•))), s(r(l(•))) und s(m(f(•))) alle Pfade bzw. Funktionsaufrufe von A nach C', und weil das Diagramm als kommutativ angenommen wurde, sind diese Pfade alle gleich.
      Monomorphismen, Epimorphismen und Isomorphismen sind alles wichtige Eigenschaften von Funktionen, die es erlauben, bestimmte Terme auf beiden Seiten einer Gleichung zu „kürzen“. Zum Beispiel kann man aus f(g(x))=f(h(x)) im Allgemeinen nicht schließen, dass g(x)=h(x) gilt. Wenn man f auf diese Weise kürzen kann, nennt man das einen Monomorphismus. Entsprechend ist f ein Epimorphismus, wenn man in g(f(x))=h(f(x)) f kürzen und g(x)=h(x) erhalten kann. Ein Isomorphismus erfüllt beides. Dank solcher Eigenschaften kann man in bestimmten Situationen Teile eines Diagramms „rückwärts entlanggehen“.
      Eine Form von Sätzen, die man in der Kategorientheorie sieht, ist etwa wie beim five lemma[0]: „Betrachte dieses Diagramm. Wenn g ein Epimorphismus und h ein Monomorphismus ist, dann ist f ein Isomorphismus.“ Mit anderen Worten: Wenn man weiß, dass man auf dieser und jener Seite kürzen kann, erfährt man, dass man auch auf einer weiteren Seite kürzen kann.
      [0] https://en.wikipedia.org/wiki/Five_lemma

      Das five lemma besagt: Wenn die Zeilen exakte Sequenzen sind, m und p Isomorphismen sind, l ein Epimorphismus ist und q ein Monomorphismus ist, dann ist auch n ein Isomorphismus.

    • Es ist eine Methode zu zeigen, dass zwei Pfade durch ein Diagramm in einem bestimmten Sinn gleich sind. Die Punkte an den Ecken sind Objekte, und die Pfeile sind Morphismen.
      Vereinfacht kann man sich die Objekte als Typen und die Pfeile als Funktionen zwischen Typen vorstellen.
      Man beginnt in der linken oberen Ecke und folgt den zwei Pfaden, während man die Typen prüft. Wenn das Diagramm korrekt typgeprüft ist, sagt man, es kommutiert; die beiden Pfade sind dann in irgendeinem Sinn äquivalent. Was das konkret bedeutet, hängt von vielen hier ausgelassenen Details ab.
    • Es dürfte helfen, die Definition einer Kategorie zu lesen. Sie ist sehr abstrakt, aber mit nur wenigen Axiomen ziemlich einfach.
      Ein Beispiel für eine Kategorie ist die Kategorie der „Mengen und Funktionen“. In dieser Kategorie sind alle denkbaren Mengen Objekte, also Knoten, und alle denkbaren Funktionen zwischen zwei beliebigen Mengen sind Pfeile zwischen diesen beiden.
      Nimmt man also einen Pfeil von A nach B und einen Pfeil von B nach C und setzt sie wie Funktionen zusammen, erhält man eine Funktion von A nach C.
      Ein kommutatives Diagramm kann man als Teilmenge der gesamten Kategorie ansehen; es ist der Fall, in dem beim Entlanggehen aller gezeichneten Pfade zwischen zwei Mengen X und Y und beim Zusammensetzen der Pfeile jedes Pfads dieselbe Funktion herauskommt.
      Über höhere Kategorien habe ich nichts gelesen, daher bin ich mir bei Pasting-Diagrammen nicht sicher, aber vermutlich sind sie eine Verallgemeinerung dieser Idee in irgendeiner Form.

  • Kann man in ein webfreundliches Format exportieren? Vermutlich wäre SVG passend. Wenn man quiver auf localhost laufen lässt, ist das Teilen per Link keine Option.

  • Als ich vor ein paar Jahren eine Vorlesung über Kategorientheorie besucht habe, war Quiver wirklich unverzichtbar. Die UI war sauber und intuitiv, und der Funktionsumfang reichte völlig aus. Im Vergleich dazu, sich mit TikZ herumzuschlagen, ist das kein Wettbewerb.

  • Ein sehr gutes Produkt. Früher habe ich normalerweise TikZ-Code von Hand geschrieben und war darin ziemlich schnell, aber inzwischen habe ich vieles vergessen; für kommutative Diagramme dürfte das hier sehr nützlich sein.

  • Darin steckt ein Codegenerierungstool, das man bauen könnte.

  • Ich habe Quiver mehrfach benutzt, und es war jedes Mal eine gute Erfahrung. Großartige Arbeit von den Entwicklern.