HN Explorer

Show HN: Knotend – a keyboard-driven flowchart editor (knotend.com)

80 points by escot ↗ HN
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

[1] https://www.scottantipa.com/why-knotend

[2] https://twitter.com/ScottyAntipa

21 comments

[ 2.0 ms ] story [ 54.3 ms ] thread
chezsoi
Very cool, any plans to export to an open format like Mermaid?
escot
Thanks! You can get the mermaid code from the Export menu. And Im happy to support other formats.
pouyarad_
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
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?
[deleted]
(comment deleted)
s1mon
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

escot
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
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
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
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
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
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

vilkkala
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?

vilkkala
Like:

  one["Some value {100}"]
  two["Other value {200}"]
  computation["Sum is {first + second}"]
  one--first-->computation
  two--second-->computation
escot
Ok I enabled computation for a little while on prod, but you have to know this super secret keyboard shortcut to turn it on: Control-Option-E. I'll leave it on at least a few days, and if you want to try more I can put up a more permanent link to a build with it.
escot
> having to add one extra node for the variable declaration feels cumbersome Well you don't always have to define a variable. For example `=sum()`in a node will just take all the parent values and sum them, whether they are variables or just pure values.

But you're right that if you want to define a variable its takes two nodes (the expression as the parent, then the `var foo` as the child). I should probably support defining a variable completely inside a node like `var foo = 1 + 2`.

I'm still a little hesitant to add any text on the arrows until I find a better way to do it via the keyboard. I find that just using the text in the nodes is usually sufficient anyways.

[deleted]
(comment deleted)