Quiver: A modern commutative diagram editor

(github.com)

343 points | by dustingetz 1219 days ago

19 comments

  • varkor 1219 days 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 1219 days ago
      Are there any plans to make this a desktop app. I despise graphical editors in a browser
      • varkor 1219 days 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!
        • pjmlp 1218 days ago
          Please ignore Electron requests and consider the PWA approach.

          Nice app by the way.

      • ta988 1219 days ago
        Diagrams.net is using electron for the desktop app, it works really well (and is fast despite what people often beieve of electron)
        • pjmlp 1218 days ago
          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.

      • Aeolun 1219 days ago
        An electron wrapper?
      • da39a3ee 1219 days ago
        It's written in javascript, you entitled twerp! The author has created this beautiful tool for free in his/her spare time.
      • pabs3 1219 days 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.
  • choeger 1219 days 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 1219 days 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

    • varkor 1219 days 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!
  • alderz 1219 days ago
    There is also https://github.com/yishn/tikzcd-editor which I have used a few times.
    • cole-k 1219 days 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.

  • armanboyaci 1219 days ago
    • chalst 1219 days 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.
    • cartesiancat 1219 days ago
      This solves an entirely different problem.
  • IshKebab 1219 days 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.

    • cartesiancat 1219 days 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.
    • alderz 1219 days 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.

  • tlb 1219 days 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.
    • Jeaye 1219 days ago
      I tried this and documented my thoughts here: https://github.com/varkor/quiver/issues/45
    • varkor 1219 days 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.
  • toomim 1219 days ago
    What's a "commutative" diagram?
    • yots 1219 days ago
    • redvenom 1219 days 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.
  • golem14 1219 days 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_ 1219 days 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.

    • varkor 1218 days 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.
  • sharat87 1219 days 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.

    • varkor 1218 days 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!

  • enriquto 1219 days 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.

    • varkor 1218 days 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!

      • enriquto 1218 days 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.

  • 3327 1219 days ago
    Interesting choice of name. i was looking for such a tool. Gui are still limited in 2020
    • chris_st 1219 days 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

      • yborg 1219 days 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.
        • c17r 1219 days ago
          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.

        • chris_st 1218 days ago
          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

        • brailsafe 1219 days ago
          Sad to hear. I still use it.
      • locusofself 1219 days 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.
      • marstall 1219 days ago
        quiver is great. Basically Mac's Notes but for programmers.
    • JorgeGT 1219 days 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!
    • flixic 1219 days ago
      I was wondering about the name too, but the first example (and the logo) made it clear. It's just full of arrows.
    • CalChris 1219 days ago
      Arrows. Lots of arrows.
  • SatvikBeri 1219 days ago
    Oh wow, this would have been amazing for those Abstract Algebra courses way back when.
  • mrcactu5 1219 days ago
    has anyone seen "The Stacks Project" ? it's very technical but it's nice and collaborative https://stacks.math.columbia.edu/
  • Gehinnn 1219 days ago
    A vs code extension could be nice, if you use vscode already to write latex.
  • Aeolun 1219 days ago
    This looks fantastic, but is something I’ll probably never use.

    Still a great job!

  • selfishgene 1219 days ago
    Wonder how difficult it would be to integrate this directly into a tool like TeXmacs which could use something like this?
  • trail1234 1219 days ago
    sdfasdfasdf