labels — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited labels (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Label visibility, styling, and font configuration for nodes and edges. Labels auto-show/hide based on zoom level or can be forced visible.
import { GraphCanvas } from 'reagraph';
// LabelVisibilityType is used as a prop value, not imported directlyControls which labels are visible. Set via labelType on GraphCanvas:
| Value | Description |
|---|---|
'auto' | Show labels based on zoom level and node size (default) |
'all' | Always show all labels |
'none' | Hide all labels |
'nodes' | Show only node labels |
'edges' | Show only edge labels |
Controls where edge labels appear. Set via edgeLabelPosition on GraphCanvas:
| Value | Description |
|---|---|
'inline' | On the edge line (default) |
'above' | Above the edge |
'below' | Below the edge |
'natural' | Natural position along edge |
These apply to the internal Label component used by nodes and edges:
| Prop | Type | Default | Description |
|---|---|---|---|
fontSize | number | 7 | Font size |
fontUrl | string | Google Roboto | Font file URL (.ttf/.otf/.woff) |
color | ColorRepresentation | '#2A6475' | Text color |
stroke | ColorRepresentation | — | Text stroke color |
backgroundColor | ColorRepresentation | — | Label background color |
backgroundOpacity | number | 1 | Background opacity |
padding | number | 1 | Background padding |
strokeColor | ColorRepresentation | — | Background border color |
strokeWidth | number | 0 | Background border width |
radius | number | 0.1 | Background corner radius |
opacity | number | 1 | Label opacity |
ellipsis | number | 75 | Max characters before ellipsis |
<GraphCanvas
nodes={nodes}
edges={edges}
labelType="auto"
/>Labels appear as you zoom in, disappear when zoomed out. Larger nodes show labels at greater distances.
<GraphCanvas nodes={nodes} edges={edges} labelType="all" />const nodes = [
{ id: '1', label: 'Always Visible', labelVisible: true },
{ id: '2', label: 'Auto Managed' },
{ id: '3', label: 'Always Hidden', labelVisible: false },
];<GraphCanvas
nodes={nodes}
edges={edges}
labelFontUrl="/fonts/Inter-Regular.woff"
/>const nodes = [
{ id: '1', label: 'Server', subLabel: '192.168.1.1' },
{ id: '2', label: 'Database', subLabel: 'PostgreSQL' },
];const edges = [
{ id: 'e1', source: '1', target: '2', label: 'HTTP', subLabel: '443' },
];
<GraphCanvas
edges={edges}
edgeLabelPosition="above"
/>const customTheme = {
...lightTheme,
node: {
...lightTheme.node,
label: {
color: '#333',
stroke: '#fff',
activeColor: '#1DE9AC',
backgroundColor: 'rgba(255,255,255,0.8)',
padding: 2,
radius: 0.2,
},
},
};
<GraphCanvas nodes={nodes} edges={edges} theme={customTheme} />labelType="auto" uses zoom distance and node size to compute visibilitylabelVisible: true/false overrides the global labelTypetheme.edge.label for styling@react-three/dreilabelFontUrl for custom fonts~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.