I'm building a JS application that involves manipulating node networks. I'm finding JSPlumb to be incredibly difficult to integrate, so I'd like to differentiate parent-child relationships in the graph in a way that doesn't involve directed lines / arrows.

These are what my nodes look like right now, where j2a... is the child of root: enter image description here What would be an effective way of displaying a parent-child relationship here, possibly through the use of color? The easy solution I'm considering is filling those [ ] brackets with the name of the node's parent, but I don't think that will be enough of a visual differentiation.

1 Answer 1


It's hard to understand what is your data structure and how are you going to visualize it.

jsPlumb is flowchart builder library so if your node network structure is like a tree why not to use any of many many tree visualizers? jsPlumber demonstration page shows very different examples so you can select one you like and find more simple to integrate visualization alternatives if jsPlumb is too difficult.

Your solution with filling [] brackets with parent node's name will lead to strong visual noise at your page. This will make its perception uncomfortable, especially as your nodes have long and unmemorable names.

Maybe you can try to use simple table to display your data as hierarchy or tree structure:


Hierarchy example


Tree example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.