The SDON Cookbook

11/17 Page

Making a Flowchart with SDON

You build a flowchart by stetting the ShapeConnectorType on the first shape to "Flowchart".

{
"Shape": {"Label":"First Shape","ShapeConnectorType":"Flowchart",
          "ShapeConnector": [{"Shapes": [{"Label":"Second Shape"},{"Label":"Third Shape"}]}]
       }
}
SDON simple flowchart

Note that, by default, a flowchart connector has an arrowhead pointing way from the parent shape of the connector.

By default in a flowchart, the direction of a connector is "Right".

Using More than One ShapeConnector in a Flowchart

Unlike trees, flowcharts can have multiple ShapeConnectors per shape.

Adding a second ShapeConnector to the first shape with a Direction property of "Down" adds a second list of shapes to the first shape.

{
"Shape": {"Label":"First Shape","ShapeConnectorType":"Flowchart",
          "ShapeConnector": [{"Shapes": [{},{}]},{"Direction":"Down","Shapes": [{},{}]}]
       }
}
SDON two direction flowchart

Two or more connectors in the same direction create a split path:

{
"Shape": {"Label":"First Shape","ShapeConnectorType":"Flowchart",
          "ShapeConnector": [{"Shapes": [{},{}]},{"Shapes": [{},{}]}]
       }
}
SDON split path flowchart

This is a nice way to represent a decision.

Here's three connectors in three directions:

{
"Shape": {"Label":"First Shape","ShapeConnectorType":"Flowchart",
          "ShapeConnector": [{"Direction":"Right","Shapes": [{},{}]},{"Direction":"Down","Shapes": [{},{}]},{"Direction":"Left","Shapes": [{},{}]}]
       }
}
SDON three direction flowchart

Making More Complex Charts

Each Shape attached to a ShapeConnector can itself have a ShapeConnector:

This flowchart is built with this script:

SDON complex flowchart
{
"Shape": {
"Label": "Vendor Payment Processing",
"ShapeConnectorType": "Flowchart",
"ShapeConnector": [
{
"Direction": "Down",
"Shapes": [
{
"Label": "Pull Vendor Invoice from Stack",
},
{
"Label": "Does Invoice have a Purchase Order Number?",
"ShapeType":"Diamond",
"ShapeConnector": [
{
"Direction": "Right",
"Shapes": [
{
"Label": "Contact Purchaser to Have Them Complete Purchase Order and Have it Approved",
"LineLabel": "No"
}
]
}
]
},
{
"Label": "Match Invoice to Approved Purchase Order",
"LineLabel": "Yes"
},
{
"Label": "Do the Amounts Match?",
"ShapeType":"Diamond",
"ShapeConnector": [
{
"Direction": "Right",
"Shapes": [
{
"Label": "Were Goods or Services Invoice Relates to Received?",
"ID": "2",
"LineLabel": "Yes",
"ShapeConnector": [
{
"Shapes": [
{
"Label": "Forward Invoice to Accounts Payable Clerk for Processing",
"LineLabel": "Yes"
}
]
},
{
"Shapes": [
{
"Label": "Contact Vendor to Notify Them Invoice is Being Held Pending Receipt of Goods or Service",
"LineLabel": "No",
"ShapeConnector": [
{
"Direction": "Down",
"Shapes": [
{
"Label": "Place Invoice in 'HOLD' file"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"Label": "Consult Manager on Discrepancy",
"LineLabel": "No"
},
{
"Label": "Discrepancy Merit investigating?",
"ID": "1"
},
{
"Label": "Investigate and Rectify",
"ShapeType":"Diamond"
}
]
}
]
},
"Returns": [
{
"StartID": "1",
"EndID": "2",
"StartDirection": "Right",
"EndDirection": "Bottom",
"LineColor":"#FF0000",
"Label": "No"
}
]
}

Let's look at how this is constructed:

Building the Vertical Flow

We start with the shape labeled "Vendor Payment Processing" and add a single ShapeConnector with 7 shapes with Direction "Down". This creates this part of the chart:

SDON vertical flowchart

Adding the Line Labels

There are two labels on this connector: "Yes" before the "Match Invoice to Approved Purchase Order" shape and "No" before the "Consult Manager on Discrepancy" shape. These are added by adding a "LineLabel" property to these shapes:

"Label": "Match Invoice to Approved Purchase Order",
"LineLabel": "Yes"

and

"Label": "Consult Manager on Discrepancy",
"LineLabel": "No"

Adding Decisions

The shapes before these labels are decisions and are drawn as diamonds. The outline of a shape can be changed with "ShapeType":"". Standard types include "Diamond","Oval" etc.

"Label": "Does Invoice have a Purchase Order Number?",
"ShapeType":"Diamond",
SDON flowchart decision

A second ShapeConnector is also added to each decision in perpendicular direction (Right):

"Label": "Does Invoice have a Purchase Order Number?",
"ShapeType":"Diamond",
"ShapeConnector": [
{
"Direction": "Right",
"Shapes": [
                  {
                  "Label": "Contact Purchaser to Have Them Complete Purchase Order and Have it Approved",
                  "LineLabel": "No"
                  }
                 ]
}]
SDON flowchart with text on line

Note that the shape on the perpendicular connector has a LineLabel "No" that appears in front of it.

Adding a Return Lines

The line from the shape labeled "Discrepancy Merit investigating?" to the shape labeled "Were Goods or Services Invoice Relates to Received" is called a "Return". A Return array appears at the root level of the SDON object that defines return lines between shapes:

"Returns": [
{
"StartID": "1",
"EndID": "2",
"StartDirection": "Right",
"EndDirection": "Bottom",
"LineColor":"#FF0000",
"Label": "No"
}]

The two shapes in question have an ID properties:

"Label": "Were Goods or Services Invoice Relates to Received?",
"ID": "2",
"LineLabel": "Yes",

and

"Label": "Discrepancy Merit investigating?",
"ID": "1"

The line comes out of the right side of the starting shape ("StartDirection": "Right") and ends by going into the bottom side of the ending shape ("EndDirection": "Bottom") and is shown in red for clarity ("LineColor":"#FF0000").

SDON flowchart line direction

Arranging Shapes on a Page without Lines

As we have seen ShapeConnectors make it easy to create trees and flowcharts, but there are many kinds of charts that do not organize shapes in these arrangements. For example

  • Network diagrams
  • ERD Diagrams
  • Class Diagrams
  • Planograms
  • Project schedules
  • Grids

You can build all of these and more with SDON using the ShapeContainer and Table objects.

11/17 Page