Let’s start my explanation from the beginning.
1)The first step is the generation of the box
which can be done by button click
2)The box will automatically create card like in gif file
list items inside of it and a title
3)The title and list items upon being clicked (3 list items default, with bolded title as header, but if you press enter in the last list item a new one is generated)
should be editable
4)There should be to the left of the list item an x to close when it is clicked [when you select try x and delete button remove the selected item and box]
5)To the right of the list item should be the start point of the arrow that is generated
Regarding the arrow
6)You just click the input and the arrow is automatically generated, you can choose to edit the input (like above) and you can choose to click another input, which will automatically connect to the two.
So when you click a list item you automatically edit the text or just click another list item which will change the arrow to point to the one you clicked.
7)If you click the x on the left of the list item, it deletes the list item, like stated above.
8)To create a new list item, like we said before, you just press enter on a new list item. In fact now that I think about it if we could use an open source library that mocks Asana’s UI we could just add the arrow connection component, and they would work the same way.
Reference URL : Jointjs.com
Source URL : https://resources.jointjs.com/demos/qad