Tree structures in a diagram are made using ShapeConnector objects. The ShapeConnector defines a list of shapes joined by lines to a parent shape. We add a ShapeConnector to the first shape.
{
"Version": "1.0",
"Template": "OrgChart",
"McpGenerated": true,
"KeepDocument": true,
"Shape": {
"ID": 1,
"Label": "Root",
"ShapeConnector": [
{
"ShapeConnectorType": "OrgChart",
"Shapes": [
{ "ID": 2, "Label": "Child A" },
{ "ID": 3, "Label": "Child B" }
]
}
]
}
}
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": {
"ID": 1,
"Label": "Root",
"ShapeConnector": [
{
"ShapeConnectorType": "OrgChart",
"Shapes": [
{ "ID": 2, "Label": "Child A" },
{ "ID": 3, "Label": "Child B" },
{ "ID": 4, "Label": "Child C" }
]
}
]
}
}
Like trees, ShapeConnectors are recursive: shapes in a ShapeConnector can
themselves have ShapeConnector arrays. To build a three level tree we use a
document with a ShapeConnector in each child shape:
{
"Shape": {
"ID": 1,
"Label": "Root",
"ShapeConnector": [
{
"ShapeConnectorType": "OrgChart",
"Shapes": [
{
"ID": 2,
"Label": "Child A",
"ShapeConnector": [
{ "ShapeConnectorType": "OrgChart", "Shapes": [{ "ID": 4 }, { "ID": 5 }, { "ID": 6 }] }
]
},
{
"ID": 3,
"Label": "Child B",
"ShapeConnector": [
{ "ShapeConnectorType": "OrgChart", "Shapes": [{ "ID": 7 }, { "ID": 8 }, { "ID": 9 }] }
]
}
]
}
]
}
}
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.
You can override the default "Column" arrangement for level three by setting the "Arrangement" property of the connector to "Row".
{
"ShapeConnector": [
{
"ShapeConnectorType": "OrgChart",
"Arrangement": "Row",
"Shapes": [ { "ID": 4 }, { "ID": 5 }, { "ID": 6 } ]
}
]
}
Other Arrangement choices are "TwoColumn", "LeftColumn" and "Stagger".
By default, trees grow down the page. But you can choose any of the four directions "Top","Bottom","Left", or "Right" by setting the "Direction" property of the first ShapeConnector.
{
"ShapeConnector": [
{
"ShapeConnectorType": "OrgChart",
"Direction": "Right",
"Shapes": [ { "ID": 2 }, { "ID": 3 } ]
}
]
}
The only choices of ShapeConnector arrangement for trees that go left or right are "Row" (the default) and "Stagger". You also can't mix directions within a tree. The direction of the tree is set by the first ShapeConnector.
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 document generates the same tree with the bottom branch collapsed.
{
"ShapeConnector": [
{
"ShapeConnectorType": "OrgChart",
"Collapse": true,
"Shapes": [ { "ID": 4 }, { "ID": 5 } ]
}
]
}
One shape can theoretically have multiple ShapeConnector objects, and flowcharts used this feature. If you define multiple ShapeConnector objects for a shape in a tree arrangement, they consolidated into a single connector. You should only use one ShapeConnector per shape when defining a tree.