edges — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited edges (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.
Edge rendering configuration: arrows, dashed lines, curved paths, self-loops, labels, and edge aggregation.
Edges are configured via GraphEdge data properties and GraphCanvas props — there is no separate edge component to import for typical use.
| Property | Type | Default | Description | ||
|---|---|---|---|---|---|
id | string | — | Unique ID (required) | ||
source | string | — | Source node ID (required) | ||
target | string | — | Target node ID (required) | ||
label | string | — | Edge label text | ||
subLabel | string | — | Secondary label | ||
size | number | — | Edge thickness | ||
fill | string | — | Override edge color | ||
dashed | boolean | false | Dashed line style | ||
dashArray | [number, number] | [3, 1] | Dash pattern [dashSize, gapSize] | ||
interpolation | `'linear' \ | 'curved'` | 'linear' | Edge shape | |
arrowPlacement | `'none' \ | 'mid' \ | 'end'` | 'end' | Arrow position |
labelVisible | boolean | — | Force label visibility | ||
subLabelPlacement | `'below' \ | 'above'` | 'below' | SubLabel position |
| Prop | Type | Default | Description | |||
|---|---|---|---|---|---|---|
edgeInterpolation | `'linear' \ | 'curved'` | 'linear' | Default edge shape for all edges | ||
edgeArrowPosition | `'none' \ | 'mid' \ | 'end'` | — | Default arrow placement | |
edgeLabelPosition | `'below' \ | 'above' \ | 'inline' \ | 'natural'` | — | Default edge label position |
aggregateEdges | boolean | false | Merge parallel edges |
const edges = [
{ id: 'e1', source: '1', target: '2', label: 'connects' },
{ id: 'e2', source: '2', target: '3' },
];
<GraphCanvas nodes={nodes} edges={edges} />// Per-edge
const edges = [
{ id: 'e1', source: '1', target: '2', arrowPlacement: 'end' },
{ id: 'e2', source: '2', target: '3', arrowPlacement: 'mid' },
{ id: 'e3', source: '3', target: '1', arrowPlacement: 'none' },
];
// Global default
<GraphCanvas edges={edges} edgeArrowPosition="end" />// Per-edge
const edges = [
{ id: 'e1', source: '1', target: '2', interpolation: 'curved' },
];
// Global default
<GraphCanvas edges={edges} edgeInterpolation="curved" />const edges = [
{ id: 'e1', source: '1', target: '2', dashed: true },
{ id: 'e2', source: '2', target: '3', dashed: true, dashArray: [5, 3] },
];Edges where source === target automatically render as loops:
const edges = [
{ id: 'e1', source: '1', target: '1', label: 'self-reference' },
];Merge multiple edges between the same pair of nodes:
<GraphCanvas
nodes={nodes}
edges={edges}
aggregateEdges
/>const edges = [
{ id: 'e1', source: '1', target: '2', fill: '#FF5722' },
{ id: 'e2', source: '2', target: '3', fill: '#4CAF50' },
];<GraphCanvas
edges={edges}
edgeLabelPosition="above"
/><GraphCanvas
edges={edges}
onEdgeClick={(edge, event) => console.log('Clicked:', edge.id)}
onEdgePointerOver={(edge) => console.log('Hover:', edge.id)}
onEdgePointerOut={(edge) => console.log('Left:', edge.id)}
onEdgeContextMenu={(edge) => console.log('Right-click:', edge?.id)}
/>fill overrides theme.edge.fill per-edgeinterpolation and arrowPlacement override the global edgeInterpolation / edgeArrowPositionsource === targetaggregateEdges combines edges with the same source/target pair into a single visual edge~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.