Quiver - モダンな可換（commutative）ダイアグラムエディタ
(github.com/varkor)- Quiverは、可換ダイアグラムと貼り合わせダイアグラムをグラフィカルに作成し、画面向けの高品質レンダリングと LaTeX・Typst へのエクスポートに対応するエディタ
- 手で LaTeX や Typst を書くよりもダイアグラムの作成・修正がはるかに速く、慣れればペンと紙に近い作業速度を出せる
- pullback、pushout、adjunction、higher cell のような複雑なダイアグラムを扱え、ラベルサイズに応じて調整される柔軟なグリッドと、組み合わせ可能な矢印スタイルを提供
- マウスドラッグとキーボードショートカットの両方で作業でき、複数選択、元に戻す・やり直し、ユーザーマクロ、HTML 埋め込み用ダイアグラムのエクスポート、パン・ズームに対応
- LaTeX や Typst にエクスポートする際、ダイアグラムへのリンクも一緒に挿入され、後から再度開いて修正したり、他の人と共有したりできる
Quiver ができること
- Quiverは、可換ダイアグラムと貼り合わせダイアグラムを作成するためのモダンなグラフィカルエディタ
- 画面上で見栄えのよい高品質なダイアグラムをレンダリングし、LaTeX は tikz-cd 経由で、Typst は fletcher 経由でエクスポートできる
- Web から直接 q.uiver.app で試せる
- 効率的な使い方や、キーボードだけでダイアグラムを作成・修正する方法は Quiver チュートリアル にまとめられている
ダイアグラム作成機能
- 複雑な可換ダイアグラムや貼り合わせダイアグラムを作成するための、効率的で直感的なインターフェースを提供
- 対応例は次のとおり
- pullback と pushout を含むダイアグラム
- adjunction
- higher cell
- オブジェクトの配置は、ラベルサイズに応じて調整される柔軟なグリッドを基盤にしている
- 矢印はさまざまなスタイルを組み合わせられる
- ラベルと矢印に色を使える
- スクリーンショットでも見栄えがよく、LaTeX・Typst にエクスポートした結果も元のダイアグラムにできるだけ近く見えるよう設計されている
入力方法と編集ワークフロー
- ダイアグラムはマウスでクリック・ドラッグして作成・修正できる
- すべての操作を実行できるキーボードショートカット一式を提供し、キーボード中心の編集も可能
- 複数の要素を一度に選択して、一括変更を簡単かつ素早く行える
- 履歴システムにより、作業を元に戻す・やり直すことができる
- 大きなダイアグラムを扱えるよう、パンとズームに対応
- スマートなラベル整列と edge offset を提供
エクスポートと再利用
- ダイアグラムを LaTeX や Typst にエクスポートできる
- エクスポート結果には、そのダイアグラムに戻れるリンクが含まれる
- 後から修正が必要になったときに再度開ける
- 他の人と共有できる
- HTML に埋め込み可能なダイアグラムのエクスポートにも対応
- ユーザー定義マクロは、
\newcommandが含まれるファイルの URL を貼り付ける方式で利用できる - エディタ連携は Editor integration ドキュメントと Quiver wiki で確認できる
ビルドと実行条件
- コマンドラインで
makeを実行した後、src/index.htmlをブラウザで開くとビルド結果を確認できる - Make や Bash のバージョンが合わない場合は、KaTeX の最新リリースを手動でダウンロードし、
src/KaTeX/配下に置くことができる - KaTeX のパスが正しくない場合、KaTeX のロード失敗エラーが発生する
- Quiver は localhost 経由で実行する必要がある
- Python がインストールされていれば、Quiver ディレクトリで
make serveを実行した後、ブラウザでlocalhost:8000を開ける - ビルドに問題がある場合は、問題内容を添えて GitHub Issue を開ける
1件のコメント
Hacker News のコメント
このツールは本当に素晴らしい。Fourier-Poisson cube [0] を10分ほどで作れたし、UIも非常に直感的だった
自由なキャンバスではなく可換図式に焦点を当てた設計は、すっきりして使いやすくしている優れた選択だと思う。論文を書いていたときにこれがあれば、ものすごく時間を節約できただろう
[0] https://q.uiver.app/#q=WzAsOCxbMCwxLCJnIFxcdGV4dHsgb24gfVxcb...
似た文脈で、最近この Petri net editor がかなり印象的だった: https://pes.vsb.cz/petrineteditor/#/model
Petri net は面白い。有限状態機械をマルチスレッド化すると、だいたいこういう感じに近い
初めて Petri net を知ったのは、「statebox」という組織の記事を読んだときだった。Statebox は Petri net と可換図式、そしてさまざまな圏論の概念に関心を持っていて、論文をいくつか読んで魅了され、そこで働くのが夢になった。残念ながら今のホームページには「imagine being a category theorist」という文言と笑い泣きの絵文字しかなく、何があったのか分からない
数日前、自分の本 [1] に入れる簡単な図 [0] を描くのにこれを使った
残念ながら圏論専用なのでノードをきれいに装飾するサポートはあまり多くないが、もちろん LaTeX で処理することはできる
[0] https://q.uiver.app/#q=WzAsNSxbMSw2LCJcXHRleHR7TmF0dXJhbCBEZ...
[1] http://abstractionlogic.com
昨夜 https://tikzcd.yichuanshen.de/ を使っていたが、このツールの機能が少ない版に近い。それでも簡単な図式を作るにはかなり良い
可換図式と貼り合わせ図式が何なのか、謙虚で腕前も大したことのないソフトウェア開発者に説明してもらえるだろうか？
Wikipedia の記事は、基本レベルで理解するには抽象的すぎた [0]
[0]: https://en.wikipedia.org/wiki/Commutative_diagram
A → Bの上にfがあれば、A の入力を受け取って B の出力を作る関数 f を表すA → Bがfで、そこからB → Cがg、A → Cがhである図式はg ∘ f = h、つまり f を行ったあとに g を行うことと、h を行うことが同じだという意味。各関数の定義域と値域を一緒に書くので、関数が合成可能か、つまり型チェックに通るかが見やすくなる図式内の経路自体も関数のように合成されるので、この記法はとても自然に噛み合う。たとえば結合法則は記法そのものに組み込まれていて、
A→B→C→Dは3つの関数を合成する唯一の表現であり、(f∘g)∘hとf∘(g∘h)の違いをそもそも書くこともできない一般には有向多重グラフに、その経路のうちどれが互いに同等で、どれがそうでないかについての説明が付いており、この同値関係がいくつかの基本的な性質を満たすと、それを圏と呼ぶ。この概念は数学や抽象論理などで非常によく登場する。可換図式は、この文脈で経路の同等性を視覚的に素早く推論するのに役立つ
n(g(f(a)))を表す。これが図式であり、図式が可換だというのは、始点と終点が同じ任意の2つの経路をたどると互いに等しいという意味したがって
n(g(f(•)))、s(r(l(•)))、s(m(f(•)))はすべて A から C' へ行く経路であり関数呼び出しでもあり、図式が可換だと言っているので、これらの経路はすべて等しい単射射、全射射、同型射はいずれも関数の重要な性質で、等式の両辺から特定の項を「消去」できるようにしてくれる。たとえば一般に
f(g(x))=f(h(x))だからといってg(x)=h(x)と結論することはできない。f をこのように消去できるなら単射射と呼ぶ。同様にg(f(x))=h(f(x))から f を消去してg(x)=h(x)を得られるなら、f は全射射である。同型射はその両方を満たす。こうした性質のおかげで、特定の状況では図式の一部の経路を「逆にたどる」ことができる圏論で見られる定理の一形態は、five lemma[0] のような例で、「この図式を見よ。g が全射射で h が単射射なら f は同型射である」という形になる。つまり、こちら側とあちら側で消去できることが分かれば、別の側でも消去できることが分かる
[0] https://en.wikipedia.org/wiki/Five_lemma
単純に考えるなら、対象を型、矢印を型同士の関数と見ればよい
左上の角から始めて2つの経路をたどりながら型を確認する。図式が正しく型チェックされれば可換するといい、2つの経路はある意味で同等になる。その具体的な意味は、ここでは省いた多くの詳細によって変わる
圏の例として「集合と関数」の圏がある。その圏では、考えられるすべての集合が対象、つまりノードとしてあり、任意の2つの集合の間に考えられるすべての関数が、その2つの間の矢印としてある
そこで A から B へ行く矢印を1つ、B から C へ行く矢印を1つ取って関数のように合成すると、A から C へ行く関数が得られる
可換図式は圏全体の部分集合と見なせ、2つの集合 X と Y の間に描かれたすべての経路をたどって各経路の矢印を合成すると、同じ関数が出てくる場合のこと
高次圏については読んだことがないので貼り合わせ図式は確かではないが、おそらくこのようなアイデアを何らかの形で一般化したものだろう
Web に適した形式でエクスポートできるのだろうか？ おそらく SVG が妥当だと思う。quiver を localhost で動かすなら、リンクで共有するのは選択肢にならない
数年前に圏論の授業を受けていたとき、Quiver は本当に不可欠だった。UI はすっきりしていて直感的で、機能も十分だった。TikZ と格闘するのに比べれば勝負にならない
とても良い製品。以前は普通 TikZ コードを手書きしていて、かなり速く書けたが、今ではだいぶ忘れてしまったので、可換図式にはこれが非常に役立ちそう
ここには作る価値のあるコード生成ツールが隠れている
Quiver は何度も使ってきたが、毎回良い体験だった。作者の方々は素晴らしい