scottantipa.com

Why we need a flowchart editor that doesn't give you carpal tunnel

June, 2022

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.

The problem

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 defining 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 researching why these tools don't have a good graphical view of dependencies. What I came to understand 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. It's so slow and manual that after dragging around boxes for a few minutes you have to take a break and ice your wrists.

The solution

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 use a similar 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.


Back to scottantipa.com or find me on twitter.