The SDON Cookbook

4/17 Page

Drawing Lines with SDON

SDON relies on some simple, rule-based mechanisms to connect shapes so you can generate even complex diagrams with just a few lines of code. There are two basic ways you can connect shapes. One uses the "ShapeConnector" to connect shapes in a hierarchial diagram like an org chart, decision tree, or mind map. The other is a single line called a "return" that can connect any two shapes in a free-form way. This is useful for flowcharts, but can be used for any type of diagram.

Using ShapeConnectors

Lines connecting shapes in tree or flow arrangements are drawn automatically by ShapeConnectors. The thickness, pattern and color of these lines are the default for the template or can be defined explicitly for the ShapeConnector.

At a basic level, a simple hierarchy is very easy to create.

{
    "Shape": {
        "ShapeConnector": [{
            "ShapeConnectorType": "Hiearchy",
            {
                "Shapes": [{}, {}]
            }
        }]
    }
}
SDON simple org chart

You can now specify additional styling if you want.

{
    "Shape": {
        "ShapeConnector": [{
            "ShapeConnectorType": "Hiearchy",
            "LineThick": "3",
            "LineColor": "#CC3333",
            "Shapes": [{}, {}]
        }]
    }
}
SDON simple org chart with red lines

The properties of a ShapeConnector are passed down to ShapeConnectors of its child shapes.

{
    "Shape": {
        "ShapeConnector": [{
            "LineThick": "4",
            "LineColor": "#CC3333",
            "Shapes": [{
                "ShapeConnector": [{
                    "Shapes": [{}, {}]
                }]
            }, {}]
        }]
    }
}
SDON simple org chart with red lines with children

Using Returns

A return can be used to connect any two shapes in any type of diagram. The most common use for a return line is to connect back to a previous shape in a flowchart.

{
    "Shape": {
        "ShapeConnectorType": "Flowchart",
        "ShapeConnector": [{
            "EndArrow": "1",
            "Shapes": [{
                "ID": "1"
            }, {
                "ID": "21"
            }]
        }]
    },
    "Returns": [{
        "StartID": "21",
        "EndID": "1"
    }]
}
SDON return line

The returns array is defined at the root level of the SDON Object. Each return object in the array must have a "StartID" and an "EndID" defined for the line to appear. These ID's are the ID's of the shapes that the line connects. "ID" is an optional property of any shape:

"Shape": {
    "ID": "1"
}

ID's are arbitrary but should be unique. If they are not unique, the first shape encountered with a particular ID will be the one that is used.

By default, returns connect to the bottom center of any shape they are attached to. You can control this with the optional parameters StartDirection and EndDirection. Four values are possible: "Top", "Bottom", "Left" and "Right". The default is "Bottom".

{
    "Shape": {
        "ShapeConnectorType": "Flowchart",
        "ShapeConnector": [{
            "EndArrow": "1",
            "Shapes": [{
                "ID": "1"
            }, {
                "ID": "21"
            }]
        }]
    },
    "Returns": [{
        "StartID": "21",
        "EndID": "1",
        "StartDirection": "Right",
        "EndDirection": "Top"
    }]
}
SDON return line above

Returns also share the normal line appearance parameters with ShapeConnectors: "LineThick", "LineColor", and "LinePattern".

Curved Returns

Adding the parameter "Curved":"True" changes the shape of the connector to a curved line.

{
    "Shape": {
        "ShapeContainer": {
            "Shapes": [{
                "ID": "1"
            }, {}, {}, {
                "ID": "2"
            }]
        }
    },
    "Returns": [{
        "StartID": "1",
        "EndID": "2",
        "StartDirection": "Right",
        "EndDirection": "Left",
        "Curved": "True"
    }]
}
SDON curved line

Using Arrowheads

By default, returns have a simple arrowhead at the end of the line. ShapeConnectors have arrowheads by default if the template used specifies this. The parameters "StartArrow" and "EndArrow" can be used to specifically enforce the type of arrowhead used on a ShapeConnector or Return.

"EndArrow":"0" turns off the arrowhead at the end of a line.

{
    "Shape": {
        "ShapeContainer": {
            "Shapes": [{
                "ID": "1"
            }, {
                "ID": "2"
            }]
        }
    },
    "Returns": [{
        "StartID": "1",
        "EndID": "2",
        "StartDirection": "Right",
        "EndDirection": "Left",
        "EndArrow": "0"
    }]
}
SDON two shapes

"EndArrow":"4" draws the line with the fifth arrowhead from the left in the top row of the standard SmartDraw selection of arrowheads:

SDON arrowheads

"EndArrow":"6" picks the first arrowhead in the second row and so on.

{
    "Shape": {
        "ShapeContainer": {
            "Shapes": [{
                "ID": "1"
            }, {
                "ID": "2"
            }]
        }
    },
    "Returns": [{
        "StartID": "1",
        "EndID": "2",
        "StartDirection": "Right",
        "EndDirection": "Left",
        "EndArrow": "6"
    }]
}
SDON two shapes with arrowheads

Adding Text to a Line

Both ShapeConnector lines and Return lines can show text labels.

The label for a ShapeConnector connector line that connects to a shape is specified in the definition of the Shape using "LineLabel":label"

{
    "Shape": {
    "ShapeConnectorType": "Flowchart",
    "ShapeConnector": [{
    "EndArrow": "1",
    "Shapes": [{
    "Label": "Shape A",
    "LineLabel": "label A"
}, {
    "Label": "Shape B",
    "LineLabel": "label B"
  }]
  }]
 }
}
SDON lines with text

Note that the label appears on the line going into the shape.

For Returns text is added by including a "Label" property.

{
    "Shape": {
        "ShapeConnectorType": "Flowchart",
        "ShapeConnector": [{
            "EndArrow": "1",
            "Shapes": [{
                "ID": "1"
            }, {
                "ID": "21"
            }]
        }]
    },
    "Returns": [{
        "StartID": "21",
        "EndID": "1",
        "Label": "Repeat"
    }]
}
SDON return line with text

You can specify the font, size, color and style of the text on a line (ShapeConnector or Return).

{
    "Shape": {
        "ShapeConnectorType": "Flowchart",
        "ShapeConnector": [{
            "EndArrow": "1",
            "TextSize": "18",
            "TextColor": "#00FF00",
            "Shapes": [{
                "Label": "Shape A",
                "LineLabel": "label A"
            }, {
                "Label": "Shape B",
                "LineLabel": "label B"
            }]
        }]
    }
}
SDON line with color text
4/17 Page