Wiki source code of JSON Graph Format

Last modified by Richard Kreissig on 2023/09/14 10:36
Hide last authors
uru 1.1 1 = The JSON Graph Format =
2
3 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.
4
Alexander Schulz-Rosengarten 21.1 5 We specify positions of nodes and edges relative to parent nodes, see our [[doc:KIELER.Discontinued Projects.Infrastructure for Meta Layout (KIML).KLayoutData Meta Model.WebHome]] documentation for further information.
uru 11.1 6
uru 1.1 7 (% style="color: rgb(51,51,51);" %)The JSON graph format comprises of four basic elements - //Nodes, Ports, Labels, and Edges//.
8
uru 5.1 9 * Each element has an '**id**' that identifies it uniquely.
10 * The first three elements can hold a **position** and **dimension**.
11 * Edges on the contrary can hold **bend points** specifying where the edge changes direction.
12 * Nodes can contain **child nodes** and hold **ports** that specify attachment points of edges.
uru 11.1 13 * Nodes holding child nodes can specify a **padding**.
uru 5.1 14 * Multiple edges can be attached to the same port, the port is attached to the node itself.
15 * All elements can hold **labels** (despite the label itself).
16 * All elements can hold **properties** which represent additional information to the layout algorithm.
uru 1.1 17
18 == Examples ==
19
20 (% style="color: rgb(51,51,51);" %)Below are some example graphs in the JSON graph format. You can hop to the (%%)[[Live>>url:http://localhost:9444/Live.html||style="text-decoration: none;" shape="rect"]](% style="color: rgb(51,51,51);" %) 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.
21
uru 6.1 22 === Minimal ===
uru 1.1 23
uru 6.1 24 (% style="color: rgb(0,0,0);" %) (%%)The following example shows a very simple graph consisting of two nodes connected by one edge. Each node owns a //width// and //height// as well as a //label//.
uru 1.1 25
26 {{code title="Small graph with one edge" language="js" collapse="true"}}
27 {
28 id: "root", // root node
29 children: [{
30 id: "n1", // node n1
31 labels: [ { text: "n1" } ],
32 width: 100,
uru 4.1 33 height: 100,
uru 1.1 34 },{
35 id: "n2", // node n2
36 labels: [ { text: "n2" } ],
37 width: 100,
uru 4.1 38 height: 50
uru 1.1 39 }],
40 edges: [{
41 id: "e1", // edge n1 -> n2
42 source: "n1",
43 target: "n2"
44 }]
45 }
46 {{/code}}
47
uru 8.1 48
49
50
51
52
53
uru 7.1 54 [[image:attach:minimal.png]]
uru 1.1 55
uru 6.1 56 === (% style="color: rgb(0,0,0);" %)Hierarchy and Ports(%%) ===
uru 1.1 57
uru 6.1 58 This example illustrates nesting of nodes to establish hierarchy. The node {{code language="none"}}n2{{/code}} serves as parent node for nodes {{code language="none"}}n3{{/code}} and {{code language="none"}}n4{{/code}}. The latter two nodes are connected via edge {{code language="none"}}e2{{/code}}. Furthermore, edge {{code language="none"}}e1{{/code}} is connected to port {{code language="none"}}n2_p1{{/code}} of node {{code language="none"}}n2{{/code}}.
59
uru 1.1 60 {{code title="Small graph with a port and hierarchy" language="js" collapse="true"}}
61 {
62 id: "root",
63 children: [{
64 id: "n1",
65 labels: [ { text: "n1" } ],
66 width: 100,
67 height: 100
68 },{
69 id: "n2",
70 labels: [ { text: "n2" } ],
71 width: 100,
72 height: 50,
73 ports: [{
74 id: "n2_p1",
75 width: 10,
76 height: 10
77 }],
78 children: [{
79 id: "n3",
80 labels: [ { text: "n3" } ],
uru 7.1 81 width: 40,
82 height: 40
uru 1.1 83 },{
84 id: "n4",
85 labels: [ { text: "n4" } ],
uru 7.1 86 width: 40,
87 height: 40}
uru 1.1 88 ],
89 edges: [{
uru 7.1 90 id: "e4",
uru 1.1 91 source: "n3",
92 target: "n4"
93 }]
94 }],
95 edges: [{
96 id: "e1",
97 labels: [ { text: "e1" } ],
98 source: "n1",
99 target: "n2",
100 targetPort: "n2_p1"
101 }]
102 }
103 {{/code}}
104
uru 7.1 105 (% style="text-align: left;" %)
uru 8.1 106
107
108 (% style="text-align: left;" %)
109
110
111 (% style="text-align: left;" %)
112
113
114 (% style="text-align: left;" %)
uru 7.1 115 [[image:attach:hierarchyAndPort.png]]
uru 6.1 116
uru 5.1 117 === Element Properties ===
uru 1.1 118
uru 6.1 119 All graph elements can hold further //properties// that specify certain behavior. In the example below, the both nodes have //FIXED_SIDE// {{code language="none"}}portConstraints{{/code}}, indicating that the ports may also be moved on their respective side. The side of each port is specified using the {{code language="none"}}portSide{{/code}} property.
uru 5.1 120
Alexander Schulz-Rosengarten 22.1 121 Note that properties might be coupled with a certain layout algorithm and hence are not always available. The two properties used in this example are only available for our[[ Klay Layered>>doc:KIELER.Discontinued Projects.Layout Algorithms (KLay).KLay Layered.WebHome]] algorithm.
uru 5.1 122
123 {{code title="Port Constraints and Port Sides" language="js" collapse="true"}}
124 {
125 id: "root", // root node
126 children: [{
127 id: "n1", // node n1
128 labels: [ { text: "n1" } ],
129 // node n1 has fixed port constraints
uru 10.1 130 properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"},
uru 5.1 131 width: 100,
132 height: 100,
133 ports: [{
134 id: "p1",
135 width: 10,
136 height: 10,
137 // port p1 should be located on the north side
uru 10.1 138 properties: {"de.cau.cs.kieler.portSide": "NORTH"}
uru 5.1 139 }]
140 },{
141 id: "n2", // node n2
142 labels: [ { text: "n2" } ],
uru 10.1 143 properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"},
uru 5.1 144 width: 100,
145 height: 50,
146 ports: [{
147 id: "p2",
148 width: 10,
149 height: 10,
uru 10.1 150 properties: {"de.cau.cs.kieler.portSide": "SOUTH"}
uru 5.1 151 }]
152 }],
153 // children end
154 edges: [{
155 id: "e1", // edge n1 -> n2
156 source: "n1",
157 target: "n2",
158 sourcePort: "p1", // p1 -> p2
159 targetPort: "p2"
160 }]
161 }
162 {{/code}}
uru 6.1 163
uru 8.1 164
165
166
167
168
169
170
171
uru 7.1 172 [[image:attach:properties.png]]
uru 11.1 173
174 === Padding ===
175
176 One can assign {{code language="none"}}padding{{/code}} to compound nodes. In the following example the node {{code language="none"}}n2{{/code}} contains four different padding values for the each side.
177
Alexander Schulz-Rosengarten 21.1 178 Note, that positions of child nodes are relative to the parent nodes (0,0) **plus** the left and top padding. Refer to the documentation of [[KLayoutData >>doc:KIELER.Discontinued Projects.Infrastructure for Meta Layout (KIML).KLayoutData Meta Model.WebHome]]for further information on relative positioning.
uru 11.1 179
180 {{code title="Padding" language="js" collapse="true"}}
181 {
182 id: "root",
183 children: [{
184 id: "n1",
185 labels: [ { text: "n1" } ],
186 width: 100,
187 height: 100
188 },{
189 id: "n2",
190 labels: [ { text: "n2" } ],
191 width: 100,
192 height: 50,
193 padding: {
194 left: 40,
195 top: 20,
196 right: 50,
197 bottom: 10
198 },
199 ports: [{
200 id: "n2_p1",
201 width: 10,
202 height: 10
203 }],
204 children: [{
205 id: "n3",
206 labels: [ { text: "n3" } ],
207 width: 40,
208 height: 40
209 },{
210 id: "n4",
211 labels: [ { text: "n4" } ],
212 width: 40,
213 height: 40}
214 ],
215 edges: [{
216 id: "e4",
217 source: "n3",
218 target: "n4"
219 }]
220 }],
221 edges: [{
222 id: "e1",
223 labels: [ { text: "e1" } ],
224 source: "n1",
225 target: "n2",
226 targetPort: "n2_p1"
227 }]
228 }
229 {{/code}}
230
uru 12.1 231
232
233
234
235
236
uru 11.1 237 [[image:attach:padding.png]]
uru 13.1 238
239 === Fixed Layout ===
240
241 The example below shows how to mix existing positions with automatic layout. To activate this the {{code language="none"}}de.cau.cs.kieler.fixed{{/code}} algorithm can be used, see the properties specification of the {{code language="none"}}n2{{/code}} node.
242
243 Fixed positions are specified for the two child nodes of the compound node {{code language="none"}}n2{{/code}} and the edge that connects them. Positions can either be directly set to {{code language="none"}}x{{/code}} and {{code language="none"}}y{{/code}} or specified via the {{code language="none"}}position{{/code}} property. Bendpoints are specified via {{code language="none"}}bendPoints{{/code}}, where the first and the last pair of coordinates determines the attachment positions at the node or port and any further pair represents a bendpoint.
244
245 {{code title="Fixed Layout" language="js" collapse="true"}}
246 {
247 id : "root",
248 children : [ {
249 id : "n1",
250 width : 50,
251 height : 50
252 }, {
253 id : "n2",
254 width : 100,
255 height : 50,
256 properties : {
257 algorithm : "de.cau.cs.kieler.fixed"
258 },
259 ports : [ {
260 id : "n2_p1",
261 width : 10,
262 height : 10
263 } ],
264 children : [ {
265 id : "n3",
266 labels : [ {
267 text : "n3"
268 } ],
269 width : 40,
270 height : 40,
271 properties : {
272 position : "20, 40"
273 }
274 }, {
275 id : "n4",
276 labels : [ {
277 text : "n4"
278 } ],
279 width : 40,
280 height : 40,
281 properties : {
282 position : "140, 95"
283 }
284 } ],
285 edges : [ {
286 id : "e4",
287 source : "n3",
288 target : "n4",
289 properties : {
290 // first and last are src and target
291 bendPoints : "60, 60, 80, 10, 140, 115"
292 }
293 } ]
294 } ],
295 edges : [ {
296 id : "e1",
297 labels : [ {
298 text : "e1"
299 } ],
300 source : "n1",
301 target : "n2",
302 targetPort : "n2_p1"
303 } ]
304 };
305 {{/code}}
306
uru 14.1 307
308
309
uru 13.1 310 [[image:attach:fixed_pos.png]]
Richard Kreissig 24.1 311

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage