Quiver - Editor diagram komutatif modern

 (github.com/varkor)
1 poin oleh GN⁺ 2024-12-28 | 1 komentar | Bagikan ke WhatsApp
  • Quiver adalah editor untuk membuat diagram komutatif dan diagram pasting secara grafis, dengan dukungan rendering berkualitas tinggi untuk tampilan layar serta ekspor ke LaTeX dan Typst
  • Membuat dan mengubah diagram jauh lebih cepat daripada menulis LaTeX atau Typst secara manual, dan setelah terbiasa, kecepatan kerjanya bisa mendekati pena dan kertas
  • Dapat menangani diagram kompleks seperti pullback, pushout, adjunction, dan higher cell, serta menyediakan grid fleksibel yang menyesuaikan dengan ukuran label dan gaya panah yang bisa dikombinasikan
  • Dapat digunakan baik dengan drag mouse maupun shortcut keyboard, serta mendukung multi-select, undo·redo, makro pengguna, ekspor diagram yang dapat disematkan ke HTML, serta panning·zoom
  • Saat mengekspor ke LaTeX atau Typst, tautan diagram juga dapat disisipkan agar nantinya bisa dibuka kembali untuk diedit atau dibagikan ke orang lain

Apa yang dilakukan Quiver

Fitur pembuatan diagram

  • Menyediakan antarmuka yang efisien dan intuitif untuk membuat diagram komutatif kompleks dan diagram pasting
  • Contoh yang didukung antara lain:
    • diagram yang mencakup pullback dan pushout
    • adjunction
    • higher cell
  • Penempatan objek didasarkan pada grid fleksibel yang menyesuaikan dengan ukuran label
  • Panah dapat dikombinasikan dalam berbagai gaya
  • Warna dapat digunakan pada label dan panah
  • Dirancang agar tetap terlihat bagus di tangkapan layar, dan hasil ekspor ke LaTeX·Typst juga semirip mungkin dengan diagram aslinya

Metode input dan alur kerja pengeditan

  • Diagram dapat dibuat dan diubah dengan klik·drag menggunakan mouse
  • Menyediakan kumpulan shortcut keyboard untuk melakukan semua aksi, sehingga pengeditan berbasis keyboard juga dimungkinkan
  • Beberapa elemen dapat dipilih sekaligus agar perubahan massal lebih mudah dan cepat
  • Dengan sistem riwayat, pekerjaan dapat di-undo·redo
  • Mendukung panning dan zoom untuk menangani diagram besar
  • Menyediakan perataan label cerdas dan edge offset

Ekspor dan penggunaan ulang

  • Diagram dapat diekspor ke LaTeX atau Typst
  • Hasil ekspor menyertakan tautan untuk kembali ke diagram tersebut
    • Dapat dibuka kembali nanti saat perlu diedit
    • Dapat dibagikan ke orang lain
  • Juga mendukung ekspor diagram yang dapat disisipkan ke HTML
  • Makro kustom dapat digunakan dengan cara menempelkan URL file yang berisi \newcommand
  • Integrasi editor dapat dilihat pada dokumen Editor integration dan Quiver wiki

Syarat build dan menjalankan

  • Setelah menjalankan make di command line, hasil build dapat diperiksa dengan membuka src/index.html di browser
  • Jika versi Make atau Bash tidak cocok, rilis KaTeX terbaru dapat diunduh secara manual lalu ditempatkan di bawah src/KaTeX/
  • Jika path KaTeX tidak benar, akan muncul error kegagalan memuat KaTeX
  • Quiver harus dijalankan melalui localhost
  • Jika Python terpasang, jalankan make serve di direktori Quiver lalu buka localhost:8000 di browser
  • Jika ada masalah build, Anda dapat membuka issue GitHub yang berisi detail masalah tersebut

Bacaan terkait

1 komentar

 
GN⁺ 2024-12-28
Komentar Hacker News

  • Alat ini benar-benar luar biasa. Saya bisa membuat kubus Fourier-Poisson [0] dalam sekitar 10 menit, dan UI-nya juga sangat intuitif
    Menurut saya, keputusan untuk fokus pada diagram komutatif alih-alih kanvas bebas adalah pilihan yang brilian karena membuatnya rapi dan mudah digunakan. Seandainya saya punya ini saat menulis paper, saya pasti akan menghemat banyak waktu
    [0] https://q.uiver.app/#q=WzAsOCxbMCwxLCJnIFxcdGV4dHsgb24gfVxcb...

    • Bagi yang penasaran soal ini, A First Course in Fourier Analysis karya Kammler tampaknya bisa dijadikan referensi

  • Dalam konteks yang mirip, baru-baru ini editor Petri net ini cukup mengesankan: https://pes.vsb.cz/petrineteditor/#/model
    Petri net itu keren. Rasanya mirip jika mesin keadaan hingga dibuat multithreaded
    Saya pertama kali mengenal Petri net saat membaca tulisan dari organisasi bernama “statebox”. Statebox tertarik pada Petri net, diagram komutatif, dan berbagai konsep teori kategori, dan setelah membaca beberapa paper saya jadi terpikat dan bermimpi bisa bekerja di sana. Sayangnya, sekarang situs webnya hanya menampilkan frasa “imagine being a category theorist” dan emoji tertawa-sampai-menangis, jadi saya tidak tahu apa yang terjadi

  • Beberapa hari lalu saya memakai ini untuk menggambar diagram sederhana [0] yang akan dimasukkan ke buku saya [1]
    Sayangnya karena ini khusus untuk teori kategori, dukungannya untuk menghias node dengan cantik tidak banyak, tetapi tentu saja itu bisa ditangani dengan LaTeX
    [0] https://q.uiver.app/#q=WzAsNSxbMSw2LCJcXHRleHR7TmF0dXJhbCBEZ...
    [1] http://abstractionlogic.com

  • Tadi malam saya sedang memakai https://tikzcd.yichuanshen.de/, yang terasa seperti versi alat ini dengan fitur lebih sedikit. Meski begitu, itu cukup bagus untuk membuat diagram sederhana

  • Bisa jelaskan apa itu diagram komutatif dan diagram tempel kepada seorang pengembang perangkat lunak yang rendah hati dan tidak terlalu hebat?
    Artikel Wikipedia terlalu abstrak untuk dipahami di tingkat dasar [0]
    [0]: https://en.wikipedia.org/wiki/Commutative_diagram

    • Itu hanyalah cara yang enak dilihat untuk menuliskan persamaan antara fungsi-fungsi, atau hal lain yang dikomposisikan seperti fungsi
      Jika ada f di atas A → B, itu menyatakan fungsi f yang menerima masukan dari A dan menghasilkan keluaran di B
      Diagram dengan A → B sebagai f, lalu B → C sebagai g, dan A → C sebagai h berarti g ∘ f = h, yaitu melakukan f lalu g sama dengan melakukan h. Karena domain dan kodomain tiap fungsi ditulis bersama, jadi mudah melihat apakah fungsi-fungsi itu bisa dikomposisikan, yaitu apakah lolos pemeriksaan tipe
      Karena lintasan di dalam diagram juga dikomposisikan seperti fungsi, notasi ini terasa sangat alami. Misalnya, sifat asosiatif sudah tertanam dalam notasinya, jadi A→B→C→D adalah satu-satunya cara menyatakan komposisi tiga fungsi, dan perbedaan antara (f∘g)∘h dan f∘(g∘h) bahkan tidak bisa dituliskan
    • Diagram komutatif adalah kumpulan sisi berarah antara node-node, yaitu graf berarah, yang juga memuat klaim bahwa sembarang dua lintasan yang berawal di node yang sama dan berakhir di node yang sama dianggap setara dalam suatu makna
      Secara umum, jika pada multigraf berarah ditambahkan penjelasan tentang lintasan mana yang setara dan mana yang tidak, lalu relasi kesetaraan ini memenuhi beberapa sifat dasar, itu disebut kategori. Konsep ini sangat sering muncul dalam matematika, logika abstrak, dan sebagainya. Diagram komutatif berguna dalam konteks ini untuk dengan cepat menalar kesetaraan lintasan secara visual
    • Setiap huruf besar adalah tipe, dan setiap huruf kecil adalah fungsi dari satu tipe ke tipe lain. Jika mengikuti lintasan pada diagram, Anda bisa menyatakan beberapa pemanggilan fungsi. Misalnya, mengikuti f lalu g lalu n menyatakan n(g(f(a))). Itulah diagram, dan ketika diagram dikatakan komutatif, artinya mengikuti sembarang dua lintasan dengan titik awal dan akhir yang sama akan memberikan hasil yang sama
      Jadi n(g(f(•))), s(r(l(•))), dan s(m(f(•))) semuanya adalah lintasan dari A ke C' sekaligus pemanggilan fungsi, dan karena diagramnya komutatif, semua lintasan ini sama
      Monomorfisme, epimorfisme, dan isomorfisme semuanya adalah sifat penting dari fungsi, yang memungkinkan Anda “mencoret” suku tertentu di kedua sisi persamaan. Misalnya, secara umum dari f(g(x))=f(h(x)) Anda tidak bisa menyimpulkan g(x)=h(x). Jika f bisa dicoret dengan cara ini, itu disebut monomorfisme. Demikian pula, jika dari g(f(x))=h(f(x)) Anda bisa mencoret f dan memperoleh g(x)=h(x), maka f adalah epimorfisme. Isomorfisme memenuhi keduanya. Karena sifat-sifat ini, dalam situasi tertentu Anda bisa “berjalan mundur” pada sebagian lintasan diagram
      Salah satu bentuk teorema yang bisa dilihat dalam teori kategori adalah seperti pada contoh five lemma[0]: “lihat diagram ini. Jika g adalah epimorfisme dan h adalah monomorfisme, maka f adalah isomorfisme.” Artinya, jika Anda tahu bahwa pencoretan bisa dilakukan dari sisi ini dan sisi itu, maka Anda juga tahu bahwa itu bisa dilakukan di sisi yang lain
      [0] https://en.wikipedia.org/wiki/Five_lemma

      five lemma menyatakan bahwa jika baris-barisnya adalah eksak sequence, m dan p adalah isomorfisme, l adalah epimorfisme, dan q adalah monomorfisme, maka n juga isomorfisme

    • Ini adalah cara untuk menunjukkan bahwa dua lintasan melalui suatu diagram sama dalam makna tertentu. Titik-titik pada sudut adalah objek dan panah adalah morfisme
      Untuk pemahaman sederhana, anggap saja objek sebagai tipe dan panah sebagai fungsi antar tipe
      Mulailah dari sudut kiri atas dan telusuri dua lintasan sambil memeriksa tipenya. Jika diagramnya lolos pemeriksaan tipe, maka ia komutatif, dan kedua lintasan itu setara dalam suatu makna. Makna pastinya bergantung pada berbagai detail yang diabaikan di sini
    • Membaca definisi kategori mungkin akan membantu. Memang sangat abstrak, tetapi cukup sederhana karena hanya punya beberapa aksioma
      Salah satu contoh kategori adalah kategori “himpunan dan fungsi”. Dalam kategori itu, semua himpunan yang bisa dibayangkan adalah objek, yaitu node, dan semua fungsi yang mungkin antara dua himpunan mana pun adalah panah di antara keduanya
      Jadi jika Anda mengambil satu panah dari A ke B dan satu panah dari B ke C lalu mengomposisikannya seperti fungsi, Anda akan mendapatkan fungsi dari A ke C
      Diagram komutatif bisa dipandang sebagai himpunan bagian dari seluruh kategori, dan jika Anda menelusuri semua lintasan yang digambar antara dua himpunan X dan Y lalu mengomposisikan panah-panah pada tiap lintasan, hasilnya adalah fungsi yang sama
      Saya belum pernah membaca tentang kategori tingkat tinggi, jadi saya tidak yakin tentang diagram tempel, tetapi kemungkinan besar itu adalah semacam generalisasi dari ide ini

  • Apakah bisa diekspor ke format yang ramah web? Mungkin SVG adalah pilihan yang tepat. Jika menjalankan quiver di localhost, berbagi lewat tautan bukanlah opsi

  • Saat mengambil kelas teori kategori beberapa tahun lalu, Quiver benar-benar sangat penting. UI-nya rapi dan intuitif, dan fiturnya juga cukup. Dibandingkan harus bergulat dengan TikZ, ini jelas jauh lebih unggul

  • Produk yang sangat bagus. Dulu saya biasanya menulis kode TikZ dengan tangan dan cukup cepat melakukannya, tetapi sekarang sudah banyak lupa, jadi ini tampaknya sangat berguna untuk diagram komutatif

  • Di sini tersembunyi sebuah alat pembuat kode yang layak dibuat

  • Saya sudah beberapa kali memakai Quiver, dan setiap kali pengalamannya selalu bagus. Kerja bagus untuk para pembuatnya