I would like to develop something like two design area with the same diagram.model. Both design area should have different list(source1 should be in list1, source 2 and source 3 in list 2).
Is this even possible? Kindly do guide.
(You don’t need to both send email and post in the forum. It will save you time if you just choose one.)
I’m wondering how what you want to build is significantly different from: Mapping Selectable Fields of Records
I assume you know by now how to create those green-headered nodes with lists that have ports in them. So you just have to position the nodes where you want them to be and then (optionally) make sure they are not movable and not copyable and not deletable .
When an item in a node is selected it appears from your screenshot that you want to highlight the connected links. This is discussed in: GoJS Highlighting -- Northwoods Software
It is demonstrated in samples such as: Friend Wheel
If the filter is supposed to only show a subset of the links, you can implement that UI in HTML. Search the collection of Diagram.links and decide for each one how to set its visible property.