Placement algorithm and (interactive) diagram library for a clear layout and connections

[philipsens]

This discussion started with issue #106, in which @mhdirkse asked to make the connections more clear. This issue didn't get the attention that it needed, so we had a meeting about it.

In the meeting we discussed:

• To make the connections clear, the layout needs to be better.
• We could add more anchor points (to the side) to give the user more control.
  • We didn't add more, but we made the side at which the anchor points are located configurable. Horizontally or vertically. Add setting for flow connection styles #168
• We could make the forwards (connection lines) straight, like in a flowchart.
  • We added different FlowStyles. Add setting for flow connection styles #168
• In combination to straight lines, it could also be possible to have the lines come out from the nearest side (dynamically, like it used to be in the Frank!Flow 1.0)
• We could add nodes with the label of the forward, which could also be moved (the toolkit has this build in).

These points are just suggestions and shouldn't be seen as TODO's. Some of these things we already did or solved differently. Updates regarding this subject should be made here to keep track of the progress.

@jacodg Made a list of chooses we could make to bring the diagram to a new level.

1. Use a different placement algorithm and add a label so that it can also be dragged (our current roadmap) (Replace Sidescape with Graphviz or Mermaid)

   Cons:
   Lines don't run neatly around blocks

2. JSPlupm license so we can use the JSPlump professional placement algorithm

   Cons:
   Costs a lot
   Not sure it works well

   Advantages:
   Least work(?)

3. Rebuild jsPlump (and use different placement algorithm)

   Cons:
   A lot of work

   Advantages:
   Can make it exactly as we want

4. Continuous Graphviz image generation

   Cons:
   User can no longer determine position himself
   Less beautiful (especially drawing a line is something like selecting 2 nodes and then image is generated again)

   Advantages:
   For free
   Very good placement (including lines that run well)
   User never again has to struggle with placement (at first still fun but after a while a lot of hassle)
   No need for x and y in xml configuration anymore
   Integrates well with images that can already be seen in console

[philipsens]

@jacodg had a conversation about this and suggested to temporarily have the nodes stack vertically. This take out the searching for the node and will make it easier to move a node to a dedicated spot.

[philipsens]

This has been done in #589

[philipsens]

@jjansenvr Suggested to look at arrows.app and bpmn.io (bpmn-js)

[philipsens]

@nielsm5 Suggested node-RED

Some well known applications already implement this. Like Home Assistant and TingsBoard.