The SDON Cookbook

8/17 Page

Making a Tree Diagram with SDON

Trees are made using ShapeConnectors. The "ShapeConnector" defines a list of shapes joined by lines to a parent shape. We add a ShapeConnector to the first shape.

{
"Shape": {
          "ShapeConnector": [{"Shapes": [{},{}]}]
         }
}

and we get:

SDON simple tree diagram

By putting a ShapeConnector that has two shapes inside the definition of the top shape we get two children attached by lines to the top shape in a tree arrangement. If our ShapeConnector has three shapes we get three child shapes (and so on).

{
"Shape": {
          "ShapeConnector": [{"Shapes": [{},{},{}]}]}]
       }
}
SDON tree diagram three shapes

Like trees, ShapeConnectors are recursive: Shapes in a ShapeConnector can themselves have ShapeConnectors. To build a three level tree we use a script with a ShapeConnector in each child shape:

{
"Shape": {
          "ShapeConnector": [{"Shapes": [{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
                                         {"ShapeConnector": [{"Shapes":[{},{},{}]}]},
                                         {"ShapeConnector": [{"Shapes":[{},{},{}]}]}]
}]
       }
}
SDON tree diagram many shapes

Note that the third level is formatted in a single column arrangement in classic compact organization chart style. This is the default behavior for trees that grow down the page.

Changing the Arrangement of the Shapes

You can override the default "Column" arrangement for level three by setting the "Arrangement" property of the connector to "Row".

{
"Shape": {
          "ShapeConnector": [{"Arrangement":"Row","Shapes": [{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
{"ShapeConnector": [{"Shapes":[{},{},{}]}]}]
}]
       }
}
SDON even arrangement

Other Arrangement choices are "TwoColumn", "LeftColumn" and "Staggered".

Changing the Direction of the Tree

By default, trees grow down the page. But you can choose any of the four directions "Up","Down","Left", or "Right" by setting the "Direction" property of the first ShapeConnector.

{
"Shape": {
          "ShapeConnector": [{"Direction":"Right","Shapes": [{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
{"ShapeConnector": [{"Shapes":[{},{},{}]}]}]
}]
       }
}
SDON tree diagram sideways

The only choices of ShapeConnector arrangement for trees that go left or right is "Row" (the default) and "Staggered". You also can't mix directions within a tree. The direction of the tree is set by the first ShapeConnector.

Collapsing Branches of the Tree

In SmartDraw, clicking on the circular icons at the root of each tree branch will expand or collapse it. This is useful if you don't want to show all the detail of a deep and complex tree. This script:

{
"Shape": {
          "ShapeConnector": [{"Direction":"Right","Shapes": [{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
{"ShapeConnector": [{"Shapes":[{},{},{}]}]},
{"ShapeConnector": [{"Collapse":"True","Shapes":[{},{},{}]}]}]
}]
       }
}

Generates the same tree with the bottom branch collapsed.

SDON tree diagram collapsed

Using More than One ShapeConnector in a Shape

One shape can theoretically have multiple ShapeConnector objects, since "ShapeConnector":[] is defined to be an array. If you define multiple ShapeConnectors for a shape in a tree arrangement, they consolidated into a single connector. You should only use ShapeConnector per shape when defining a tree.

8/17 Page