knotend

I'm making knotend, a flowchart editor designed for speed. As a programmer, I've worked on a lot of large projects and I always found that none of our project management tools were any good at describing dependencies between tasks. This was a major pain because the connections between tasks often tell you a ton of information about why those tasks exist.

I started thinking about why these tools never had a good tree or graphical view of dependencies. What I came to understand is that there is no good tool for editing dependency graphs rapidly. Speed is important because people won't bother to update the graph if it's cumbersome.

My first goal was to make the mouse secondary to the keyboard. 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 can operate on the granularity of pixels, like a mouse.

To do this, I designed knotend to use a 2D grid instead of a 2D zoomable canvas like most flowchart editors. Each cell of the 2D grid can contain a node, and all cells are the same size. This was a breakthrough because it allowed me to add selection on top of this grid, similar to how selection works on a spreadsheet. You can use your keyboard to move and expand a selection box around the grid in order to select nodes.

The second big change from traditional flowchart editors is that knotend uses an automatic layout algorithm. You cannot chose exactly where the nodes go. Instead you just work by adding/removing dependencies, and on each edit knotend recomputes the optimal layout based on the structure of the graph. This is critical because it allows you to focus on the main task of editing the graph instead of thinking about positioning nodes.