Quiver: A modern commutative diagram editor | Hacker News Reader

Quiver: A modern commutative diagram editor

github.com

343 pointsdustingetz52 comments

I'm happy to see people are interested in the editor!

Let me also point out that I wrote a short blog post about the motivation behind quiver, as well as some of its key features, here: https://varkor.github.io/blog/2020/11/25/announcing-quiver.h...

Are there any plans to make this a desktop app. I despise graphical editors in a browser

I've been considering it. If you'd find a desktop app useful, please do open an issue on GitHub: that way I can gauge the demand a little better, which will help me to prioritise what to work on next!

Please ignore Electron requests and consider the PWA approach.

Nice app by the way.

An electron wrapper?

It is written in JavaScript, so you will need a browser of some kind (Electron is basically a browser), unless it gets re-written in a different language.

Diagrams.net is using electron for the desktop app, it works really well (and is fast despite what people often beieve of electron)

The problems with Electron isn't speed, rather memory bloat and multiple Chrome copies scattered around the filesystem.

The path forward are PWAs and the ability to use them in any browser.

Otherwise don't cry that Web has turned into ChromeOS, when everyone and their dog is shipping Chrome alongside their application.

It's written in javascript, you entitled twerp! The author has created this beautiful tool for free in his/her spare time.

This looks like a really nice and well-made tool. Kudos and thanks for open sourcing!

One nitpick: Why do you use a Makefile without using any of the features of Make and then even requiring a special GNUMake feature to make things work like a shell script? Why not simply provide shell scripts in the first place?

I do this too, my reasons are:

* It's an old habit, I'm used to handwriting my own Makefiles for every project, and every time I start a new project it's an instinct to create a .gitignore and Makefile

* There is always a possibility of needing make features in the future. Like nowadays my makefiles have `make build` recipe which builds docker containers via docker-compose and a `make run` that depends on `build` and then shells into that container.

* make is easier to use than shell scripts since you can just do `make <cmd>` to run your command

Thanks! I use a Makefile simply because someone else contributed it early on in the development and it did the job, so I didn't see a reason to replace it. If there's a better way, I'd be happy to receive a pull request to change it!

There is also https://github.com/yishn/tikzcd-editor which I have used a few times.

It looks very similar to tikzcd-editor. Glad people are making tools like this -- I always felt so cool putting diagrams in my homework and tikzcd-editor was what allowed me to.

I'm sure the graders appreciated it, too, since my handwriting/drawing skills are lacking.

I also recommend http://latexdraw.sourceforge.net/

I wish there was such a tool creating Metapost code. Metapost output is much more readable than pstricks and far, far faster than TikZ. And FWIW, it's what Knuth uses.

This solves an entirely different problem.

I recommend IPE for this sort of thing (unless you need exactly this).

http://ipe.otfried.org/

It's by far the best diagramming tool for Latex.

Ipe is a lovely piece of software. I use it a lot and always feel that it deserves to be more well-known.

I do not find it especially good for commutative diagrams, though. I usually type tikz-cd code for those cases.

Commutative diagrams, and pasting diagrams in particular, are a precise mathematical notation that other tools just don't handle well. I don't know many diagram editors that support edges-between-edges.

