Sticky notes

Notes are free-floating annotations rendered above the graph — give each one a position, a color, and some text. Set attachedElement and a connector line tethers the note to a node, tracking it as the graph moves.

Drag a note to reposition it. The blue note stays pinned to Carol — drag Carol and watch the connector follow.

Notes

// Free-floating annotations placed in graph coordinates. `attachedElement` ties a
// note to a node so a connector line tracks it as the graph moves.
const notes = [
    {
        id: 'welcome',
        content: 'Drag me around — I float above the graph.',
        color: '#FDE68A',
        x: -70,
        y: -220,
        width: 240,
        height: 120
    },
    {
        id: 'callout',
        content: 'Pinned to Carol — drag her and I follow.',
        color: '#93C5FD',
        x: 80,
        y: 40,
        width: 210,
        height: 150,
        attachedElement: { type: 'node', id: 'carol' }
    }
]

Data

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice' } },
        { id: 'bob', data: { label: 'Bob' } },
        { id: 'carol', data: { label: 'Carol' } },
        { id: 'dave', data: { label: 'Dave' } },
        { id: 'erin', data: { label: 'Erin' } }
    ],
    edges: [
        { from: 'alice', to: 'bob' },
        { from: 'alice', to: 'carol' },
        { from: 'carol', to: 'dave' },
        { from: 'erin', to: 'alice' }
    ],
    notes // free-floating annotations (see the Notes tab)
}