The JSON Graph Format

JSON (JavaScript Object Notation) is an open standard format that is widely used and accepted as interchange format on the web. JSON consists of arbitrary key-value pairs. We specify some conventions to represent a graph within this format.

The JSON graph format comprises of four basic elements - Nodes, Ports, Labels, and Edges.

Each element has an 'id' that identifies it uniquely.
The first three elements can hold a position and dimension.
Edges on the contrary can hold bend points specifying where the edge changes direction.
Nodes can contain child nodes and hold ports that specify attachment points of edges.
Multiple edges can be attached to the same port, the port can be attached to the node itself.
All elements can hold labels (despite the label itself).
All elements can hold properties which represent additional information to the layout algorithm.

Examples

Below are some example graphs in the JSON graph format. You can hop to the Live section of our web service and try them! If you use SVG as output format the graph will be rendered as an SVG image directly within your browser.

{
    id: "root",  // root node
    children: [{
        id: "n1",  // node n1
        labels: [ { text: "n1" } ],
        width: 100, 
        height: 100
    },{
        id: "n2",  // node n2
        labels: [ { text: "n2" } ],
        width: 100,
        height: 50,
        children: [{  
            id: "n3",  // node n3 (child of n2)
            labels: [ { text: "n3" } ],
            width: 20,
            height: 20
        },{
            id: "n4",  // node n4 (child of n3)
            labels: [ { text: "n4" } ],
            width: 20,
            height: 20}
        ],
        edges: [{
            id: "e4",  // edge n3 -> n4
            source: "n3",
            target: "n4"
        }]
    }],
    edges: [{
        id: "e1",  // edge n1 -> n2
        source: "n1",
        target: "n2"
    }]
}

{
    id: "root",  
    children: [{
        id: "n1",  
        labels: [ { text: "n1" } ],
        width: 100, 
        height: 100
    },{
        id: "n2", 
        labels: [ { text: "n2" } ],
        width: 100,
        height: 50,
        ports: [{
            id: "n2_p1",
            width: 10,
            height: 10
        }],
        children: [{  
            id: "n3",  
            labels: [ { text: "n3" } ],
            width: 20,
            height: 20
        },{
            id: "n4", 
            labels: [ { text: "n4" } ],
            width: 20,
            height: 20}
        ],
        edges: [{
            id: "e4",  
            source: "n3",
            target: "n4"
        }]
    },{
        id: "n5",
        labels: [ { text: "n5" } ],
        width: 100,
        height: 50
    }],
    edges: [{
        id: "e1",  
        labels: [ { text: "e1" } ],
        source: "n1",
        target: "n2",
        targetPort: "n2_p1"
    },{
        id: "e2",  
        labels: [ { text: "e2" } ],
        source: "n1",
        target: "n5"
    }]
}