Show HN: Direct manipulation flowchart editor without the mouse - https://news.ycombinator.com/item?id=27256861 - May 2021 (19 comments)

Knotend - 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 - May 2021 (1 comment)

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.

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

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.

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

[0] https://en.wikipedia.org/wiki/Flowchart

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

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

It also needs loops, else it's just a simple tree, precluding a lot of use-cases for flow charts.

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.