Quiver: A modern commutative diagram editor

by dustingetz • 6 years ago

343 52 6 years ago

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

chalst• 6 years ago

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.

cartesiancat2• 6 years ago

This solves an entirely different problem.

3327• 6 years ago

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

flixic• 6 years ago

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

svxml• 6 years ago

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

CalChris• 6 years ago

Arrows. Lots of arrows.

JorgeGT• 6 years ago

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!

chris_st2• 6 years ago

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

marstall• 6 years ago

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

yborg• 6 years ago

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.

locusofself• 6 years ago

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.

choeger• 6 years ago

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?

gnulinux• 6 years ago

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

varkor8• 6 years ago

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!

IshKebab• 6 years ago

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.

alderz2• 6 years ago

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.

cartesiancat2• 6 years ago

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.

SatvikBeri• 6 years ago

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

alderz2• 6 years ago

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

cole-k• 6 years ago

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.

toomim• 6 years ago

What's a "commutative" diagram?

yots• 6 years ago

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

redvenom• 6 years ago

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.

varkor8• 6 years ago

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...

sirjaz• 6 years ago

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

varkor8• 6 years ago

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!

Aeolun2• 6 years ago

An electron wrapper?

pabs3• 6 years ago

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.

ta988• 6 years ago

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

da39a3ee• 6 years ago

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

selfishgene• 6 years ago

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

tlb• 6 years ago

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.

varkor8• 6 years ago

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.

Jeaye• 6 years ago

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

Aeolun2• 6 years ago

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

Still a great job!

sharat87• 6 years ago

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.

varkor8• 6 years ago

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!

mrcactu5• 6 years ago

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

golem14• 6 years ago

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.

emmanueloga_• 6 years ago

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.

varkor8• 6 years ago

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.

Gehinnn• 6 years ago

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

enriquto2• 6 years ago

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.

varkor8• 6 years ago

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!

enriquto2• 6 years ago

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.

Quiver: A modern commutative diagram editor

Related Stories