Node examples
Nodes carry their look in their attributes: a shape, a radius, a color, plus optional strokes, outlines, halos, labels and animations. Set these per node, or apply them in bulk with style rules — see the Styling elements guide for the full attribute reference.
Every demo runs live in your browser — drag, zoom and use the controls.
Node shapes
Every built-in shape, selected with shape on a node’s attributes. The radius and colour stay constant so you can compare the silhouettes.
const shapes = ['circle','square','triangle','triangleLeft','triangleRight','diamond','pentagon','hexagon','star'];const nodes = shapes.map((shape, i) => ({ id: shape, attributes: { x: (i % 3) * 130, y: Math.floor(i / 3) * 130, shape, radius: 26, color: '#0f766e' },}));await nodus.setGraph({ nodes, edges: [] });Size & colour
Two attributes do most of the visual work: radius sizes the node, color fills it. Vary them per node to encode data.
const variants = [ { radius: 8, color: '#0f766e' }, { radius: 14, color: '#2563eb' }, { radius: 28, color: '#f59e0b' },];const nodes = variants.map((v, i) => ({ id: 'n' + i, attributes: { x: i * 130, y: 0, radius: v.radius, color: v.color },}));Pie fills
Set color to an array of colours and the node renders as equal-angle pie slices — handy for showing a breakdown right on the node.
const palette = ['#0f766e', '#2563eb', '#db2777', '#f59e0b', '#475569'];const nodes = [2, 3, 4, 5].map((count, i) => ({ id: 'pie' + count, attributes: { x: i * 140, y: 0, radius: 30, color: palette.slice(0, count) },}));Inner & outer strokes
innerStroke draws a border inside the fill; outerStroke rings the node on the outside. Each takes a color and width, and you can combine both.
{ id: 'inner', attributes: { radius: 26, color: '#e2e8f0', innerStroke: { color: '#0f766e', width: 4 } } }{ id: 'outer', attributes: { radius: 26, color: '#e2e8f0', outerStroke: { color: '#f59e0b', width: 6 } } }{ id: 'both', attributes: { radius: 26, color: '#e2e8f0', innerStroke: { color: '#0f766e', width: 4 }, outerStroke: { color: '#475569', width: 3 } } }Outline & ring
outline: true draws a default ring around a node. For full control over the ring’s colour and thickness, use outerStroke instead.
{ id: 'outlined', attributes: { radius: 28, color: '#0f766e', outline: true } }{ id: 'ringed', attributes: { radius: 28, color: '#2563eb', outerStroke: { color: '#f59e0b', width: 4 } } }Halo glow
A halo paints a soft glow around the node at the given width — useful for drawing attention to a node without changing its shape.
const nodes = [4, 8, 14, 22].map((width, i) => ({ id: 'n' + i, attributes: { x: i * 140, y: 0, radius: 22, color: '#0f766e', halo: { color: '#2563eb', width } },}));Labels & text positions
A node’s label lives in text. Set position (‘top’, ‘bottom’, ‘left’, ‘right’, ‘center’), wrap long text with maxLineLength, add a secondary line, or give it a backgroundColor pill.
{ attributes: { radius: 22, text: { content: 'right', position: 'right' } } }{ attributes: { radius: 22, text: { content: 'this label wraps', position: 'bottom', maxLineLength: 12 } } }{ attributes: { radius: 22, text: { content: 'Primary', position: 'bottom', secondary: { content: 'secondary' } } } }{ attributes: { radius: 22, text: { content: 'pill label', position: 'bottom', backgroundColor: '#0f766e', color: '#ffffff' } } }Pulse animation
A pulse emits animated rings that expand from startRatio to endRatio, fading from startColor to endColor. Tune duration and interval to set the rhythm.
{ attributes: { radius: 24, color: '#0f766e', pulse: { startRatio: 1, endRatio: 2.4, width: 4, startColor: '#0f766e', endColor: 'rgba(15,118,110,0)', interval: 0, duration: 1400 } } }Text styles
Within text you can set style (‘bold’ or ‘italic’), a color, and a system font. These compose with the label position.
{ text: { content: 'bold', position: 'bottom', style: 'bold', color: '#0f766e', font: 'Arial' } }{ text: { content: 'italic', position: 'bottom', style: 'italic', color: '#2563eb', font: 'Georgia' } }{ text: { content: 'mono', position: 'bottom', color: '#475569', font: 'Courier New' } }Icons & badges
A node’s icon renders a Unicode glyph right on the node (no web fonts, no images). Positioned badges add small text markers in any corner via badges.topRight.text.content.
const attributes = { radius: 26, color: '#0f766e', icon: { content: '★', font: 'sans-serif', color: '#ffffff', scale: 0.7 }, text: { content: 'Star', position: 'bottom', color: '#334155' }, badges: { topRight: { text: { content: 'FR' } } },};Node images
A top-level image: { url, scale } renders a picture on the node. The URL can be an inline-SVG data-URI, so each node carries its own self-contained image with no external files.
function svgAvatar(letter, fill) { return 'data:image/svg+xml;utf8,' + encodeURIComponent( '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">' + '<circle cx="32" cy="32" r="30" fill="' + fill + '"/>' + '<text x="32" y="44" font-size="34" text-anchor="middle" fill="#fff">' + letter + '</text>' + '</svg>');}node.setAttributes({ image: { url: svgAvatar('A', '#2563eb'), scale: 1 } });