Wiki source code of JSON Graph Format

Version 21.1 by Alexander Schulz-Rosengarten on 2023/07/11 10:33
Show last authors
1 {{layout}}
2 {{layout-section ac:type="single"}}
3 {{layout-cell}}
4 = The JSON Graph Format =
5
6 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.
7
8 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.
9
10 (% style="color: rgb(51,51,51);" %)The JSON graph format comprises of four basic elements - //Nodes, Ports, Labels, and Edges//.
11
12 * Each element has an '**id**' that identifies it uniquely.
13 * The first three elements can hold a **position** and **dimension**.
14 * Edges on the contrary can hold **bend points** specifying where the edge changes direction.
15 * Nodes can contain **child nodes** and hold **ports** that specify attachment points of edges.
16 * Nodes holding child nodes can specify a **padding**.
17 * Multiple edges can be attached to the same port, the port is attached to the node itself.
18 * All elements can hold **labels** (despite the label itself).
19 * All elements can hold **properties** which represent additional information to the layout algorithm.
20
21 == Examples ==
22
23 (% 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.
24 {{/layout-cell}}
25 {{/layout-section}}
26
27 {{layout-section ac:type="two_right_sidebar"}}
28 {{layout-cell}}
29 === Minimal ===
30
31 (% 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//.
32
33 {{code title="Small graph with one edge" language="js" collapse="true"}}
34 {
35 id: "root", // root node
36 children: [{
37 id: "n1", // node n1
38 labels: [ { text: "n1" } ],
39 width: 100,
40 height: 100,
41 },{
42 id: "n2", // node n2
43 labels: [ { text: "n2" } ],
44 width: 100,
45 height: 50
46 }],
47 edges: [{
48 id: "e1", // edge n1 -> n2
49 source: "n1",
50 target: "n2"
51 }]
52 }
53 {{/code}}
54 {{/layout-cell}}
55
56 {{layout-cell}}
57
58
59
60
61
62
63 [[image:attach:minimal.png]]
64 {{/layout-cell}}
65 {{/layout-section}}
66
67 {{layout-section ac:type="two_right_sidebar"}}
68 {{layout-cell}}
69 === (% style="color: rgb(0,0,0);" %)Hierarchy and Ports(%%) ===
70
71 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}}.
72
73 {{code title="Small graph with a port and hierarchy" language="js" collapse="true"}}
74 {
75 id: "root",
76 children: [{
77 id: "n1",
78 labels: [ { text: "n1" } ],
79 width: 100,
80 height: 100
81 },{
82 id: "n2",
83 labels: [ { text: "n2" } ],
84 width: 100,
85 height: 50,
86 ports: [{
87 id: "n2_p1",
88 width: 10,
89 height: 10
90 }],
91 children: [{
92 id: "n3",
93 labels: [ { text: "n3" } ],
94 width: 40,
95 height: 40
96 },{
97 id: "n4",
98 labels: [ { text: "n4" } ],
99 width: 40,
100 height: 40}
101 ],
102 edges: [{
103 id: "e4",
104 source: "n3",
105 target: "n4"
106 }]
107 }],
108 edges: [{
109 id: "e1",
110 labels: [ { text: "e1" } ],
111 source: "n1",
112 target: "n2",
113 targetPort: "n2_p1"
114 }]
115 }
116 {{/code}}
117 {{/layout-cell}}
118
119 {{layout-cell}}
120 (% style="text-align: left;" %)
121
122
123 (% style="text-align: left;" %)
124
125
126 (% style="text-align: left;" %)
127
128
129 (% style="text-align: left;" %)
130 [[image:attach:hierarchyAndPort.png]]
131 {{/layout-cell}}
132 {{/layout-section}}
133
134 {{layout-section ac:type="two_right_sidebar"}}
135 {{layout-cell}}
136 === Element Properties ===
137
138 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.
139
140 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.
141
142 {{code title="Port Constraints and Port Sides" language="js" collapse="true"}}
143 {
144 id: "root", // root node
145 children: [{
146 id: "n1", // node n1
147 labels: [ { text: "n1" } ],
148 // node n1 has fixed port constraints
149 properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"},
150 width: 100,
151 height: 100,
152 ports: [{
153 id: "p1",
154 width: 10,
155 height: 10,
156 // port p1 should be located on the north side
157 properties: {"de.cau.cs.kieler.portSide": "NORTH"}
158 }]
159 },{
160 id: "n2", // node n2
161 labels: [ { text: "n2" } ],
162 properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"},
163 width: 100,
164 height: 50,
165 ports: [{
166 id: "p2",
167 width: 10,
168 height: 10,
169 properties: {"de.cau.cs.kieler.portSide": "SOUTH"}
170 }]
171 }],
172 // children end
173 edges: [{
174 id: "e1", // edge n1 -> n2
175 source: "n1",
176 target: "n2",
177 sourcePort: "p1", // p1 -> p2
178 targetPort: "p2"
179 }]
180 }
181 {{/code}}
182 {{/layout-cell}}
183
184 {{layout-cell}}
185
186
187
188
189
190
191
192
193 [[image:attach:properties.png]]
194 {{/layout-cell}}
195 {{/layout-section}}
196
197 {{layout-section ac:type="two_right_sidebar"}}
198 {{layout-cell}}
199 === Padding ===
200
201 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.
202
203 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.
204
205 {{code title="Padding" language="js" collapse="true"}}
206 {
207 id: "root",
208 children: [{
209 id: "n1",
210 labels: [ { text: "n1" } ],
211 width: 100,
212 height: 100
213 },{
214 id: "n2",
215 labels: [ { text: "n2" } ],
216 width: 100,
217 height: 50,
218 padding: {
219 left: 40,
220 top: 20,
221 right: 50,
222 bottom: 10
223 },
224 ports: [{
225 id: "n2_p1",
226 width: 10,
227 height: 10
228 }],
229 children: [{
230 id: "n3",
231 labels: [ { text: "n3" } ],
232 width: 40,
233 height: 40
234 },{
235 id: "n4",
236 labels: [ { text: "n4" } ],
237 width: 40,
238 height: 40}
239 ],
240 edges: [{
241 id: "e4",
242 source: "n3",
243 target: "n4"
244 }]
245 }],
246 edges: [{
247 id: "e1",
248 labels: [ { text: "e1" } ],
249 source: "n1",
250 target: "n2",
251 targetPort: "n2_p1"
252 }]
253 }
254 {{/code}}
255 {{/layout-cell}}
256
257 {{layout-cell}}
258
259
260
261
262
263
264 [[image:attach:padding.png]]
265 {{/layout-cell}}
266 {{/layout-section}}
267
268 {{layout-section ac:type="two_right_sidebar"}}
269 {{layout-cell}}
270 === Fixed Layout ===
271
272 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.
273
274 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.
275
276 {{code title="Fixed Layout" language="js" collapse="true"}}
277 {
278 id : "root",
279 children : [ {
280 id : "n1",
281 width : 50,
282 height : 50
283 }, {
284 id : "n2",
285 width : 100,
286 height : 50,
287 properties : {
288 algorithm : "de.cau.cs.kieler.fixed"
289 },
290 ports : [ {
291 id : "n2_p1",
292 width : 10,
293 height : 10
294 } ],
295 children : [ {
296 id : "n3",
297 labels : [ {
298 text : "n3"
299 } ],
300 width : 40,
301 height : 40,
302 properties : {
303 position : "20, 40"
304 }
305 }, {
306 id : "n4",
307 labels : [ {
308 text : "n4"
309 } ],
310 width : 40,
311 height : 40,
312 properties : {
313 position : "140, 95"
314 }
315 } ],
316 edges : [ {
317 id : "e4",
318 source : "n3",
319 target : "n4",
320 properties : {
321 // first and last are src and target
322 bendPoints : "60, 60, 80, 10, 140, 115"
323 }
324 } ]
325 } ],
326 edges : [ {
327 id : "e1",
328 labels : [ {
329 text : "e1"
330 } ],
331 source : "n1",
332 target : "n2",
333 targetPort : "n2_p1"
334 } ]
335 };
336 {{/code}}
337 {{/layout-cell}}
338
339 {{layout-cell}}
340
341
342
343
344 [[image:attach:fixed_pos.png]]
345 {{/layout-cell}}
346 {{/layout-section}}
347 {{/layout}}

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage