Modeling yFiles Graphs

In this section, we will describe how we model yFiles graphs using shapes, masters and style sheets. Basically, the VSDX Export translates each graph item to one shape or group shape. yFiles styles are loosely represented by masters and style sheets. However, there is no 1:1 correspondence between a yFiles style and a VSDX master: E.g. one yFiles style could be realized by multiple VSDX masters.

The VSDX Export represents nodes by multiple shapes: More precisely, a node is represented by a container group shape that holds everything that belongs to a node, i.e., shapes for labels and ports and a shape for the visualization of the node itself. This way, when moving or resizing a node, the shapes of the elements that belong to the node stay in place.

Ports are realized as shapes that have a Connection to which edges can connect. These shapes are also responsible for the visualization of the ports.

Edges are represented by 1D connector shapes. The endpoints (beginX, beginY, endX, endY) are glued with formulas to the connections of the edge’s source and target ports. Thus, edges are rerouted when the source or target nodes are moved.

Labels consist of shapes that have text. When the owner is a node, these shapes are placed within the node’s container shape. Otherwise, when the owner is an edge or port, they are glued to the owner’s shape’s pinX/pinY. In this manner, the labels also move together with their owners (with some limitations).

The outermost shapes for the graph items are all created by the VSDX Export. Supplying masters and style sheets is the task of MasterProviders. Setting properties of the shapes and creating child shapes is the task of ShapeProcessingSteps. The VSDX Export comes with a number of MasterProviders and ShapeProcessingSteps that set all important geometric properties and can handle all yFiles common styles as well as a large set of custom styles that produce SvgVisuals. If the default MasterProviders and ShapeProcessingSteps are not sufficient, you can write your own implementations and hook them into the pipeline. Please refer to the Customization chapter for this.