nodes — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited nodes (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.
Node rendering components and custom node support. Default nodes are 3D spheres; variants add icons, SVGs, and badges. Use renderNode for fully custom rendering.
import {
Sphere,
SphereWithIcon,
SphereWithSvg,
Svg,
Badge
} from 'reagraph';Basic 3D sphere. This is what renders when no renderNode is provided.
Sphere with an image/icon overlay.
| Prop | Type | Description |
|---|---|---|
image | string | Image URL (required) |
Sphere with an SVG overlay.
| Prop | Type | Description |
|---|---|---|
image | string | SVG URL (required) |
svgFill | ColorRepresentation | Override SVG fill color |
Standalone SVG node (no sphere).
| Prop | Type | Description |
|---|---|---|
image | string | SVG URL (required) |
Overlay badge for displaying counts or status on a node.
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
label | string | — | Badge text (required) | ||
backgroundColor | string | '#ffffff' | Background color | ||
textColor | string | '#000000' | Text color | ||
strokeColor | string | — | Border color | ||
strokeWidth | number | 0 | Border thickness | ||
radius | number | 0.12 | Corner radius | ||
badgeSize | number | 1.5 | Size multiplier relative to node | ||
position | `BadgePosition \ | [x, y, z]` | 'top-right' | Placement | |
padding | number | 0.15 | Text padding | ||
fontSize | number | 0.3 | Font size | ||
fontWeight | number | — | Font weight (100-900) | ||
icon | string | — | SVG icon path or URL | ||
iconSize | number | 0.35 | Icon size | ||
iconPosition | `'start' \ | 'end' \ | [x, y]` | 'start' | Icon placement |
iconTextGap | number | 0.01 | Gap between icon and text | ||
opacity | number | 1 | Badge opacity |
BadgePosition: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center'
All built-in node types receive:
| Prop | Type | Description |
|---|---|---|
id | string | Node ID |
node | InternalGraphNode | Full node data |
color | ColorRepresentation | Resolved color (handles active/selected) |
size | number | Resolved size |
active | boolean | Whether node is active |
selected | boolean | Whether node is selected |
opacity | number | Resolved opacity |
animated | boolean | Whether animations are enabled |
import { GraphCanvas, NodeRendererProps, Sphere, Badge } from 'reagraph';
const renderNode = ({ node, ...rest }: NodeRendererProps) => (
<group>
<Sphere {...rest} node={node} />
{node.data?.count > 0 && (
<Badge
{...rest}
node={node}
label={String(node.data.count)}
position="top-right"
backgroundColor="#ff5722"
textColor="#fff"
/>
)}
</group>
);
<GraphCanvas
nodes={nodes}
edges={edges}
renderNode={renderNode}
/>Override theme defaults per node via data:
const nodes = [
{ id: '1', label: 'Normal', fill: '#7CA0AB' },
{ id: '2', label: 'Alert', fill: '#FF5722', size: 12 },
{ id: '3', label: 'With Icon', icon: '/server.svg' },
];const renderNode = ({ node, ...rest }: NodeRendererProps) => (
<SphereWithIcon {...rest} node={node} image={node.icon} />
);
<GraphCanvas nodes={nodes} edges={edges} renderNode={renderNode} />Sphere (no renderNode needed)renderNode receives Three.js context — return <group>, <mesh>, or reagraph symbol componentsfill in data overrides theme.node.fillsize in data overrides the sizing strategy result<group>~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.