5 ms·

Show HN: Direct manipulation flowchart editor without the mouse

54 points by escot 5y ago

jitl 5y ago
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.
- escot 5y ago
  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.
- nicoburns 5y ago
  > 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)
  - tylorr 5y ago
    I've wanted undo selection so many times in Sublime Text and I had no idea this existed, thank you!
- Closi 5y ago
  > 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 :)
  - escot 5y ago
    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?s=20 https://twitter.com/ScottyAntipa/status/1389945085001756672?...
- escot 5y ago
  > 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.
escot 5y ago
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/ https://mermaid-js.github.io/ - Confluence (Atlassian) - draw.io - excalidraw EDIT: fixed the bug on Safari with escape clobbering edited text
- escot 5y ago
  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
- xixixao 5y ago
  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.
  - escot 5y ago
    > 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?
- breck 5y ago
  Very interesting work! Intrigued to see how it develops. https://flowchart.fun/ 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 https://www.youtube.com/watch?v=0l2QWH-iV3k). I highly recommend it.
jhgb 5y ago
> without the mouse Like when you describe dependencies in text and parse them into a graph?
- escot 5y ago
  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.
leppr 5y ago
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.
- escot 5y ago
  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.
MonaroVXR 5y ago
I couldn't view the website or thing properly. But what about: https://graphviz.org/ https://graphviz.org/
- escot 5y ago
  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.
escot 5y ago
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

54 points by escot 5y ago

jitl 5y ago

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.

escot 5y ago
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.
nicoburns 5y ago
> 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)
- tylorr 5y ago
  I've wanted undo selection so many times in Sublime Text and I had no idea this existed, thank you!
Closi 5y ago
> 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 :)
- escot 5y ago
  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?s=20 https://twitter.com/ScottyAntipa/status/1389945085001756672?...
escot 5y ago
> 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.

escot 5y ago

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/ https://mermaid-js.github.io/ - Confluence (Atlassian) - draw.io - excalidraw EDIT: fixed the bug on Safari with escape clobbering edited text

escot 5y ago
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
xixixao 5y ago
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.
- escot 5y ago
  > 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?
breck 5y ago
Very interesting work! Intrigued to see how it develops. https://flowchart.fun/ 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 https://www.youtube.com/watch?v=0l2QWH-iV3k). I highly recommend it.

jhgb 5y ago

> without the mouse Like when you describe dependencies in text and parse them into a graph?

escot 5y ago
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.

leppr 5y ago

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.

escot 5y ago
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.

MonaroVXR 5y ago

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

escot 5y ago
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.

escot 5y ago

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