JSON syntax: Layout options

These options determine the layout of hierarchical diagrams.

  • Flow / Context
  • Hierarchy left - right
  • Hierarchy top - down
  • Hierarchy bottom - up
Example 
"layoutOptions": {
	"compactGroups": false,
	"componentArrangementPolicy": "topmost",
	"edgeBends": true,
	"edgeBundling": true,
	"edgeToEdgeDistance": 5,
	"minimumLayerDistance": "auto",
	"nodeToEdgeDistance": 5,
	"orthogonalRouting": true,
    	"preciseNodeHeightCalculation": true,
    	"recursiveGroupLayering": true,
	"separateLayers": true,
	"webWorkers": true,
	"nodePlacer": {
		"barycenterMode": "auto",
		"breakLongSegments": "auto",
		"groupCompactionStrategy": "none",
		"nodeCompaction": "auto",
		"straightenEdges": "auto"
	}
}
JSON syntax with all default values Description
"compactGroups": true // false

Group compaction reduces the number of node layers without reversing edge directions.

The resulting layering tries to keep the layer span of a boxing node at a minimum, while minimizing the overall vertical space.

You can choose one of the following values:

  • true: The diagram view uses as few node layers as possible. The layers of a diagram are also used inside a boxing node.
  • false: The diagram view does not try to reduce the number of node layers. This results in separate layers inside a boxing node.
Note 
  • This option is only applicable when recursiveGroupLayering is set to true.
  • This option is optional.
  • The default value is false.
  • This option does not affect the loading time of the diagram.
"componentArrangementPolicy": "topmost" // "compact"

Choose how to arrange boxed nodes that are not connected by the arrow edge with other nodes.

This is only applicable to boxed and boxing edges.

You can choose one of the following values:

  • "topmost": Vertically align the boxed nodes with their topmost boxed node inside the boxing node.
  • "compact": Put the boxed nodes in different layers to reduce the size of the boxing node. This reduces the overall diagram size.
    If the diagram layout is Hierarchy left - right or Flow / Context, the height of the diagram will be minimized.
    If the diagram layout is Hierarchy bottom - up or Hierarchy top - down, the width will be minimized.
Note 
  • This option is optional.
  • The default value is topmost.
  • This option does not affect the loading time of the diagram.
"edgeBends": true // false

Choose whether edges can be curved and can contain bends.

Warning When this option is false, the edgeBundling and orthogonalRouting options are automatically ignored.

You can choose one of the following values:

  • true: Enables edge bends.
  • false: Disables edge bends, edgeBundling and orthogonalRouting.
    Edges without bends go in a straight line from source node to target node, and may cross other nodes. They don’t reserve space for edge labels.
Note 
  • This option is optional.
  • The default value is true. 
  • Choosing true may lead to an increased loading time of the diagram.
"edgeBundling": true // false

Choose whether arrow edges can be bundled at the source or target node when they represent the same incoming or outgoing relation.

Note Only one edge label is displayed for a bundled edge.

You can choose one of the following values:

  • true: Enable edge bundling.
  • false: Disable edge bundling.
Note 
  • This option is optional.
  • The default value is true.
  • Choosing true may lead to an increased loading time of the diagram.
"edgeToEdgeDistance": 5 // "auto"

Set the minimum distance (in pixels) between two adjacent edges in one layer.

This affects the horizontal distance if the diagram layout is:

  • Hierarchy left - right
  • Flow / Context, but only for nodes in the flow

This affects the vertical distance if the diagram layout is:

  • Hierarchy top - down
  • Hierarchy bottom - up
  • Flow / Context, but only for nodes in the context

You can choose one of the following values:

  • [Any positive integer value]: Use this amount of pixels.
  • "auto": Let a layouting algorithm automatically set the value.
Note 
  • This option is optional.
  • The default value is 5.
  • This option does not affect the loading time of the diagram.
"minimumLayerDistance": 5 // "auto"

Set the minimum distance (in pixels) between two adjacent layers.

This affects the horizontal distance if the diagram layout is:

  • Hierarchy left - right
  • Flow / Context, but only for nodes in the flow

This affects the vertical distance if the diagram layout is:

  • Hierarchy top - down
  • Hierarchy bottom - up
  • Flow / Context, but only for nodes in the context

You can choose one of the following values:

  • [Any positive integer value]: Use this amount of pixels.
  • "auto": Let a layouting algorithm automatically set the value.
Note 
  • This option is optional.
  • The default value is auto.
  • This option does not affect the loading time of the diagram.
"nodeToEdgeDistance": 5 // "auto"

Set the minimum distance (in pixels) between an edge and an adjacent node in the same layer.

This affects the horizontal distance if the diagram layout is:

  • Hierarchy left - right
  • Flow / Context, but only for nodes in the flow

This affects the vertical distance if the diagram layout is:

  • Hierarchy top - down
  • Hierarchy bottom - up
  • Flow / Context, but only for nodes in the context

