Modify CSS/HTML for drag and drop visual workflow

We need help to build a HTML/CSS that allow us to visualize a drag&drop flow dynammically, with certain html. It should keep the diagram easy to understand when user adds new blocks to the flow or removes them, and draw the connections properly when it changes. Also, should keep the same hover and click behaviour than in the example below. We have a first version or example that you can check at [login to view URL] As you can see, you can drag and drop the elements and the tree is generated automatically. The problem with this example is that it does not allow to merge branches after a fork. The flow is sequential and does not allow to have feedback in any case, but needs to merge branches at the end of every fork. When you drop an IVR element to the tree, both branches are generated successfully as you can check, but a third empty box should appear, merging both branches (see uploaded files with example images about how it should behave). In uploaded pictures it shows what the goal is as an example with a couple of branches, but it should work with unlimited branches and complexity. Considering you just fresh opened the URL example, if you add a "ivr" box to the first empty box, the first image explains the expected result. After dropping a "play" an then a "read" to the right branch, the expected result is in the second image. After this, adding below the read we just dropped a ivr element, the expected result is in third image. If you have any questions, do not hesitate to contact me. Thanks,