Skip to content
Starlight Site Graph

Node Styling

Here, you can find all configuration options related to the styling of nodes in the site graph.

Basic Node

Section titled “Basic Node”

This is the styling of a basic node, with no additional styles applied to it. Familiarize yourself with its shape, color, and size, before you move on to more advanced styles.

{}

Shape Config

Section titled “Shape Config”

The shape of the node can be set with the shape property. When using the polygon or star shape, it is also possible to set the number of points added to the shape using the shapePoints property; this property is ignored for other shapes.

{
  "graphConfig": {
    "nodeDefaultStyle": {
      "shape": "square",
      "shapePoints": 0
    }
  }
}

Size Config

Section titled “Size Config”

The (absolute) size of the node can be set with the shapeSize property. This size is further affected by the nodeScale and neighborScale.

{
  "graphConfig": {
    "nodeDefaultStyle": {
      "shapeSize": 10
    }
  }
}
shapeSize 10

New Color Config

Section titled “ Color Config”

With the shapeColor property, you can set the color of the node. This property can be set to:

  • a default color types defined by the package (e.g. nodeColor, nodeColorVisited, nodeColor1, etc.),
  • to stroke (uses the same color as the stroke of the node, if defined),
  • to your own CSS-defined variable (e.g. --color-variable),
  • to a hex color (e.g. #ff00ff).
{
  "graphConfig": {
    "nodeDefaultStyle": {
      "shapeColor": "nodeColor"
    }
  }
}
shapeColor

Shape Rotation

Section titled “Shape Rotation”

The rotation of a node can be set with the shapeRotation property. This property accepts either a number input (given as degrees), or random to randomize the rotation of the node.

{
  "graphConfig": {
    "nodeDefaultStyle": {
      "shapeRotation": 72,
      "shape": "star",
      "shapePoints": 5
    }
  }
}
shapeRotation 72

Corner Radius

Section titled “Corner Radius”

With the cornerRadius property, you can set the corner radius of the node, which works similarly to the CSS border-radius property. This property is only applicable to polygon or star-derived shapes (e.g. square, triangle, polygon, star), other shapes (e.g. circle) are not affected by this property. Input can either be a number (in pixels), or a percentage value represented as a string (e.g. “5.3%”).

{
  "graphConfig": {
    "nodeDefaultStyle": {
      "shape": "square",
      "shapeCornerRadius": "4%",
      "cornerType": "round"
    }
  }
}
shapeCornerRadius 4%

Shape Stroke

Section titled “Shape Stroke”

Similarly to the shape properties, you can also set the size, color and corner radius of the stroke using the strokeWidth, strokeColor, and strokeRadius properties.

For strokeColor, you can use the same values as for shapeColor, plus the special value inherit, which uses the same color as the node’s shapeColor (if defined).

{
  "graphConfig": {
    "nodeDefaultStyle": {
      "shape": "square",
      "shapeColor": "nodeColor1",
      "strokeWidth": 2,
      "strokeColor": "inherit",
      "strokeCornerRadius": "4%",
      "cornerType": "round"
    }
  }
}
strokeWidth 2
strokeCornerRadius 4%
shapeColor
strokeColor

Collider Scaling

Section titled “Collider Scaling”

The collider of a node is an invisible area around the node, which prevents other nodes from overlapping with it. By default, the collider is identical to the size of the node itself, and only the simulation forces are responsible for preventing nodes from overlapping.

However, if you’d like to have a larger area around the node that prevents other nodes from overlapping with it, you can increase the size of the collider using the colliderScale property.

{
  "graphConfig": {
    "repelForce": 0.1,
    "nodeDefaultStyle": {
      "colliderScale": 1
    }
  }
}
colliderScale 1

Node Scaling

Section titled “Node Scaling”

Using the nodeScale property, you can change how much a node is scaled with respect to the shapeSize property. This can be useful if you want to make a specific category of nodes larger or smaller in comparison to other nodes (e.g. making the current page’s node larger than the other nodes with { nodeCurrentStyle: { nodeScale: 2 } }).

{
  "graphConfig": {
    "scale": 1,
    "nodeDefaultStyle": {
      "shapeSize": 10,
      "nodeScale": 1
    }
  }
}
nodeScale 1

Neighbor Scaling

Section titled “Neighbor Scaling”

A node can have different amount of links compared to other nodes. If you want a node to be larger than its surrounding nodes when it has more links, you can do so by increasing the neighborScale property.

Internally, this property multiplies the nodeScale by a smoothed exponential function of the number of links the node has.

{
  "graphConfig": {
    "scale": 1,
    "nodeDefaultStyle": {
      "neighborScale": 1
    }
  }
}
neighborScale 1