4 ms·

Show HN: Knotend – a keyboard-driven flowchart editor

80 points by escot 4y ago

Hey all, I made knotend [0] because I wanted a flowchart editor that was keyboard-driven and super fast. I was tired of dragging boxes around on a canvas. You may have seen knotend around here before when I wrote an initial blog post [1] about why I wanted a new kind of flowchart editor. Thank you to everyone who has given me feedback here on HN! Since that blog post I’ve been working hard to get to a v1 which I’m showing now. You can use the free version without having to sign up for an account. I would love your feedback! What makes knotend different is two main things: 1) The nodes are constrained to a grid which enables a keyboard-centric experience for selection and navigation, and 2) there’s autolayout so each time you add a node, the graph automatically lays itself out and places each node in a cell. In the future I’ll be working on supporting more complex editing actions, linking graphs together, collaboration, and more. Please drop your feedback below, reach out on twitter [2], or email scott@knotend.com. [0] https://www.knotend.com https://www.knotend.com [1] https://www.scottantipa.com/why-knotend https://www.scottantipa.com/why-knotend [2] https://twitter.com/ScottyAntipa https://twitter.com/ScottyAntipa

chezsoi 4y ago
Very cool, any plans to export to an open format like Mermaid?
- escot 4y ago
  Thanks! You can get the mermaid code from the Export menu. And Im happy to support other formats.
pouyarad_ 4y ago
This is awesome. I find myself avoiding Miro/Figjam these days because of how much point & clicking and formatting I need to do to get a flowchart going. Would love to eventually have functionality with this to create UML or system architecture diagrams. Props for setting up monetization from the get-go and having a super simple UI.
- escot 4y ago
  Thanks! Thats the same reason I set out to make this. You can export currently to plant uml. Is there anything else you would want in particular for doing system diagraming?
dang 4y ago
Related: Show HN: Direct manipulation flowchart editor without the mouse - https://news.ycombinator.com/item?id=27256861 https://news.ycombinator.com/item?id=27256861 - May 2021 (19 comments) Knotend - https://news.ycombinator.com/item?id=27049539 https://news.ycombinator.com/item?id=27049539 - May 2021 (1 comment) Show HN: A keyboard-centric flowchart editor - https://news.ycombinator.com/item?id=27037432 https://news.ycombinator.com/item?id=27037432 - May 2021 (1 comment)
- escot 4y ago
  Ya its been a bit of a research project for a while so Ive posted for feedback. Thanks!
deleted 4y ago
[deleted]
s1mon 4y ago
A "flowchart" is an ANSI/ISO standard which looks really different than this. [0] Why call it a flowchart when it's not a flowchart? It's really confusing and not helping your marketing. [0] https://en.wikipedia.org/wiki/Flowchart https://en.wikipedia.org/wiki/Flowchart
- escot 4y ago
  I've found it to be the most accurate description. I think the core of what makes a flowchart is that its a directed graph, which knotend is.
  - s1mon 4y ago
    Try doing an image search in Google for "flowchart". The first 18 images have diamond shaped decision boxes, like an ISO flowchart. In fact, as I scroll, nearly all of the images look like ISO flowcharts. Searches which yield graphs more like what you're doing are "concept maps", "block diagrams", "org charts", or "tree diagram". However, your tool allows zero or more parents and zero or more children, whereas many of these don't allow all those choices or allow more than that. Flowcharts need at least diamonds and circles in addition to rectangles. They also allow arbitrary connections, not just parent, and children. I'm not a topology person, but from some digging around, it seems like the connections that you're allowing are typical of a "directed acyclic graph".
  - afandian 4y ago
    Similar to other comments, I think that a useful "flowchart" needs decision points. It also needs loops, else it's just a simple tree, precluding a lot of use-cases for flow charts.
