Tag Rendering

Tags are pseudo-nodes that are created when a page has tags associated with it (either via frontmatter or tagRules). They can either be rendered as individual nodes, or affect the style of the nodes they are associated with.

Tags

{
  "tagRenderMode": "node"
}

{
  "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/"
    ]
  }
}

{
  "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
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Tag Rendering Mode

The tagRenderMode option determines how tags are rendered in the graph:

none: Tags are not rendered in the graph.
node: Tags are rendered as individual nodes in the graph, connected to all nodes that have the corresponding tag. The style of the tags is determined by the tagStyles option.
same: Nodes assume the style of the associated tag(s) defined in tagStyles. Nodes with multiple tags will assume the style of the first tag in the list.
both: Tags are rendered as individual nodes in the graph, connected to all nodes that have the corresponding tag, and the nodes themselves assume the style of the associated tag(s) defined in tagStyles.

{
  "tagRenderMode": "node",
  "tagStyles": {
    "Tag": {
      "shape": "square",
      "strokeWidth": 8,
      "cornerType": "round",
      "strokeCornerRadius": "80%"
    }
  }
}

{
  "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/"
    ]
  }
}

{
  "actions": [],
  "tagStyles": {
    "Tag": {
      "shape": "square",
      "strokeWidth": 8,
      "cornerType": "round",
      "strokeCornerRadius": "80%"
    }
  },
  "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
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}

Tag Styles

The tagStyles option is an object that defines the style of tags in the graph. Each key in the object corresponds to a tag name, and the value corresponds to a Node Style object.

Nodes copy styles from the associated tag(s) based on the order in which they are specified in the node’s tags list.

{
  "tagRenderMode": "node",
  "tagStyles": {
    "Tag 1": {
      "shape": "square",
      "shapePoints": 0,
      "shapeSize": 6,
      "shapeColor": "nodeColor1",
      "shapeRotation": 0,
      "shapeCornerRadius": "0%",
      "strokeWidth": 0,
      "strokeColor": "nodeColorTag",
      "strokeCornerRadius": "0%",
      "cornerType": "normal",
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "Tag 2": {
      "shape": "triangle",
      "shapePoints": 0,
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "shapeRotation": 0,
      "shapeCornerRadius": "0%",
      "strokeWidth": 8,
      "strokeColor": "nodeColorTag",
      "strokeCornerRadius": "80%",
      "cornerType": "round",
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    }
  }
}

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

{
  "actions": [],
  "tagStyles": {
    "Tag 1": {
      "shape": "square",
      "shapePoints": 0,
      "shapeSize": 6,
      "shapeColor": "nodeColor1",
      "shapeRotation": 0,
      "shapeCornerRadius": "0%",
      "strokeWidth": 0,
      "strokeColor": "nodeColorTag",
      "strokeCornerRadius": "0%",
      "cornerType": "normal",
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "Tag 2": {
      "shape": "triangle",
      "shapePoints": 0,
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "shapeRotation": 0,
      "shapeCornerRadius": "0%",
      "strokeWidth": 8,
      "strokeColor": "nodeColorTag",
      "strokeCornerRadius": "80%",
      "cornerType": "round",
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    }
  },
  "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
  },
  "linkWidth": 1,
  "linkHoverWidth": 1,
  "arrowSize": 5,
  "arrowAngle": 0.5235987755982988,
  "centerForce": 0.05,
  "colliderPadding": 20,
  "repelForce": 200,
  "linkDistance": 0,
  "alphaDecay": 0.0228,
  "visibilityRules": [
    "**/*"
  ],
  "prefetchPages": false
}