Node Rendering

On this page, you can find all the configuration options related to the rendering of nodes in the site graph, both in terms of which nodes are shown and how they are styled.

If you are looking for how an individual node can be styled, check out the node style page.

Render Unresolved Nodes

The renderUnresolved option toggles the rendering of unresolved nodes in the graph. When a link goes to a page on the same site which does not exist, the node is marked as unresolved.

Config

{
  "renderUnresolved": true
}

Sitemap

{
  "node/": {
    "links": [
      "basic-node/",
      "external-node/",
      "unresolved-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": []
  },
  "basic-node/": {
    "title": "Basic Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "external-node/": {
    "external": true,
    "title": "External Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "unresolved-node/": {
    "exists": false,
    "title": "Unresolved Node",
    "links": [],
    "backlinks": [
      "node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": true,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Hide Unresolved

Render Unresolved

Render External Nodes

The renderExternal option toggles the rendering of external nodes in the graph. External nodes are links to pages on other sites.

Config

{
  "renderExternal": true
}

Sitemap

{
  "node/": {
    "links": [
      "basic-node/",
      "external-node/",
      "unresolved-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": []
  },
  "basic-node/": {
    "title": "Basic Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "external-node/": {
    "external": true,
    "title": "External Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "unresolved-node/": {
    "exists": false,
    "title": "Unresolved Node",
    "links": [],
    "backlinks": [
      "node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": true,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Hide External

Render External

Node Styles

In the site graph plugin, there are 6 types of nodes that can exist in the graph:

1. Default (base style)
2. External (nodes refers to pages on other sites)
3. Visited (user has visited the page)
4. Tags (node is a tag)
5. Current (current page)
6. Unresolved (node refers to a page that does not exist)

Each node type can be individually styled using their own style. Also, each subsequent style inherits from the previous style in the list.

An example: a node can be both visited as well as current at the same time, the final style for this node will thus be determined as:

1. Styles specified by current style
2. Styles specified by visited style
3. Styles specified by default style

For information about how these node styles can be configured, see the node style page.

Note

If you actually just want to change the color used for a particular type of node, you can override the corresponding CSS variable in your site’s stylesheet, check out the CSS configuration page for more information.

Default

nodeDefaultStyle is a style applied to all nodes in the graph, each other style applied to a node, overrides this style.

Config

{
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeColor": "nodeColor",
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  }
}

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1,
    "shapePoints": 0,
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal"
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

nodeDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

External

nodeExternalStyle is a style applied to nodes that refer to pages on other sites. External nodes only appear if the renderExternal option is enabled in the graph config.

Config

{
  "nodeExternalStyle": {
    "shape": "square",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeColor": "nodeColorExternal",
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 0.8,
    "neighborScale": 1
  }
}

Sitemap

{
  "node/": {
    "links": [
      "basic-node/",
      "external-node/",
      "unresolved-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": []
  },
  "basic-node/": {
    "title": "Basic Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "external-node/": {
    "external": true,
    "title": "External Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "unresolved-node/": {
    "exists": false,
    "title": "Unresolved Node",
    "links": [],
    "backlinks": [
      "node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.8,
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "neighborScale": 1
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

nodeDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

nodeExternalStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

Visited

nodeVisitedStyle is a style applied to nodes corresponding to pages that have been visited by the user. Visited nodes only appear if the trackVisitedPages option is enabled in the general config.

Config

{
  "nodeVisitedStyle": {
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeColor": "nodeColorVisited",
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  }
}

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  },
  "starlight-site-graph/configuration/graph/nodes/": {
    "exists": true,
    "title": "Visited Page",
    "links": [
      "node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited",
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

nodeDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

nodeVisitedStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

Tags

tagDefaultStyle is the default style for tags in the graph. Tags are pseudo-nodes that are created when a page has tags (either via frontmatter or tagRules).

Config

{
  "tagDefaultStyle": {
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 1,
    "strokeColor": "nodeColorTag",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "tagRenderMode": "node"
}

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "tags": [
      "Tag"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "node",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7,
    "shapePoints": 0,
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeCornerRadius": "0%",
    "cornerType": "normal"
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

nodeDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

tagDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

Current

nodeCurrentStyle defines the style for the current node in the graph. The current node corresponds to the page that the user is currently viewing.

Config

{
  "nodeCurrentStyle": {
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeColor": "nodeColorCurrent",
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  }
}

Sitemap

{
  "node/": {
    "links": [
      "other-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "another-node/"
    ]
  },
  "other-node/": {
    "links": [
      "another-node/"
    ],
    "title": "Other Node",
    "exists": true,
    "backlinks": [
      "node/"
    ]
  },
  "another-node/": {
    "links": [
      "node/"
    ],
    "title": "Another Node",
    "exists": true,
    "backlinks": [
      "other-node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": false,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent",
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved"
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

nodeDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

nodeCurrentStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

Unresolved

nodeUnresolvedStyle is the style applied to nodes that refer to pages that do not exist. Unresolved nodes only appear if the renderUnresolved option is enabled in the graph config.

Config

{
  "nodeUnresolvedStyle": {
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeColor": "nodeColorUnresolved",
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  }
}

Sitemap

{
  "node/": {
    "links": [
      "basic-node/",
      "external-node/",
      "unresolved-node/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": []
  },
  "basic-node/": {
    "title": "Basic Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "external-node/": {
    "external": true,
    "title": "External Node",
    "exists": true,
    "links": [],
    "backlinks": [
      "node/"
    ]
  },
  "unresolved-node/": {
    "exists": false,
    "title": "Unresolved Node",
    "links": [],
    "backlinks": [
      "node/"
    ]
  }
}

Full Config

{
  "actions": [],
  "tagStyles": {},
  "tagRenderMode": "none",
  "enableDrag": false,
  "enableZoom": false,
  "enablePan": false,
  "enableHover": true,
  "enableClick": "disable",
  "depth": 8,
  "depthDirection": "both",
  "followLink": "same",
  "scale": 1.1,
  "minZoom": 0.05,
  "maxZoom": 4,
  "renderLabels": true,
  "renderArrows": true,
  "renderUnresolved": true,
  "renderExternal": true,
  "scaleLinks": true,
  "scaleArrows": true,
  "minZoomArrows": 0.8,
  "labelOpacityScale": 1.3,
  "labelMutedOpacity": 0,
  "labelHoverOpacity": 1,
  "labelAdjacentOpacity": 1,
  "labelFontSize": 12,
  "labelHoverScale": 1,
  "labelOffset": 10,
  "labelHoverOffset": 14,
  "zoomDuration": 75,
  "zoomEase": "out_quad",
  "hoverDuration": 200,
  "hoverEase": "out_quad",
  "nodeDefaultStyle": {
    "shape": "circle",
    "shapeColor": "nodeColor",
    "shapeSize": 10,
    "strokeWidth": 0,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.5
  },
  "nodeVisitedStyle": {
    "shapeColor": "nodeColorVisited"
  },
  "nodeCurrentStyle": {
    "shapeColor": "nodeColorCurrent"
  },
  "nodeUnresolvedStyle": {
    "shapeColor": "nodeColorUnresolved",
    "shape": "circle",
    "shapePoints": 0,
    "shapeSize": 10,
    "shapeRotation": 0,
    "shapeCornerRadius": "0%",
    "strokeWidth": 0,
    "strokeColor": "inherit",
    "strokeCornerRadius": "0%",
    "cornerType": "normal",
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 1
  },
  "nodeExternalStyle": {
    "shape": "square",
    "shapeColor": "nodeColorExternal",
    "strokeColor": "inherit",
    "nodeScale": 0.6
  },
  "tagDefaultStyle": {
    "shape": "circle",
    "shapeSize": 6,
    "shapeColor": "backgroundColor",
    "strokeColor": "nodeColorTag",
    "strokeWidth": 1,
    "colliderScale": 1,
    "nodeScale": 1,
    "neighborScale": 0.7
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

nodeDefaultStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle

nodeUnresolvedStyle Default NodeCurrent NodeVisited NodeExternal NodeUnresolved NodeDefault TagRed ColorYellow StarRounded SquareHollow CircleHollow HexagonBeveled Triangle