Show HN: Direct manipulation flowchart editor without the mouse | Hacker News Reader

Show HN: Direct manipulation flowchart editor without the mouse

knotend.com

54 pointsescot19 comments

Hey HN, I made this because I wanted a fast editing experience when making flowcharts. Other tools (bottom)require clicking and dragging (or editing code). Knotend is keyboard centric and is supposed to feel more like editing a doc than dragging around boxes and arrows.

I've tested in on safari and chrome desktop. Its difficult to use on mobile but you can view existing charts.

I'd appreciate your feedback on how you use it, the design, any bugs etc. Thank you.

Prior art

- https://mermaid-js.github.io/

- Confluence (Atlassian)

- draw.io

- excalidraw

EDIT: fixed the bug on Safari with escape clobbering edited text

Open articleView on HN

Feedback: This seems to push a history state as I click around the app. Please don’t do this; if you want to store (selection) state in the history that’s fine but use replace semantics instead.

As to the app itself, I can’t really understand what’s going on here although I’m viewing on an iPhone. I use Mermaid syntax to create flow charts in Vim, so I’m interested in this “flowchart for engineers” market but the UI here is a little obscure.

It doesn't work well on mobile as of now because its dependent on hotkeys. Like option-arrow to add a node right, cmd-arrow to navigate along the graph, etc. I'll look into the history issue, thanks.

> This seems to push a history state as I click around the app. Please don’t do this; if you want to store (selection) state in the history that’s fine but use replace semantics instead.

Sublime text handles this in the best way I've seen. The undo-stack stores selection changes, but Ctrl-Z ignores them and undoes directly back to the last actual edit. There is a separate keyboard shortcut (Ctrl-U) that does "Undo Selection". So it's out of the way unless you need it, at which point it's super useful (e.g. if you spent some time making a complex multi-selection that accidentally mess it up)

I've wanted undo selection so many times in Sublime Text and I had no idea this existed, thank you!

> As to the app itself, I can’t really understand what’s going on here although I’m viewing on an iPhone.

It's no clearer on desktop - I'm on a laptop and have no idea what is going on either :)

I'll work on it. I replied to the parent comment with a more detailed explanation. I also have some video examples on my twitter https://twitter.com/ScottyAntipa/status/1389945085001756672?...

> the UI here is a little obscure

The '?' button explains a bit, and the keyboard shortcut dropdown next to it. Basically its a DAG editor. All actions are done by either keyboard shortcuts (add node, delete etc) or by clicking on the dedicated buttons in the toolbar. Thats why there isnt much to the UI -- you're supposed to do everything through your keyboard. I should probably add some more UI affordances though, like little '+' signs on nodes to add, etc.

The main difference to other flowchart editors is that it uses a 2D table, kind of like a spreadsheet, to layout the nodes. This gives you different editing abilities like multi-select, delete, navigate, etc which are more cumbersome w/ a boxes and arrows type flowchart editor.

> I use Mermaid syntax I do as well, but I made this to have a flowchart editor not based on code. I added an export to mermaid feature just because its a common way for engineers to share the diagrams.

I'll work on making the UI more intuitive, thank you for the feedback.

Very interesting work! Intrigued to see how it develops.

https://flowchart.fun/ is a good one to check out.

Have you tried HandsOnTable for the spreadsheet lib? We used that for (https://www.youtube.com/watch?v=0l2QWH-iV3k). I highly recommend it.

I did see flowchart.fun, it got a lot of love here on hn. Seems great for small graphs to quickly communicate something. But I couldnt express large flows in it.

I actually started knotend using handson table, then switched to just writing one in react. Handson had a commercial license I didnt want to pay for. And a lot of features I dont need. I was hoping to not have to hand roll it but I havent found a lib yet with a balance if minimal feature set and a public use license.

I’ll give progress updates on twitter, feel free to send suggestions there or on this thread. Thanks.

Since Ive gotten a lot of questions about how its supposed to work: - Its a flowchart editor meant to be used with keyboard shortcuts (but also has buttons for the normal functions) - The layout is automatic and not configurable. Its constrained to a 2D table - Click on the keyboard icon in the top right to see how to do things like add nodes, navigate along the graph, delete edges, etc - The state is all persisted in the url, no backend yet

This is a cool idea, definitely don’t give up and iterate. I’d either add arrow tips so that the direction of the flow is obvious, or perhaps just render the connections on the cell edges or between them as others suggested.

Once you get the visuals right it’s really cool, and can be used to export to other tools.

> flow is obvious I'm hoping that a minute of using it make it clear that left-to-right is the flow. I find all the ui decorations like arrow heads etc distract from the editing experience. Did you find it counter-intuitive?

> export to other tools What tools do you have in mind?

Thanks for all the feedback. So far I've made these adjustments based on all your thoughts:

- Added bezier curves for the edges instead of straight lines

- Style changes to make edges more clear

- Removed extraneous options that probably just made the core functionality unclear

I couldn't view the website or thing properly. But what about: https://graphviz.org/

Maybe theres a device or browser Im not properly supporting. Its meant for desktop browser with a full keyboard. I would appreciate any details if you try again, thanks!

Graphviz is great. I just wanted something not text based. Something relatively easy for non technical folks to use. And something that has a single representation (not text and then also a separate layout view). The goal is to make it so editing a graph feels as fast as you can type, like a spreadsheet or a bullet list in a text doc.

It's hard to parse the graph's flow.

Maybe putting a gutter between the cells, and/or using curved lines for the connections would help.

Thanks. Theres a mode where you can hide the cell borders which kind of makes more of a gutter between them. But I agree theres something probably better especially for highly connected graphs. At the moment Im opening them in mermaid (theres a link in the shortcut menu) which shows a more traditional layout.

Ive also found that navigating the graph (cmd-arrows) is a good way of understanding its shape. Rather than viewing it statically and following lines with your eye.

> without the mouse

Like when you describe dependencies in text and parse them into a graph?

Are you referring to something like graphviz or mermaid? Ya, you dont technically need a mouse. But theyre also not direct manipulation — you edit text and then have a separate visual representation.

Reply on news.ycombinator.com