Skip to content

Comment on Show HN: Knotend – a keyboard-driven flowchart editor

Comments

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.

escotOP

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

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?

escotOP
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.

escotOP

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.

Like:

  one["Some value {100}"]
  two["Other value {200}"]
  computation["Sum is {first + second}"]
  one--first-->computation
  two--second-->computation
AboutSource Built by g1lg1l

Hackerly is an independent reader for Hacker News, built on the public HN API. Not affiliated with Y Combinator.