- turtleyacht 4y ago
  Could be we're seeing an early version. Once the keyboard enables creation of diamonds--and some way to specify yes/no and traverse those boxes--we'll be well on our way to flowcharts. If one were navigating sub-levels of logic in a flowchart with keyboard, I wonder if it's better to have a modal experience or a top-level consistent experience. The modal one gives feedback to the UI that we're in a nested part of the flowchart. The top-level always navigates boxes regardless of the type (rectangle or diamond). Or maybe some combination in between. Just as a reminder about flowcharts: > For many people it has long been article of faith that flowcharting should precede coding. There is a kernel of important truth here: coding cannot be the first stage in building a program; it must be preceded by design. But flowcharting is not designing. Design is about structure, and flowcharts, as their name suggests, are about the flow of control. At the time when the designer should be thinking about the shape of his problem, the flowchart encourages him to think about execution of the program inside the computer. Of course, some programmers who draw flowcharts do produce well structured programs; but their success is in spite of the technique, not because of it. Flowcharts tend to conceal structure... Principles of Program Design. M.A. Jackson (1975)
vilkkala 4y ago
I use Mermaid to visualize all sorts of processes, so this is very interesting. Some immediate feedback: - ability to name the node ID, because now the Mermaid output is hard to read and edit - more shapes (diamond, circle, etc.) - text on connection - shortcut to connect with a node after one is staged for connection (didn't find one at least) - ability to select connections with keyboard - shortcut to delete the selected connection (now you need to click Disconnect, the shift+delete doesn't seem to work) The layout gives me Excel vibes: what if these nodes could export values and do computation? Like, the Apple Income Statement example, but dynamic. This combined with an ability to export a snapshot as a Mermaid diagram, it would be great to explain business cases, etc.
- escot 4y ago
  Thank you for the feedback. I think theyre all great. One thing Im trying to figure out is to support adding text to connections, but do so in a keyboard centric way. I dont want people making graphs that require you to use the mouse a lot. For staging — you can use Tab and Shift-Tab to connect the staged node to others. You just select the target node first. Maybe its not intuitive enough, please let me know if that makes sense. Computation - I have a prototype for this. You can add formulad and math expressions to a node, and use inputs (upstream nodes). Ive just first been focusing on diagramming. Would you have a use case yourself? I could send you a link to a beta to try it if you like. Here's a demo of the computation prototype: https://www.youtube.com/watch?v=kCiGK1z0ksg https://www.youtube.com/watch?v=kCiGK1z0ksg
  - vilkkala 4y ago
    I think it's intuitive and works, but tab and shift+tab in the shortcuts menu are about adding children and parents. So, adding instructions for it is enough :) I definitely would give the computation beta a try. My use case would be just "more visual Excel". It's important that the nodes can also have non-formulae content, e.g. salary["Salary<br/>`${1500}` €"] Interested in seeing how you have implemented referencing the inputs. Edit: You answered the last question with the video. Looks interesting, but having to add one extra node for the variable declaration feels cumbersome. Edit 2: What if the outputs of the nodes could be named with text in the links?
blondin 4y ago
this is super cool!
- escot 4y ago
  Thanks!

80 points by escot 4y ago

chezsoi 4y ago

Very cool, any plans to export to an open format like Mermaid?

escot 4y ago
Thanks! You can get the mermaid code from the Export menu. And Im happy to support other formats.

pouyarad_ 4y ago

This is awesome. I find myself avoiding Miro/Figjam these days because of how much point & clicking and formatting I need to do to get a flowchart going. Would love to eventually have functionality with this to create UML or system architecture diagrams. Props for setting up monetization from the get-go and having a super simple UI.

escot 4y ago
Thanks! Thats the same reason I set out to make this. You can export currently to plant uml. Is there anything else you would want in particular for doing system diagraming?

dang 4y ago

Related: Show HN: Direct manipulation flowchart editor without the mouse - https://news.ycombinator.com/item?id=27256861 https://news.ycombinator.com/item?id=27256861 - May 2021 (19 comments) Knotend - https://news.ycombinator.com/item?id=27049539 https://news.ycombinator.com/item?id=27049539 - May 2021 (1 comment) Show HN: A keyboard-centric flowchart editor - https://news.ycombinator.com/item?id=27037432 https://news.ycombinator.com/item?id=27037432 - May 2021 (1 comment)

escot 4y ago
Ya its been a bit of a research project for a while so Ive posted for feedback. Thanks!

deleted 4y ago

[deleted]

s1mon 4y ago

A "flowchart" is an ANSI/ISO standard which looks really different than this. [0] Why call it a flowchart when it's not a flowchart? It's really confusing and not helping your marketing. [0] https://en.wikipedia.org/wiki/Flowchart https://en.wikipedia.org/wiki/Flowchart

