Vertex Shapes

Vertices are rendered as circles by default. The shape style property allows using alternative geometries either by passing a shape keyword or by providing additional configuration for more control. This property is available anywhere vertex styles can be specified (for example in settings.baseStyles.vertex, settings.baseStyles['vertex:group'], or within settings.ruleBasedStyles).

Supported values are circle, ellipse square, rectangle, roundedRectangle, triangle, diamond, pentagon, hexagon, and octagon.

The following describes a few additional configurations:

• ellipse, rectangle, and roundedRectangle can set widthHeightRatio to control aspect ratio.

• roundedRectangle also supports cornerRadiusRatio (defaults to 0.1).

• triangle can rotate using direction: 'up' | 'down' | 'left' | 'right'.

• Applying shape: null removes any shape override and falls back to the default circle.

• When combined with caption.angle: null, enabling caption.resizeParent lets the chosen shape adapt to the caption length.

The following shows an example of applying ellipse styling to vertices:

const settings = {
  baseStyles: {
    vertex: {
      shape: { type: 'ellipse', widthHeightRatio: 1.5 }
    }
  }
};

The preceding code produces the following output:

Figure: Applying Ellipse Styling to Vertices

Description of the illustration vertex_shapes.png