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”

You can change the shape of the node by setting the shape property. When using the polygon or star shape, you can also set the number of points using the shapePoints property; this property is ignored for other shapes.

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

Size Config

Section titled “Size Config”

You can change the size of the node by setting the shapeSize property.

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

Color Config

Section titled “Color Config”

You can change the color of the node by setting the shapeColor property.

{
  "nodeDefaultStyle": {
    "shapeColor": "nodeColor"
  }
}
shapeColor

Shape Rotation

Section titled “Shape Rotation”

You can change the rotation of the node by setting the shapeRotation property. This property can either receive a number input (in degrees), or random to randomize the rotation of the node.

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

Corner Radius

Section titled “Corner Radius”

You can change the corner radius of the node by setting the cornerRadius property, 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). Input can either be a number (in pixels), or a string with a percentage value (e.g. “5.3%”).

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

Shape Stroke

Section titled “Shape Stroke”

You can change the stroke of the node by setting the strokeWidth, strokeColor, and strokeRadius properties.

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

Collider Scaling

Section titled “Collider Scaling”

You can change how much the size of the node’s collider should be scaled by, by setting the colliderScale property.

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

Node Scaling

Section titled “Node Scaling”

You can change how much a node is scaled with respect to the shapeSize property, by setting the nodeScale property.

{
  "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 if it has more links, you can do so by increasing the neighborScale property.

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