The VSON Cookbook

19/24 Page

Arranging Shapes in Complex Ways using Nesting

Like ShapeConnector objects, ShapeContainer objects are recursive. The shapes in a ShapeContainer can themselves be ShapeContainer parents. This makes it possible to create almost any layout of shapes on a page.

Creating a More Complex Layout with Multiple ShapeContainers

Let's say you want to arrange a larger shape above a row of smaller shapes. This script creates a diagram with the container shapesleft in place for clarity. The first ShapeContainer defines a column arrangement for two shapes. The second shape contains a ShapeContainer with three additional shapes in a row arrangement.

{
  "Version": "1.0",
  "Template": "Flowchart",
  "McpGenerated": true,
  "KeepDocument": true,
  "Shape": {
    "ID": 1,
    "ShapeContainer": {
      "Arrangement": "Column",
      "Shapes": [
        {
          "ID": 2,
          "Label": "Header",
          "MinWidth": 600,
          "MinHeight": 100
        },
        {
          "ID": 3,
          "ShapeContainer": {
            "Arrangement": "Row",
            "Shapes": [
              { "ID": 4, "Label": "Tile A" },
              { "ID": 5, "Label": "Tile B" },
              { "ID": 6, "Label": "Tile C" }
            ]
          }
        }
      ]
    }
  }
}
VisualScript shape rows with large shape

Using the "Hide" property on the container shapes gives us this cleaner version:

VisualScript shape rows with large shape with no border

Placing Multiple Trees and Flows on a Page

Any shape that appears in a ShapeContainer can be the root of a tree or flow defined using ShapeConnector objects:

{
  "Shape": {
    "ID": 1,
    "Hide": true,
    "ShapeContainer": {
      "Arrangement": "Row",
      "Shapes": [
        {
          "ID": 2,
          "Label": "Process A",
          "ShapeConnector": [
            {
              "ShapeConnectorType": "Flowchart",
              "Direction": "Bottom",
              "Shapes": [ { "ID": 10 }, { "ID": 11 }, { "ID": 12 } ]
            }
          ]
        },
        {
          "ID": 3,
          "Label": "Process B",
          "ShapeConnector": [
            {
              "ShapeConnectorType": "Flowchart",
              "Direction": "Bottom",
              "Shapes": [ { "ID": 20 }, { "ID": 21 } ]
            }
          ]
        }
      ]
    }
  }
}
VisualScript shape rows with diagram

This allows you to place multiple trees and flows on a page by using multiple shapes inside a ShapeContainer.

19/24 Page