Skip to end of metadata
Go to start of metadata

Summary

At its simplest level,  SmartDraw API has one call that passes a JSON description of a diagram to the SmartDraw add-on, which then reads and builds the described diagram.

Overview

SmartDraw Object Notation (SDON) leverages the JSON syntax to describe special JavaScript objects, which are in turn translated into a visual representation.

The automatic formatting feature of SmartDraw allows this JSON format to be very simple. The minimum level is for only a sequence of shapes to be defined. The properties of these shapes have defaults given by the SmartDraw template used to create the diagram. The rest of the API consists of helper functions that build this SDON in server memory before finally passing the completed structure to the SmartDraw add-on. With a good understanding of the SDON structure an app can build the SDON description without the helper functions and simply pass it to the editor.

Once complete, the SDON file can be saved as an attachment to a page in Confluence.  The user completes the process by inserting a SmartDraw macro and importing the SDON file. Alternatively you can import a SDON previously saved elsewhere.

DiagramType

At the top level, a SDON object consists of a DiagramType and an array of RootShapes. The initial implementation of the API supports only one RootShape for certain diagram types and ignores the others. The DiagramType can be any of the following:

  • Mindmap
  • Flowchart
  • Orgchart
  • Decisiontree

Each value maps to the default template, identified by its GUID, for the template type. If you know the exact GUID of a template you wish to use, you may define it instead.

RootShape

A RootShape is a shape not attached to a connector or is not part of a ShapeList. Initially, only one RootShape is recognized by API.

A basic SDON files looks like this:

{
    "DiagramType": "Mindmap",
    "RootShape": [{
        "Label": "Hello World",
        "ShapeList": [{
            "Shapes": [
                {"Label": "Child 1"},
                {"Label": "Child 2"}
            ]
        }]
    }]
}



There is a RootShape that has a text label ("Hello World") and then defines an array of ShapeLists that are attached to this rootshape.

A ShapeList defines an automatic connector line in SmartDraw and the list of shapes that are attached to it. For some diagrams, a RootShape (or any shape) can have multiple connectors attached to it so each shape has an array of ShapeLists.

This file has only one ShapeList in the array that consists of two shapes that are children of the RootShape. Importing this file produces a mind map that looks like this:

Note that the colors, line thicknesses and sizes of the shapes are all defaulted. There is no requirement to define anything about a shape other than its existence.

For example, this SDON script:

{
    "DiagramType":"Flowchart",
    "RootShape":[{
        "Label":"Root",
        "ShapeList": [{
            "Direction":"Right",
            "Shapes": [{
                "Label":"Shape 1",
                "ShapeList": [{
                    "Direction":"Down",
                    "Shapes": [
                        {"Label":"Child 1"},
                        {"Label":"Child 2"}
                    ]}
                ]},
                {
                "Label":"Shape 2"
                },
                {
                    "Label":"Shape 3",
                    "ShapeList":[{
                        "Direction":"Down",
                        "Shapes": [
                            {"Label":"Down 1"},
                            {"Label":"Down 2"}
                        ]},
                 {
                    "Direction":"Up","Shapes": [
                        {"Label":"Up 1"},
                        {"Label":"Up 2"}
                    ]}
                ]},
                {
                    "Label":"Shape 4"
                },
                {
                    "Label":"Shape 5"
                }
            ]
        }]
    }]
}


Creates this flowchart:


The styles are set by default. To dig deeper into SDON and learn how to override style and connector options, read on.


©2017 SmartDraw, LLC.  This document, its contents and the SmartDraw Object Notation (“SDON”) syntax are intellectual property of SmartDraw, LLC and protected by copyright and license. 
  • No labels