myDiagram, the diagram being inspected:

Draw Visual Tree

myVisualTree, showing the Layers, Nodes and Links that are in myDiagram above:

This sample shows the actual visual tree of a running Diagram. The Diagram that we inspect is named "myDiagramDiv" and initially contains two simple Nodes and two Links. The Diagram below it is named "myVisualTree" and shows the visual tree of "myDiagramDiv".

You can also try selecting, copying, and deleting parts in myDiagram and then click on "Draw Visual Tree" again to see how the visual tree in myDiagram changes.

The traverseVisualTree function is what walks the visual tree of "myDiagramDiv" and constructs the corresponding Nodes and Links used in "myVisualTree". The text for each Node in "myVisualTree" is data-bound to the actual Diagram/Layer/Part/GraphObject object. That object is converted to a text string by using the toString method.

See also the Visual Tree Using Groups sample, to show the same visual tree using nested groups. For more uses of the TreeLayout, see the DOM Tree and Class Hierarchy Tree samples.