Why we need a flowchart editor that doesn't give you carpal tunnel
This is a post about why I'm making knotend, a flowchart editor designed for speed, and why we need to get away from mouse-based flowchart editors.
As a programmer, I've worked on a lot of large projects and I always found that none of our project management tools were good at letting us define dependencies between tasks. This is a major pain because the connections between tasks give you critical information about how to accomplish those tasks.
I started thinking about why these tools don't have a good graphical view of dependencies. My belief is that we haven't found a good interface for editing directed graphs rapidly. Speed is important because people won't bother to update the graph if it's cumbersome. With most flowcharting tools you drag boxes around to position them, then drag arrows to connect them. There's usually a zoomable 2D canvas. After dragging around boxes for a few minutes you need to take a break and ice your wrists. It's just too slow, there's too many micro-interactions, and it distracts you from what matters most: defining your dependencies.
My first goal was to make a keyboard-centric interface for editing graphs. This is drastically different than the common representation of a flowchart as a zoomable canvas. Traditionally you can place a box at any pixel that you like, so you need an input mode that operates on the granularity of pixels, like a mouse.
I decided to have knotend use a 2D grid, similar to a spreadsheet, but with padding between the cells. Every node must go in one cell of the grid, and every node is the same size. In addition to this, the user cannot choose how the nodes are layed out. That's determined by an autolayout algorithm that looks at the dependencies. You can view a demo here.
Since the layout is constrained to a grid, we can add a similar selection/navigation mechanism that you find in a spreadsheet. For example if there's a node 3 cells over to the right, I could hit -> 3 times to move there, then hit Tab to create a new child node (or Shift-Tab to add a parent node).
As a comparison, have you ever thought about how easy it is to edit a bulleted list in a text document? An average user can fluidly write out a nested list using Return, Tab, Shift-Tab, etc to add items. This is how I want knotend to feel. It should feel like a text editor, not a big graphical mess of boxes and arrows.
Please go give it a try. It's free and doesn't require login.