The JSON format is still experimental and not part of a release. Please refer to nightly builds to try it. |
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.
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" }] } |