4 ms·

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). Knot

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

by escot 5y ago

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.

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