Could you support nice-looking causal diagrams? Most look like the bubble-and-line diagrams in [Pearl 95](http://bayes.cs.ucla.edu/R218-B.pdf). I think it would increase their popularity (and the quality of science) if it was easy to include nice ones in papers & blogs.

I think you should already be able to draw most of the causal diagrams from that paper already: you can use `\circ` for the white circles and `\bullet` for the black ones. Perhaps the only missing feature is being able to draw double-ended arrows? That's on my to-do list; let me know if there's something else that's missing.

I tried this and documented my thoughts here: https://github.com/varkor/quiver/issues/45

What's a "commutative" diagram?

https://en.wikipedia.org/wiki/Commutative_diagram

It is a diagram whose vertices are mathematical objects and whose arrows are morphisms (often functions) between those objects such that any two paths between two vertices represent the same morphism/function. Typically it is used to infer information about one morphism or object using others, by keeping track of many properties at once in a graphical fashion.

Looks super nice.

Out of curiosity: Is there a way to do commutative diagrams well with graphviz ? I'd instinctively prefer do do such diagrams in a declarative way and let a layout engine worry about making it look nice. However, I never had to dabble into area that makes heavy use of such diagrams – maybe it's just too hard to make look good for typesetting.

I also have a theory that it would be good to have a re-implementation of the graphviz core to it more modular and make extensions such as Quiver more feasible, as from an outside, layman's view graphviz is pretty old and does not necessarily work well in today's frameworks other than encapsulating it with lotsa layers above it.

This looks incredibly well done, congrats!

A quick thing that occurs to me, adding all those elements by point and click appears to be extremely tedious, reminds me of working with music notation software and how I prefer much more something like lilypond.

This makes me wonder, is there some text serialization that could be written by hand? I picture something like graphviz notation. Quiver could use a force-directed layout as a first rough step, but users would then have to manually fix the diagram by dragging and dropping the nodes.

There's currently no direct textual input: I have considered it, but I feel it would be less efficient than the diagrammatic approach. Let me note that there is full keyboard support, which can be faster than drawing the diagrams by hand: you can see the keyboard shortcuts from the "Shortcuts" toolbar button.

I just took a cursory look at the Javascript source and looks like it's built without any view framework or even jQuery. Is this correct?

As a backend developer curious about such frontend development, could you write up on how to architecture large apps without a reactive view framework behind. Or, if a write-up like that exists, a pointer would also be great.

This is correct: I like having full control over the application behaviour (at least down to the browser), and for a relatively small implementation like this, it's quite manageable. I make no claim this is sensible, but I've been bitten by obscure bugs in large libraries before and this way I find debugging is much easier, because I typically only have to worry about my own code.

I'm not sure I would recommend this strategy to others. It very much comes down to a personal preference, and I imagine using an existing framework would be much more accessible to someone starting frontend development. I feel I might get some stick if I were to suggest this to newcomers :) I'm afraid I don't know of any existing write-ups!

I tried to draw my favourite commutative diagram.

Some UI troubles:

1. I would like to be able to move a node by dragging it around.

2. While the "b" key does its job to move the objects, it is very confusing because it pans the view so that the moving object is fixed, giving the impression that everything moves but the object in question.

You can move vertices by clicking and dragging in the empty space around them. I appreciate this isn't immediately intuitive and I'm trying to come up with a better way to reveal this to the user.

I also agree that fixing the view to the vertices with B can be confusing. My plan is to change this.

Thanks for your comments!

I guess the opposite behavior would be more intuitive. If you drag the interior of the node, it moves. To add a new arrow you drag from the immediate outside of the node.

Besides, in tikz I draw 3D commutative diagrams whose arrows pass in front/behind of each other. It is rather annoying to write the code for that, and it would be nice to do that somewhat automatically. Does quiver support this? For example, to draw a 3D cube.

EDIT: more comments: there are some important missing arrowhead styles. For example, if there are bijections in your diagram, it is common to use a single bidirectional arrow with two arrohweads.

There are open issues for these feature requests:

- Crossing over arrows: https://github.com/varkor/quiver/issues/19

- Two-headed arrows: https://github.com/varkor/quiver/issues/37

I hope to get to them before too long. Thanks for the suggestions!

Interesting choice of name. i was looking for such a tool. Gui are still limited in 2020

I was wondering about the name too, but the first example (and the logo) made it clear. It's just full of arrows.

It is a standard name in representation theory (https://en.wikipedia.org/wiki/Quiver_(mathematics)) which use a lot these kind of diagrams.

Arrows. Lots of arrows.

I remember the first time I tried to plot a vector field in MATLAB. In Mathematica, the function it is of course VectorPlot[]. I spent quite a bit of time fumbling around until I found that some funny MathWorks developer had named the equivalent function quiver() because, of course, it holds lots of arrows!

Unfortunate name collision with the macOS/iOS note taking app Quiver [1] which doesn't do diagrams, but does do LaTeX.

[1] https://happenapps.com

quiver is great. Basically Mac's Notes but for programmers.

Actually it does diagrams, sequence and flowchart. Sadly, the app has gotten more or less no development for at least 4 years and the developer has stopped responding to bug reports for at least a year. It's abandonware at this point.

I wish someone would make a cross-platform version of Quiver with a new cell type that replicates the Sublime PlainTasks plugin.

It's on my list of side projects that I never seem to put a dent into.

Sad to hear. I still use it.

Thanks for the correction! I used to use it too (I use Obsidian [1] now). Also sorry it hasn't been updated. I kind of felt that while powerful, it was also too complicated some times.

[1] https://obsidian.md

I enjoyed using Quiver (the note taking app) for a while, but switched to Windows for most of my professional work (at Microsoft). Now I just keep a folder called "Quiver" in my vscode workspace with my code snippets.

Oh wow, this would have been amazing for those Abstract Algebra courses way back when.

has anyone seen "The Stacks Project" ? it's very technical but it's nice and collaborative https://stacks.math.columbia.edu/

A vs code extension could be nice, if you use vscode already to write latex.

This looks fantastic, but is something I’ll probably never use.

Still a great job!

Wonder how difficult it would be to integrate this directly into a tool like TeXmacs which could use something like this?

Reply on news.ycombinator.com