You can choose one of the following values:

  • [Any positive integer value]: Use this amount of pixels.
  • "auto": Let a layouting algorithm automatically set the value.
Note 
  • This option is optional.
  • The default value is 5.
  • This option does not affect the loading time of the diagram.
"orthogonalRouting": true // false

Choose whether or not edges can be routed orthogonally.

You can choose one of the following values:

  • true: All edge segments are horizontal or vertical.
  • false: Edge segments can be diagonal.
Note 
  • This option is optional.
  • The default value is true.
  • This option does not affect the loading time of the diagram.
"preciseNodeHeightCalculation": true // false

Determines the precision with which node heights are rendered to visually accommodate diagram text.

  • true: Each node is correctly sized to fit its label text. For extremely large diagrams, this can result in significantly longer loading times.
  • false: Loading times are vastly improved, but label text might not always fit in the nodes. When label text doesn't fit, the text is truncated by an ellipsis. For example: "ABC_Finance_Freq...".
Note 
  • This option is optional.
  • The default value is true.
  • Choosing true may lead to an increased loading time of the diagram.
"recursiveGroupLayering": true // false

Choose whether boxing edges are respected during layering.

This option is ignored when the diagram does not contain boxing nodes.

Warning  Enabling this option may change the diagram flow. Some arrow edges may go in the opposite direction. Otherwise occupying only adjacent layers by boxing nodes wouldn’t be possible in some cases.

You can choose one of the following values:

  • true: Boxing nodes are layered recursively:
    Boxed nodes in the same boxing node always occupy adjacent layers.
  • false: Group information is ignored during the layering.
Note 
  • This option is optional.
  • The default value is true.
  • Choosing true may lead to an increased loading time of the diagram.
"separateLayers": true // false

Strictly separate nodes of different layers. In other words, nodes are placed below each other. This prevents big nodes from extending into an adjacent layer.

You can choose one of the following values:

  • true: Layers are separated.
  • false: Layers are not separated.
Note 
  • This option is optional.
  • The default value is true.
  • This option does not affect the loading time of the diagram.
"webWorkers": true // false

Choose whether big diagrams should be built in the background thread.

You can choose one of the following values:

  • true: Enables multi-thread support for diagram building.

    Note This makes layout processing faster and less likely to freeze the browser.

  • false: All diagrams are built in the main thread.
Note 
  • This option is optional.
  • The default value is true.
  • Choosing false may lead to an increased loading time of the diagram.
"nodeplacer"

Use additional options for placing the nodes.
  "barycenterMode": true // false // "auto"

Choose whether the diagram should be as symmetric as possible. This may result in more edge bends.

You can choose one of the following values:

  • true: The diagram is more symmetric but may have more edge bends.
  • false: The diagram is less symmetric but may have fewer edge bends.
  • "auto": The layouting algorithm decides whether this option is set to true or false, depending on the diagram data.
Note 
  • This option is optional.
  • The default value is auto.
  • Choosing true may lead to an increased loading time of the diagram.
  "breakLongSegments": true // false // "auto"

Choose whether the diagram should break long arrow edges in favor of a more compact layout.

You can choose one of the following values:

  • true: Long edges are broken, for a more compact diagram.
  • false: Long edges are not broken.
  • "auto": The layouting algorithm decides whether this option is set to true or false, depending on the diagram data.
Note 
  • This option is optional.
  • The default value is auto.
  • Choosing true may lead to an increased loading time of the diagram.
  "groupCompactionStrategy": "none" // "maximum"

Choose the strategy for controlling the horizontal compactness of boxing nodes.

You can choose one of the following values:

  • "none": Do not use horizontal group compaction. The contents of a boxing node will occupy nearly the same horizontal positions as when not grouped at all.
  • "maximum": Make boxing nodes as narrow as possible.
Note 
  • This option is optional.
  • The default value is none.
  • Choosing none may lead to an increased loading time of the diagram.
  "nodeCompaction": true // false // "auto"

Choose whether to reduce the height of the diagram as much as possible. This places the nodes of a layer in a stacked style (horizontally interleaving), which reduces the width of the layer.

You can choose one of the following values:

  • true: Nodes are placed in a compact style.

    Note This may result in an increased width.

  • false: Nodes are not placed in a compact style.
  • "auto": The layouting algorithm decides whether this option is set to true or false, depending on the diagram data.
Note 
  • This option is optional.
  • The default value is auto.
  • This option does not affect the loading time of the diagram.
  "straightenEdges": true // false // "auto"

Apply a post-processing step to reduce edge bends.

You can choose one of the following values:

  • true: The post-processing step is applied to reduce edge bends.

    • Warning This may violate some minimum distances specified by the user and the edge distribution may no longer be uniform.

  • false: Post-processing step is not applied.
  • "auto": The layouting algorithm decides whether this option is set to true or false, depending on the diagram data.
Note 
  • This option is optional.
  • The default value is auto.
  • Choosing true may lead to an increased loading time of the diagram.