This sample reads XML data tree and produces a "fishbone" diagram of cause-and-effect relationships. For expository purposes the same diagram can also be laid out in a "branching" tree or a normal layered tree. The information in this sample comes from www.hci.com.au.

The XML data, in this sample stored as an embedded resource file, consists of nested elements describing causes for the root effect. Unlike the typical XML data, the nesting of the node elements implicitly defines the tree structure.

"Fishbone" layout is implemented as a custom layout. It assumes that the angle of this kind of tree layout is horizontal. Alternating layers have links at an angle, aiming causes towards their parent cause/effect. However in the tree structure, the parent Node is not positioned in the normal place, but at the opposite end of the "fishbone" axis. This is achieved by adding a dummy node to the TreeLayout's TreeNetwork. The dummy node is always placed at the end of the "Bus" alignment. Then the LayoutNodes method repositions the parent Node to be where the dummy node was positioned.

Furthermore there is a custom routing implemented to make sure that the links connecting vertically to nodes have segments that are oriented correctly at a +/- 60-degree angle. This ensures the proper routing even when the user manually moves a node. Because that routing cannot be used for the regular "branching" and "normal" layouts, the button event handlers have to explicitly replace the Diagram.LinkTemplate appropriately. If you were only using a single layout you would not need to replace either the link template nor the Diagram.Layout.