top | item 34542396

(no title)

vilkkala | 3 years 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.

discuss

order

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

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