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

{
  "graphConfig": {
    "renderUnresolved": true
  }
}

Sitemap

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

Full Config

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

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

{
  "graphConfig": {
    "renderExternal": true
  }
}

Sitemap

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

Full Config

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

Hide External

Render External

Node Styles

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

1. Default (node does not fall into any category)
2. External (node refers to pages on other sites)
3. Visited (user has visited the page)
4. Tags (node contains a tag)
5. Current (node corresponds to current page)
6. Unresolved (node refers to a page that does not exist)

Each category applies a specific style to the node, and will override any styles define by categories that are of ‘lower priority’. The list above also gives the priority order of the different categories (where the unresolved style will override all other styles).

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, overrides visited and default
2. Styles specified by visited style, overrides default
3. Styles specified by default style

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

Default

nodeDefaultStyle is a style applied to all nodes in the graph, any other style applied to a node will override this style.

Config

{
  "graphConfig": {
    "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

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

nodeDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled 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

{
  "graphConfig": {
    "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
    },
    "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
  },
  "/basic-node/": {
    "title": "Basic Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/external-node/": {
    "external": true,
    "title": "External Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/unresolved-node/": {
    "exists": false,
    "title": "Unresolved Node",
    "backlinks": ["/node/"]
  }
}

Full Config

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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.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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

nodeDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled Triangle

nodeExternalStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled 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

{
  "graphConfig": {
    "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
    },
    "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

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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",
      "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

nodeDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled Triangle

nodeVisitedStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled 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

{
  "graphConfig": {
    "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
    },
    "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

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "node",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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,
      "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

nodeDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled Triangle

tagDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled 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

{
  "graphConfig": {
    "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
    },
    "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

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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",
      "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

nodeDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled Triangle

nodeCurrentStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled 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

{
  "graphConfig": {
    "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
    },
    "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
  },
  "/basic-node/": {
    "title": "Basic Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/external-node/": {
    "external": true,
    "title": "External Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/unresolved-node/": {
    "exists": false,
    "title": "Unresolved Node",
    "backlinks": ["/node/"]
  }
}

Full Config

{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "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": 1,
      "shapePoints": 0,
      "shapeRotation": 0,
      "shapeCornerRadius": "0%",
      "strokeColor": "inherit",
      "strokeCornerRadius": "0%",
      "cornerType": "normal"
    },
    "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
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

nodeDefaultStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled Triangle

nodeUnresolvedStyle Default Node Current Node Visited Node External Node Unresolved Node Default Tag Large Node Red Color Yellow Star Rounded Square Hollow Circle Hollow Hexagon Beveled Triangle