The VisualScript Cookbook

1/18 Page

This guide will walk you through everything you will want to know about VisualScript, its building blocks, and how to write VisualScript to generate visuals that show hierarchy and relationships such as flowcharts, org charts, decision trees, and more.

What is VisualScript?

VisualScript is a markup language based on JSON that can describe a diagram to be rendered by an intelligent formatting engine.

This simple VisualScript markup can be rendered as an org chart:

{
        "Shape": {
        "ShapeConnector": ["ShapeConnectorType": "Hierarchy", {
        "Shapes": [{}, {}]
      }]
    }
  }
VisualScript org chart

Just a few lines of code create a perfectly formatted hierarchy of three shapes.

What's Unique About VisualScript

What makes VisualScript so easy is that you can take advantage of powerful intelligent formatting. To create a diagram using VisualScript, you don't have to use a coordinate system to describe the explicit placement of shapes, instead you can leverage an intelligent rule-based formatting engine to simplify the format and reduce the work. SDON makes it easy to create a third-party tool or template that can quickly turn data into diagrams, automatically.

The following analogy is helpful in understanding the innovation that VisualScript represents.

We are all used to software that can take a set of XY data and plot a graph. Let's take for example a line graph made in Excel. To make the graph, you simply select two columns of data and request that Excel render a line graph. You don't specify the coordinates of each point on the line. You don't individually calculate the line between each point, or draw the axes separately, or define the pixels for numbers and text labels, and so forth. It would be no small feat to draw just a simple line graph if you had to calculate everything individually. Yet, about fifty years ago, that's exactly what you would have had to do to generate a graph on a computer using code. Today, we are completely used to the idea that to draw a graph, all we need to do is specify the type of graph we want and the data to plot and the software will draw it automatically. But this has never been the case for diagrams until VisualScript.

Temperature graph

In the very first VisualScript example we shared above, we specified that we wanted three shapes arranged in a hierarchy. The intelligent formatting engine did the rest.

VisualScript is both flexible and powerful, while still being simple enough to make it easy to generate a diagram. We also created an SDK (available in Java, JavaScript and C#) that makes generating VisualScript even easier. VisualScript makes it not only possible to generate diagrams that represent hierarchical and relational data, but easy.

Types of Diagrams You Can Generate with VisualScript

Now lets look at the equivalent of the "graph types" that VisualScript offers for automatically generating diagrams.

The VisualScript SDK

The VisualScript SDK is an object model that builds a VisualScript description of a document without hand coding JSON. It is the recommended way of writing VisualScript markup. The SDK is available in JavaScript, C# and Java.

All of the examples in this cookbook use the SDK. To learn more about the methods and classes available read the VisualScript SDK Reference Guide.

If you need to generate VisualScript with a language not supported by our SDK, you can learn about the objects and constants available in the VisualSCript markup language in this reference guide.

1/18 Page