escot 4y ago
I've found it to be the most accurate description. I think the core of what makes a flowchart is that its a directed graph, which knotend is.
- s1mon 4y ago
  Try doing an image search in Google for "flowchart". The first 18 images have diamond shaped decision boxes, like an ISO flowchart. In fact, as I scroll, nearly all of the images look like ISO flowcharts. Searches which yield graphs more like what you're doing are "concept maps", "block diagrams", "org charts", or "tree diagram". However, your tool allows zero or more parents and zero or more children, whereas many of these don't allow all those choices or allow more than that. Flowcharts need at least diamonds and circles in addition to rectangles. They also allow arbitrary connections, not just parent, and children. I'm not a topology person, but from some digging around, it seems like the connections that you're allowing are typical of a "directed acyclic graph".
- afandian 4y ago
  Similar to other comments, I think that a useful "flowchart" needs decision points. It also needs loops, else it's just a simple tree, precluding a lot of use-cases for flow charts.
turtleyacht 4y ago
Could be we're seeing an early version. Once the keyboard enables creation of diamonds--and some way to specify yes/no and traverse those boxes--we'll be well on our way to flowcharts. If one were navigating sub-levels of logic in a flowchart with keyboard, I wonder if it's better to have a modal experience or a top-level consistent experience. The modal one gives feedback to the UI that we're in a nested part of the flowchart. The top-level always navigates boxes regardless of the type (rectangle or diamond). Or maybe some combination in between. Just as a reminder about flowcharts: > For many people it has long been article of faith that flowcharting should precede coding. There is a kernel of important truth here: coding cannot be the first stage in building a program; it must be preceded by design. But flowcharting is not designing. Design is about structure, and flowcharts, as their name suggests, are about the flow of control. At the time when the designer should be thinking about the shape of his problem, the flowchart encourages him to think about execution of the program inside the computer. Of course, some programmers who draw flowcharts do produce well structured programs; but their success is in spite of the technique, not because of it. Flowcharts tend to conceal structure... Principles of Program Design. M.A. Jackson (1975)

vilkkala 4y ago

I use Mermaid to visualize all sorts of processes, so this is very interesting. Some immediate feedback: - ability to name the node ID, because now the Mermaid output is hard to read and edit - more shapes (diamond, circle, etc.) - text on connection - shortcut to connect with a node after one is staged for connection (didn't find one at least) - ability to select connections with keyboard - shortcut to delete the selected connection (now you need to click Disconnect, the shift+delete doesn't seem to work) The layout gives me Excel vibes: what if these nodes could export values and do computation? Like, the Apple Income Statement example, but dynamic. This combined with an ability to export a snapshot as a Mermaid diagram, it would be great to explain business cases, etc.

escot 4y ago
Thank you for the feedback. I think theyre all great. One thing Im trying to figure out is to support adding text to connections, but do so in a keyboard centric way. I dont want people making graphs that require you to use the mouse a lot. For staging — you can use Tab and Shift-Tab to connect the staged node to others. You just select the target node first. Maybe its not intuitive enough, please let me know if that makes sense. Computation - I have a prototype for this. You can add formulad and math expressions to a node, and use inputs (upstream nodes). Ive just first been focusing on diagramming. Would you have a use case yourself? I could send you a link to a beta to try it if you like. Here's a demo of the computation prototype: https://www.youtube.com/watch?v=kCiGK1z0ksg https://www.youtube.com/watch?v=kCiGK1z0ksg
- vilkkala 4y ago
  I think it's intuitive and works, but tab and shift+tab in the shortcuts menu are about adding children and parents. So, adding instructions for it is enough :) I definitely would give the computation beta a try. My use case would be just "more visual Excel". It's important that the nodes can also have non-formulae content, e.g. salary["Salary<br/>`${1500}` €"] Interested in seeing how you have implemented referencing the inputs. Edit: You answered the last question with the video. Looks interesting, but having to add one extra node for the variable declaration feels cumbersome. Edit 2: What if the outputs of the nodes could be named with text in the links?

blondin 4y ago

this is super cool!

escot 4y ago
Thanks!