Hey all! I rewrote my keyboard-driven flowchart editor and would love some feedback! I shared a prototype a couple years ago here. It had a lot of issues in its core UX. I came up with a new approach a month or two ago and decided to try again from scratch. The main design difference with knotend from other flowchart tools is that all nodes are laid out in a 2D grid. You can select and navigate the grid, like a spreadsheet, so you can do most operations completely on the keyboard instead of manually placing nodes at the pixel level. I personally wanted to make this because I use dependency charts to model out tasks in a big project. Also if we're going to be programming in certain environments using directed graphs (like graphics programming) I think it would be better/faster without having to use your mouse so much. Some open questions I'm still working on: • The layout algorithm isn't too smart yet. When you Tab to add a child it just finds a column with other siblings, and finds an empty cell in there. It never moves other nodes to make space. I think there's a lot of opportunity to make better, but its a subtle decision because you don't want to move TONS of nodes which is jarring to the user. The old version of knotend always did a complete relayout on every graph edit which was super jarring and the biggest issue I had. • I'm still deciding on what should happen when moving nodes via keyboard shortcut. Right now if you move into another node it will swap their positions (same with multiple nodes being moved). I also tried "pushing" nodes out of the way but it feels strange. Another approach could be to "jump" over the node instead of swapping positions, but this also seems awkward in many cases. • I'm still figuring out a UX for keyboard shortcut for two cases: add an edge between existing nodes, and delete an edge. Both of those require mouse interactions today. Some notes from a technical perspective: • It doesn't support zoom/pan yet. This was a decision just to speedup getting to a v1. My solution is that the grid has origin at top/left at 0,0 and all rows/columns are positive. If you move a node left/up out of bounds it shifts all nodes by the opposite of that delta (eg right/down) to make space. • Its all simple React, divs. At some point this won't scale. I use component memo heavily to not re-render one very interaction. • I used claude rarely, mostly when I'm tired or on a plane. I find claude most useful in either prototyping several options that I wouldn't have time to do, or producing a ton of boilerplate (which doesn't really apply yet to this greenfield project). I also find it pretty bad at reasoning about geometric things, highly visual things for some reason. You can use it here: knotend.com I'd love any feedback you all have to offer 🙂. Especially about its core mechanics since its a v1. Thanks!

Very cool. The core mechanic seems solid for flow charts. I would love to be able to add/remove the parent/child relationship to nodes after they have already been created.

@Benji Rappoport thank you! I think what you're linking for is done like this: • remove relationship by clicking on the edge and hitting Delete • add relationship by dragging on the rectangular area to the right of the node, which produces an arrow that you can drag around to connect to another node I think both of these need UX work since you're not the first person to mention an issue Thank you for looking!

Very cool, I will try that out!

Wooooo so cool! What’s your approach to long content / overflow? Or is that rather and edge case for your use case? :D

Thanks Florian! Right now the constraint is that all nodes are the same size, so they fit in a cell. So I just truncate the content and you have to enter edit mode to see the whole text. There’s probably a better way, but that's what I settled on for v1. Some tools will dynamically change the font size to fit. For my personal use case it isn't much of a problem because if a node has a ton of text then maybe it’s really multiple steps and should be broken out.

@Benji Rappoport I just pushed an update which makes it more obvious that you can click and drag to the right of the node. The little right arrow appears when you hover over a node. Double click it to add a child. Drag on it to extend an arrow and connect.

@Scott Antipa I really like your approach to keep nodes the same size, accept the constraint but keep the system (layout) simple. As you mention: text can resize. But really: treat overflowing text as a hint that the content should be broken apart.

@Benji Rappoport I also updated the edge selection style to be much more obvious (bright blue, thicker) when you click on an edge. Do you think this would have made it more intuitive to discover that you can click it and then hit Delete? I suppose I should also have a right-click with a context menu which may be more intuitive.

I guess if you take the spreadsheet analogy, it would mean that one longer cell would grow the whole row. In spreadsheets with longer text content, you often need that but it always destroys the nice uniform grid. Wrap/No wrap. But again, I’m curious to see how far it can be pushed without it

Thanks Florian, I'd love to see that. All I know is there is butter involved 😂.

I sent you my recordings of the user test via DM 🍿 Yes, I live in Zurich! You?

Thank you so much!! San Francisco. But we should be in Bern this July

@Scott Antipa nice work on the little arrow affordance when hovering over a node to show that you can pull out a connector. The highlight on the connector when clicked on is cool too. When I delete a connector it also deletes the node the connector is pointing to. Not sure if you experience that as well?

I think this is a weird UX edge case where if a node is selected AND an edge is selected. When you hit delete, both are deleted. I’ll look into it. Thanks!