Hacker News Reader

Hacker News

Comment by vilkkala | Hacker News Reader

Full thread

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.

View on HN

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?

Like:

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

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.

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

Reply on news.ycombinator.com